279 lines
12 KiB
JavaScript
279 lines
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); |