Websocket

1、为什么用Websocket？

解决服务端主动给客户端推送数据；
正常ajax，axios只能通过客户端主动调用；才能完成服务端到客户端的数据传送

教程：http://www.ruanyifeng.com/blo...

2、内容

(1) wsUrl + wsConfig //链接地址 + Websocket配置
(2) createWebSocket //建立Websocket
(3) initEventHandle //初始化完成
(4) reconnect //重连

3、wsUrl + wsConfig

const wsUrl = "ws://192.168.0.79:8087/home/"
var heartCheck = {
        timeout: 3000, //每三秒心跳一次
        timeoutObj: null,
        serverTimeoutObj: null,
        reset: function() {
            clearTimeout(this.timeoutObj);
            clearTimeout(this.serverTimeoutObj);
            return this;
        },
        start: function(type = 1) {
            const self = this;
            self.timeoutObj = setTimeout(function() {
                //这里发送一个心跳，后端收到后，返回一个心跳消息， onmessage拿到返回的心跳就说明连接正常
                ws.readyState == 1 && ws.send("-1");
                self.serverTimeoutObj = setTimeout(function() { //如果超过一定时间还没重置，说明后端主动断开了
                    //如果onclose会执行reconnect,进行重连
                    //如果直接执行reconnect 会触发onclose导致重连两次
                    ws.close(); 
                }, type != 1 ? 1000 : 10000)
            }, type != 1 ? 1000 : self.timeout)
        }
    }

4、建立Websocket链接 createWebSocket

function createWebSocket(url){
         try {
             if ('WebSocket' in window) {
                ws = new WebSocket(url + apiId);
             } else {
                // 不支持WebSocket
             }
             initEventHandle();//初始化
         } catch (e) {
             reconnect(wsUrl);//重连
         }
    }

5、初始化 initEventHandle

function initEventHandle(type) {
        // 连接成功建立后响应
        ws.onopen = function() {
            document.getElementById("zhuangtai").innerHTML = "已连接"
            heartCheck.reset().start();//心跳检测重置
        }
        // 收到服务器消息后响应
        ws.onmessage = function(event) {
            let datas = JSON.parse(event.data)
            //如果获取到消息，心跳检测重置;拿到任何消息都说明当前连接是正常的
            heartCheck.reset().start();
            if(datas != -1) handleSendEvent(datas)
        }
        // 正常断开
        ws.onclose = function() {
            heartCheck.reset()
            document.getElementById("zhuangtai").innerHTML = "已断开"
            reconnect(wsUrl); //重连
        }
        // 异常错误断开
        ws.onerror = function() {
            heartCheck.reset()
            document.getElementById("zhuangtai").innerHTML = "已断开"
            reconnect(wsUrl); //重连
        };

        if(document.getElementById("zhuangtai").innerHTML == "已断开"){
            heartCheck.reset().start(0);
        }
    }

6、重连 reconnect

function reconnect(url) {
        if(lockReconnect) return;
        api.showProgress({
            title: '提示',
            text: '通信正在连接...',
            modal: true
        });
        lockReconnect = true;
        //没连接上会一直重连，设置延迟避免请求过多
        clearTimeout(chongTimeout);
        chongTimeout = setTimeout(function () {
            createWebSocket(wsUrl);
            // console.log("正在重连，当前时间"+new Date())
            api.hideProgress();
            lockReconnect = false;
        }, 0); //这里设置重连间隔(ms)
    }