279 行
12 KiB
JavaScript
279 行
12 KiB
JavaScript
;!function (e) {
|
|
"use strict";
|
|
var _ws, n = function () {
|
|
this.v = "1.0.0";
|
|
this.busiMessageUrl = "http://192.168.3.115:9201/api-busi/messageBusi/readMessage/";
|
|
}, _url, _status, _lock = false, _id, _message = new Array(), _nowMessage;
|
|
var _onopen = function (event) {
|
|
_status = "open";
|
|
console.log("连接成功");
|
|
}, _onerror = function (event) {
|
|
_status = "error";
|
|
console.log("连接出错");
|
|
}, _onmessage = function (event) {
|
|
var obj = eval("(" + event.data + ")");
|
|
if(obj !=undefined && obj !=null){
|
|
if(obj[0].code == 1){
|
|
// 第一次历史消息查询失败的情况
|
|
return;
|
|
}if(obj[0].code == 0){
|
|
// 第一次历史消息查询成功的情况
|
|
if(obj[0].data.size == 1){
|
|
_message.push(obj[0].data.messageBusi);
|
|
_showMessage();
|
|
}else if(obj[0].data.size > 1){
|
|
// 提醒未读消息条数
|
|
_showHistoryMessage(obj[0].data.size);
|
|
}
|
|
|
|
|
|
return;
|
|
}
|
|
// 实时消息
|
|
for (var i = 0; i < obj.length; i++) {
|
|
_message.push(obj[i]);
|
|
}
|
|
if (_message.length > 0) {
|
|
_showMessage();
|
|
}
|
|
}
|
|
console.log("收到消息:" + event.data);
|
|
}, _onclose = function (event) {
|
|
_status = "close";
|
|
console.log("关闭连接");
|
|
}, _reconnection = function () {
|
|
if (!'WebSocket' in window) {
|
|
console.error("浏览器不支持推送消息");
|
|
return;
|
|
}
|
|
_ws = new WebSocket(_url,"message_box");
|
|
_ws.onopen = _onopen;
|
|
_ws.onerror = _onerror;
|
|
_ws.onmessage = _onmessage;
|
|
_ws.onclose = _onclose;
|
|
}, _closeHear = function () {
|
|
if (_id) {
|
|
clearInterval(_id);
|
|
}
|
|
}, _heartCheck = function () {
|
|
if (_lock) {
|
|
return;
|
|
}
|
|
_lock = true;
|
|
_closeHear();
|
|
_id = setInterval(function () {
|
|
if (_url && _status && _status == "close") {
|
|
console.log("尝试重连")
|
|
_reconnection();
|
|
} else if (_url && _status && _status == "open") {
|
|
console.log("心跳检测");
|
|
// _ws.send(new ArrayBuffer(4));
|
|
_ws.send("ping");
|
|
}
|
|
_lock = false;
|
|
}, 1000 * 60);
|
|
|
|
}, _readMsg = function () {
|
|
try {
|
|
var xmlHttp = new XMLHttpRequest();
|
|
xmlHttp.onreadystatechange = function () {
|
|
//当状态变化时处理的事情
|
|
if (xmlHttp.readyState == 4 && xmlHttp.status == 200) {
|
|
//5.接收响应信息
|
|
var data = eval("(" + xmlHttp.responseText + ")");
|
|
if (data.code == 0) {
|
|
document.getElementById("messageDiv").remove();
|
|
_showMessage();
|
|
} else {
|
|
// 失败后添加至头部
|
|
_message.unshift(_nowMessage);
|
|
document.getElementById("messageDiv").remove();
|
|
_showMessage();
|
|
}
|
|
}
|
|
}
|
|
xmlHttp.open("POST", myWebSocket.busiMessageUrl + _nowMessage.id, false);
|
|
//4.发送请求
|
|
xmlHttp.send();
|
|
} catch (e) {
|
|
// 失败后添加至头部
|
|
_message.unshift(_nowMessage);
|
|
document.getElementById("messageDiv").remove();
|
|
_showMessage();
|
|
}
|
|
}, _readHistoryMsg = function () {
|
|
document.getElementById("messageDiv").remove();
|
|
}, _showHistoryMsg = function () {
|
|
document.getElementById("messageDiv").remove();
|
|
document.getElementsByClassName("myMessageBox")[0].click();
|
|
},_doCopyOrderIdInfo = function (orderId){
|
|
//复制订单号id
|
|
var inputEle = document.createElement("input");
|
|
document.designMode = "on";
|
|
inputEle.value = orderId;
|
|
document.body.appendChild(inputEle);
|
|
inputEle.select();
|
|
document.execCommand('copy');
|
|
inputEle.blur();
|
|
inputEle.style.display = 'none';
|
|
document.body.removeChild(inputEle);
|
|
document.designMode = "off";
|
|
_readMsg();
|
|
}, _showMessage = function () {
|
|
setTimeout(function () {
|
|
if (document.getElementById("messageDiv") != null || _message.length == 0) {
|
|
return;
|
|
}
|
|
_nowMessage = _message.shift();
|
|
var property = null;
|
|
if(_nowMessage.property !=undefined){
|
|
property = JSON.parse(_nowMessage.property);
|
|
}
|
|
var messageBody = _nowMessage.messageBody;
|
|
var orderId = _nowMessage.orderId;
|
|
var dateStr = _formatDate(new Date(parseInt(_nowMessage.sendTime)));
|
|
|
|
var htmls = `
|
|
<div id="messageDiv" style="width: 500px;border: 1px solid #cecdcd;background-color: #f2f2f2;color: #fff;position: fixed;right: 15px;bottom: 0px;border-radius: 10px;z-index: 999999;">
|
|
<div style="width: 500px;height: 55px;text-align: center;font-size: 24px;line-height: 50px;border-radius: 5px 5px 0 0;background-color:red;margin-left: -1px;">
|
|
消息提醒
|
|
</div>
|
|
<div style="border: 1px solid #000;border-radius: 11px;margin: 10px;text-align: center;background-color: #fff;color: #000;font-size: 20px;padding:20px;">
|
|
${messageBody}
|
|
</div>
|
|
<div style="display: flex;justify-content: center;">
|
|
<span style="color: black;font-size: 16px;margin: 15px;float: left;">提醒发送人：<span>${_nowMessage.producerOperateName ? _nowMessage.producerOperateName : "系统"}</span></span>
|
|
<span style="color: black;font-size: 16px;margin: 15px;float: right;margin-left: 40px;">消息时间：${dateStr}</span>
|
|
</div>
|
|
<div style="display: flex;justify-content: center;">
|
|
<div onclick="myWebSocket.readHistoryMsg()" style="width: 120px;height: 40px;border-radius: 5px;background-color:#009966;text-align: center;line-height: 40px;color: #fff;float: left;margin: 10px;cursor:pointer;">知道了</div>
|
|
<div onclick="myWebSocket.doCopyOrderIdInfo(${orderId});" style="width: 120px;height: 40px;border-radius: 5px;background-color:#199ed8;text-align: center;line-height: 40px;color: #fff;float: right;margin: 10px;cursor:pointer;margin-left:50px;">点击复制单号</div>
|
|
</div>
|
|
</div>`;
|
|
|
|
document.body.insertAdjacentHTML("beforeend", htmls);
|
|
}, 2000)
|
|
}, _showHistoryMessage = function (size) {
|
|
var dateStr = _formatDate(new Date());
|
|
var htmls = `
|
|
<div id="messageDiv" style="width: 500px;border: 1px solid #cecdcd;background-color: #f2f2f2;color: #fff;position: fixed;right: 15px;bottom: 0px;border-radius: 10px;z-index: 999999;">
|
|
<div style="width: 500px;height: 55px;text-align: center;font-size: 24px;line-height: 50px;border-radius: 5px 5px 0 0;background-color:red;margin-left: -1px;">
|
|
消息提醒
|
|
</div>
|
|
<div style="border: 1px solid #000;border-radius: 11px;margin: 10px;text-align: center;background-color: #fff;color: #000;font-size: 20px;padding:20px;">
|
|
您有${size}条消息未读
|
|
</div>
|
|
<div style="display: flex;justify-content: center;">
|
|
<span style="color: black;font-size: 16px;margin: 15px;float: left;">提醒发送人：<span>系统</span></span>
|
|
<span style="color: black;font-size: 16px;margin: 15px;float: right;margin-left: 40px;">消息时间：${dateStr}</span>
|
|
</div>
|
|
<div style="display: flex;justify-content: center;">
|
|
<div onclick="myWebSocket.readHistoryMsg()" style="width: 120px;height: 40px;border-radius: 5px;background-color:#009966;text-align: center;line-height: 40px;color: #fff;float: left;margin: 10px;cursor:pointer;">知道了</div>
|
|
<div onclick="myWebSocket.showHistoryMsg();" style="width: 120px;height: 40px;border-radius: 5px;background-color:#169BD5;text-align: center;line-height: 40px;color: #fff;float: right;margin: 10px;cursor:pointer;margin-left:50px;">查看消息</div>
|
|
</div>
|
|
</div>`;
|
|
|
|
document.body.insertAdjacentHTML("beforeend", htmls);
|
|
}, _utf8ByteToUnicodeStr = function (utf8Bytes) {
|
|
var unicodeStr = "";
|
|
for (var pos = 0; pos < utf8Bytes.length;) {
|
|
var flag = utf8Bytes[pos];
|
|
var unicode = 0;
|
|
if ((flag >>> 7) === 0) {
|
|
unicodeStr += String.fromCharCode(utf8Bytes[pos]);
|
|
pos += 1;
|
|
|
|
} else if ((flag & 0xFC) === 0xFC) {
|
|
unicode = (utf8Bytes[pos] & 0x3) << 30;
|
|
unicode |= (utf8Bytes[pos + 1] & 0x3F) << 24;
|
|
unicode |= (utf8Bytes[pos + 2] & 0x3F) << 18;
|
|
unicode |= (utf8Bytes[pos + 3] & 0x3F) << 12;
|
|
unicode |= (utf8Bytes[pos + 4] & 0x3F) << 6;
|
|
unicode |= (utf8Bytes[pos + 5] & 0x3F);
|
|
unicodeStr += String.fromCharCode(unicode);
|
|
pos += 6;
|
|
|
|
} else if ((flag & 0xF8) === 0xF8) {
|
|
unicode = (utf8Bytes[pos] & 0x7) << 24;
|
|
unicode |= (utf8Bytes[pos + 1] & 0x3F) << 18;
|
|
unicode |= (utf8Bytes[pos + 2] & 0x3F) << 12;
|
|
unicode |= (utf8Bytes[pos + 3] & 0x3F) << 6;
|
|
unicode |= (utf8Bytes[pos + 4] & 0x3F);
|
|
unicodeStr += String.fromCharCode(unicode);
|
|
pos += 5;
|
|
|
|
} else if ((flag & 0xF0) === 0xF0) {
|
|
unicode = (utf8Bytes[pos] & 0xF) << 18;
|
|
unicode |= (utf8Bytes[pos + 1] & 0x3F) << 12;
|
|
unicode |= (utf8Bytes[pos + 2] & 0x3F) << 6;
|
|
unicode |= (utf8Bytes[pos + 3] & 0x3F);
|
|
unicodeStr += String.fromCharCode(unicode);
|
|
pos += 4;
|
|
|
|
} else if ((flag & 0xE0) === 0xE0) {
|
|
unicode = (utf8Bytes[pos] & 0x1F) << 12;
|
|
;
|
|
unicode |= (utf8Bytes[pos + 1] & 0x3F) << 6;
|
|
unicode |= (utf8Bytes[pos + 2] & 0x3F);
|
|
unicodeStr += String.fromCharCode(unicode);
|
|
pos += 3;
|
|
|
|
} else if ((flag & 0xC0) === 0xC0) { //110
|
|
unicode = (utf8Bytes[pos] & 0x3F) << 6;
|
|
unicode |= (utf8Bytes[pos + 1] & 0x3F);
|
|
unicodeStr += String.fromCharCode(unicode);
|
|
pos += 2;
|
|
|
|
} else {
|
|
unicodeStr += String.fromCharCode(utf8Bytes[pos]);
|
|
pos += 1;
|
|
}
|
|
}
|
|
return unicodeStr;
|
|
}, _formatDate = function (now) {
|
|
var year = now.getFullYear(); //取得4位数的年份
|
|
var month = now.getMonth() + 1; //取得日期中的月份，其中0表示1月，11表示12月
|
|
var date = now.getDate(); //返回日期月份中的天数（1到31）
|
|
var hour = now.getHours(); //返回日期中的小时数（0到23）
|
|
var minute = now.getMinutes(); //返回日期中的分钟数（0到59）
|
|
var second = now.getSeconds(); //返回日期中的秒数（0到59）
|
|
if (month < 10) {
|
|
month = "0" + month;
|
|
}
|
|
if (date < 10) {
|
|
date = "0" + date;
|
|
}
|
|
if (hour < 10) {
|
|
hour = "0" + hour;
|
|
}
|
|
if (minute < 10) {
|
|
minute = "0" + minute;
|
|
}
|
|
if (second < 10) {
|
|
second = "0" + second;
|
|
}
|
|
return year + "-" + month + "-" + date + " " + hour + ":" + minute + ":" + second;
|
|
};
|
|
n.prototype.init = function (url) {
|
|
if (!'WebSocket' in window) {
|
|
console.error("浏览器不支持推送消息");
|
|
return;
|
|
}
|
|
_url = url;
|
|
_ws = new WebSocket(_url,"message_box");
|
|
_ws.onopen = _onopen;
|
|
_ws.onerror = _onerror;
|
|
_ws.onmessage = _onmessage;
|
|
_ws.onclose = _onclose;
|
|
window.onbeforeunload = function (event) {
|
|
_ws.close();
|
|
};
|
|
_heartCheck();
|
|
}, n.prototype.close = function () {
|
|
_closeHear();
|
|
if(_ws){
|
|
_ws.close();
|
|
}
|
|
}, n.prototype.reconnection = _reconnection, n.prototype.readMsg = _readMsg, n.prototype.doCopyOrderIdInfo = _doCopyOrderIdInfo, n.prototype.readHistoryMsg = _readHistoryMsg,n.prototype.showHistoryMsg = _showHistoryMsg;
|
|
e.myWebSocket = new n;
|
|
}(window); |