关于websocket: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)
    }