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);
},
};
}
Websocket 封装
最新推荐文章于 2024-08-21 16:48:02 发布