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