Websocket 封装

export class WebSocketClass { /** * @description: 初始化实例属性，保存参数 * @param {String} url ws的接口 * @param {Function} msgCallback 服务器信息的回调传数据给函数 * @param {String} name 可选值 用于区分ws，用于debugger * @param {String} startWsAfter 启动之后要做的事情 */ constructor(url, msgCallback, name = 'default', startWsAfter) { this.url = url; this.msgCallback = msgCallback; this.name = name; this.ws = null; // websocket对象 this.status = null; // websocket是否关闭 this.startWsAfter = startWsAfter; // 启动之后要做的事情 this.interval = true; // 函数节流标识符 } /** * @description: 初始化 连接websocket或重连webSocket时调用 * @param {*} 可选值 要传的数据 */ connect(data) { // 新建 WebSocket 实例 this.ws = new WebSocket(this.url); this.ws.onopen = e => { // 连接ws成功回调 this.status = 'open'; console.log(`${this.name}连接成功`, e); // 触发更新 return this.startWsAfter(); //心跳检测 // this.heartCheck(); if (data !== undefined) { // 有要传的数据,就发给后端 return this.ws.send(data); } }; // 监听服务器端返回的信息 this.ws.onmessage = e => { return this.msgCallback(e.data); }; // ws关闭回调 this.ws.onclose = e => { this.closeHandle(e); // 判断是否关闭 }; // ws出错回调 this.ws.onerror = e => { this.closeHandle(e); // 判断是否关闭 }; } // 发送信息给服务器 sendHandle(data) { return this.ws.send(data); } //节流 throttle(fn, interval) { let last = 0; return function (...args) { let context = this; let now = +new Date(); // 还没到时间 if (now - last < interval) return; last = now; fn.apply(this, args); }; } closeHandle(e = 'err') { // 因为webSocket并不稳定，规定只能手动关闭(调closeMyself方法)，否则就重连 if (this.status !== 'close') { console.log(this.name + '网络不稳定断开进行重连'); if (!this.interval) { return; } this.interval = false; setTimeout(() => { this.connect(); this.interval = true; }, 1000); } } // 手动关闭WebSocket closeWebsocket() { this.status = 'close'; console.log(`手动关闭websocket`); return this.ws.close(); } //心跳检测 heartCheck = { timeout: 5000, timeoutObj: null, serverTimeoutObj: null, reset: function () { clearTimeout(this.timeoutObj); clearTimeout(this.serverTimeoutObj); return this; }, start: function () { var self = this; this.timeoutObj && clearTimeout(this.timeoutObj); this.serverTimeoutObj && clearTimeout(this.serverTimeoutObj); this.timeoutObj = setTimeout(function () { //这里发送一个心跳，后端收到后，返回一个心跳消息， //onmessage拿到返回的心跳就说明连接正常 this.ws.send('HeartBeat'); console.log('ping'); self.serverTimeoutObj = setTimeout(function () { // 如果超过一定时间还没重置，说明后端主动断开了 this.ws.closeWebsocket(); //如果onclose会执行reconnect，我们执行 websocket.close()就行了.如果直接执行 reconnect 会触发onclose导致重连两次 }, self.timeout); }, this.timeout); }, }; }