ziqim/Yangcai365_web/manage/zinc/js/myMessageBox.js

;!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);