From a75e964adc078fee299ab1901053a86326c70db5 Mon Sep 17 00:00:00 2001
From: chendaofei <857448963@qq.com>
Date: Thu, 16 Jan 2025 15:57:29 +0800
Subject: [PATCH] =?UTF-8?q?=E6=AD=A3=E5=BC=8F=E6=A3=80=E6=B5=8B=E4=BB=A3?=
 =?UTF-8?q?=E7=A0=81=E6=8F=90=E4=BA=A4?=
MIME-Version: 1.0
Content-Type: text/plain; charset=UTF-8
Content-Transfer-Encoding: 8bit

---
 frontend/src/utils/webSocketClient.ts         | 52 +++++++++++++++++--
 .../src/views/home/components/testPopup.vue   | 18 ++++---
 2 files changed, 61 insertions(+), 9 deletions(-)

diff --git a/frontend/src/utils/webSocketClient.ts b/frontend/src/utils/webSocketClient.ts
index a405e75..0bdaac6 100644
--- a/frontend/src/utils/webSocketClient.ts
+++ b/frontend/src/utils/webSocketClient.ts
@@ -18,6 +18,12 @@ export default class SocketService {
     sendRetryCount = 0;
     // 重新连接尝试的次数
     connectRetryCount = 0;
+
+    heartbeatTimer;
+    heartbeatInterval = 6000; // 心跳间隔，单位毫秒
+    lastActivityTime= 0; // 上次活动时间戳
+    reconnectDelay= 5000; // 重新连接延迟，单位毫秒
+
     //  定义连接服务器的方法
     connect(url) {
 
@@ -38,6 +44,8 @@ export default class SocketService {
             this.connected = true;
             // 重置重新连接的次数
             this.connectRetryCount = 0;
+            this.updateLastActivityTime();
+            this.startHeartbeat();
         };
         // 1.连接服务端失败
         // 2.当连接成功之后, 服务器关闭的情况
@@ -45,13 +53,18 @@ export default class SocketService {
             console.log('连接服务端失败');
             this.connected = false;
             this.connectRetryCount++;
+            this.clearHeartbeat();
             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);
@@ -63,12 +76,45 @@ export default class SocketService {
             if (message?.type && this.callBackMapping[message.type]) {
                 this.callBackMapping[message.type](message);
             } else {
-                console.log("抛弃====>")
-                console.log(event.data)
-                /* 丢弃或继续写你的逻辑 */
+                    console.log("抛弃====>")
+                    console.log(event.data)
+                    /* 丢弃或继续写你的逻辑 */
             }
         };
     }
+
+
+
+
+
+    startHeartbeat() {
+        this.heartbeatTimer = setInterval(() => {
+            if ((Date.now() - this.lastActivityTime) > this.heartbeatInterval) {
+                // 如果超过心跳间隔没有活动，发送心跳消息
+                this.sendHeartbeat();
+            }
+        }, this.heartbeatInterval/2); // 每半个心跳间隔检查一次
+    }
+    sendHeartbeat() {
+        console.log("进入心跳消息发送。。。。。。。。。。。。。")
+        this.ws.send('alive');
+        this.updateLastActivityTime(); // 发送心跳后更新活动时间
+    }
+
+
+    updateLastActivityTime() {
+        this.lastActivityTime = Date.now();
+    }
+
+    clearHeartbeat() {
+        if (this.heartbeatTimer) {
+            clearInterval(this.heartbeatTimer);
+            this.heartbeatTimer = null;
+        }
+    }
+
+
+
     // 回调函数的注册
     registerCallBack(socketType, callBack) {
         this.callBackMapping[socketType] = callBack;
diff --git a/frontend/src/views/home/components/testPopup.vue b/frontend/src/views/home/components/testPopup.vue
index 9aab531..774643e 100644
--- a/frontend/src/views/home/components/testPopup.vue
+++ b/frontend/src/views/home/components/testPopup.vue
@@ -178,7 +178,9 @@ const testRef = ref(null);
 // const devIdArr = ref([])
 // const planId = ref('')
 
-
+const dataSocket = reactive({
+  socketServe: socketClient.Instance,
+});
 // 打开弹窗，可能是新增，也可能是编辑
 const open = (selection: Device.ResPqDev[], title: string, time: boolean) => {
 
@@ -213,13 +215,11 @@ const open = (selection: Device.ResPqDev[], title: string, time: boolean) => {
 
   preTestStatus.value = 'waiting';//预检测执行状态
   //开始创建webSocket客户端
-  const data = reactive({
-    socketServe: socketClient.Instance,
-  });
+
   const url = 'ws://localhost:7777/hello?name=cdf';
   socketClient.Instance.connect(url);
-  data.socketServe = socketClient.Instance;
-  data.socketServe.registerCallBack('aaa', (res) => {
+  dataSocket.socketServe = socketClient.Instance;
+  dataSocket.socketServe.registerCallBack('aaa', (res) => {
     // 处理来自服务器的消息
     // console.log('Received message:', res);
     // 根据需要在这里添加更多的处理逻辑
@@ -235,6 +235,10 @@ const open = (selection: Device.ResPqDev[], title: string, time: boolean) => {
   });
 
 
+
+
+
+
 }
 
 let loading;
@@ -496,6 +500,8 @@ const beforeClose = (done: () => void) => {
   //   })
 }
 const handleCancel = () => {
+  dataSocket.socketServe.closeWs()
+
   emit('quitClicked'); // 触发事件
   // clearData()
   // emit('update:visible', false); // 关闭对话框