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