import {ElMessage} from "element-plus"; export default class SocketService { static instance = null; static get Instance() { if (!this.instance) { this.instance = new SocketService(); } return this.instance; } // 和服务端连接的socket对象 ws = null; // 存储回调函数 callBackMapping = {}; // 标识是否连接成功 connected = false; // 记录重试的次数 sendRetryCount = 0; // 重新连接尝试的次数 connectRetryCount = 0; work:any; heartbeatTimer; lastActivityTime= 0; // 上次活动时间戳 lastResponseHeartTime = Date.now();//最后一次收到心跳回复时间 reconnectDelay= 5000; // 重新连接延迟,单位毫秒 // 定义连接服务器的方法 connect() { // 连接服务器 if (!window.WebSocket) { return console.log('您的浏览器不支持WebSocket'); } // let token = $.cookie('123'); // let token = '4E6EF539AAF119D82AC4C2BC84FBA21F'; const url = 'ws://localhost:7777/hello?name=cdf' this.ws = new WebSocket(url); // 连接成功的事件 this.ws.onopen = () => { ElMessage.success("webSocket连接服务端成功了"); console.log('连接服务端成功了'); this.connected = true; // 重置重新连接的次数 this.connectRetryCount = 0; this.updateLastActivityTime(); this.startHeartbeat(); }; // 1.连接服务端失败 // 2.当连接成功之后, 服务器关闭的情况 this.ws.onclose = () => { console.log('连接服务端失败'); this.connected = false; this.connectRetryCount++; this.clearHeartbeat(); /* setTimeout(() => { this.connect(); }, 500 * this.connectRetryCount);*/ }; this.ws.onerror = () => { ElMessage.error("webSocket连接异常!"); }; // 得到服务端发送过来的数据 this.ws.onmessage = (event) => { if(event.data == 'over') { //心跳消息处理 this.lastResponseHeartTime = Date.now(); }else { let message: { [key: string]: any }; try { console.log('Received message:',event.data) message = JSON.parse(event.data); } catch (e) { return console.error("消息解析失败", event.data, e); } /* 通过接受服务端发送的type字段来回调函数 */ if (message?.type && this.callBackMapping[message.type]) { this.callBackMapping[message.type](message); } else { console.log("抛弃====>") console.log(event.data) /* 丢弃或继续写你的逻辑 */ } } }; } startHeartbeat() { const _this = this const url = window.URL.createObjectURL(new Blob(['(function(e){setInterval(function(){this.postMessage(null)},10000)})()'])); this.work = new Worker(url) this.work.onmessage = function(e){ //判断多久没收到心跳响应 if(_this.lastActivityTime - _this.lastResponseHeartTime > 30000){ //说明已经三轮心跳没收到回复了,关闭检测,提示用户。 ElMessage.error("业务主体模块发生未知异常,请尝试重新启动!"); return; } _this.sendHeartbeat(); } } sendHeartbeat() { console.log(new Date()+"进入心跳消息发送。。。。。。。。。。。。。") this.ws.send('alive'); this.updateLastActivityTime(); // 发送心跳后更新活动时间 } updateLastActivityTime() { this.lastActivityTime = Date.now(); } clearHeartbeat() { this.work.terminate(); if (this.heartbeatTimer) { clearInterval(this.heartbeatTimer); this.heartbeatTimer = null; } } // 回调函数的注册 registerCallBack(socketType, callBack) { this.callBackMapping[socketType] = callBack; } // 取消某一个回调函数 unRegisterCallBack(socketType) { this.callBackMapping[socketType] = null; } // 发送数据的方法 send(data) { // 判断此时此刻有没有连接成功 if (this.connected) { this.sendRetryCount = 0; try { this.ws.send(JSON.stringify(data)); } catch (e) { this.ws.send(data); } } else { this.sendRetryCount++; setTimeout(() => { this.send(data); }, this.sendRetryCount * 500); } } // 断开方法 closeWs() { if (this.connected) { this.ws.close() } console.log('WS关闭中..'); } }