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; // 定义连接服务器的方法 connect(url) { // 连接服务器 if (!window.WebSocket) { return console.log('您的浏览器不支持WebSocket'); } console.log(url) // let token = $.cookie('123'); // let token = '4E6EF539AAF119D82AC4C2BC84FBA21F'; this.ws = new WebSocket(url); // 连接成功的事件 this.ws.onopen = () => { ElMessage.success("webSocket连接服务端成功了"); console.log('连接服务端成功了'); this.connected = true; // 重置重新连接的次数 this.connectRetryCount = 0; }; // 1.连接服务端失败 // 2.当连接成功之后, 服务器关闭的情况 this.ws.onclose = () => { console.log('连接服务端失败'); this.connected = false; this.connectRetryCount++; setTimeout(() => { // this.connect(); }, 500 * this.connectRetryCount); }; // 得到服务端发送过来的数据 this.ws.onmessage = (event) => { 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); } //console.log(message, "从服务端获取到了数据"); /* 通过接受服务端发送的type字段来回调函数 */ if (message?.type && this.callBackMapping[message.type]) { this.callBackMapping[message.type](message); } else { console.log("抛弃====>") console.log(event.data) /* 丢弃或继续写你的逻辑 */ } }; } // 回调函数的注册 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关闭中..'); } }