预见测代码

2024-12-20 16:32:03 +08:00
parent 5f0b36b3bb
commit bbe23e1b14
5 changed files with 330 additions and 33 deletions
--- a/frontend/src/utils/webSocketClient.ts
+++ b/frontend/src/utils/webSocketClient.ts
@@ -0,0 +1,103 @@
+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 {
+                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("抛弃")
+                /* 丢弃或继续写你的逻辑 */
+            }
+        };
+    }
+    // 回调函数的注册
+    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关闭中..');
+    }
+}