chi jiu hua websocket

src/layout/components/Chat/ChatPanel.vue

@@ -1479,7 +1479,11 @@
         }
       },
       showMessage(item){
-        console.log("showMessage走没走",item)
+        console.log("showMessage走没走",item,"$$$$$$$$$$")
+        if(item=='pong' || item=='ping'){
+          console.log("心跳消息")
+          return;
+        }
         this.notificationShowMessage(item);
         this.playVoice();
       },
@@ -1497,7 +1501,7 @@
             <div
               class="my-custom-message"
               style="display:flex;align-items:center;background:#fff !important;color:#000 !important;padding:8px 16px;border-radius:4px;cursor:pointer;border:none !important;box-shadow:none !important;">
-              <img src="http://img.bjzxtw.org.cn/master/image/webp/chatinfo.png" style="width:24px;height:24px;margin-right:10px;" alt="info"/>
+              <img src="https://img.bjzxtw.org.cn/master/image/webp/chatinfo.png" style="width:24px;height:24px;margin-right:10px;" alt="info"/>
               <span>收到新消息</span>
             </div>
           `,
@@ -1515,8 +1519,8 @@
         }, 50);
       },
       playVoice(){
-        //http://img.bjzxtw.org.cn/master/video/mp3/11302.mp3 播放这段音频
-        const audio = new Audio('http://img.bjzxtw.org.cn/master/video/mp3/xxxtx.mp3');
+        //https://img.bjzxtw.org.cn/master/video/mp3/11302.mp3 播放这段音频
+        const audio = new Audio('https://img.bjzxtw.org.cn/master/video/mp3/xxxtx.mp3');
         
         if (this.userInteracted) {
           audio.play().catch(e => console.error('Audio play failed:', e));
@@ -1527,16 +1531,16 @@
       },
       notificationShowMessage(item) {
         const iconList = {
-          2:'http://img.bjzxtw.org.cn/master/www/icon/zixun.png',
-          3:'http://img.bjzxtw.org.cn/master/www/icon/sahngpin.png',
-          4:'http://img.bjzxtw.org.cn/master/www/icon/keti.png',//课题
-          5:'http://img.bjzxtw.org.cn/master/www/icon/tongzhi.png',//通知
-          6:'http://img.bjzxtw.org.cn/master/www/icon/tousu.png',//投诉
-          7:'http://img.bjzxtw.org.cn/master/www/icon/zhaopin.png',
-          8:'http://img.bjzxtw.org.cn/master/www/icon/zhaopin.png',
-          9:'http://img.bjzxtw.org.cn/master/www/icon/zhaopin.png',
-          10:'http://img.bjzxtw.org.cn/master/www/icon/zhaopin.png',
-          11:'http://img.bjzxtw.org.cn/master/www/icon/zhaopin.png',
+          2:'https://img.bjzxtw.org.cn/master/www/icon/zixun.png',
+          3:'https://img.bjzxtw.org.cn/master/www/icon/sahngpin.png',
+          4:'https://img.bjzxtw.org.cn/master/www/icon/keti.png',//课题
+          5:'https://img.bjzxtw.org.cn/master/www/icon/tongzhi.png',//通知
+          6:'https://img.bjzxtw.org.cn/master/www/icon/tousu.png',//投诉
+          7:'https://img.bjzxtw.org.cn/master/www/icon/zhaopin.png',
+          8:'https://img.bjzxtw.org.cn/master/www/icon/zhaopin.png',
+          9:'https://img.bjzxtw.org.cn/master/www/icon/zhaopin.png',
+          10:'https://img.bjzxtw.org.cn/master/www/icon/zhaopin.png',
+          11:'https://img.bjzxtw.org.cn/master/www/icon/zhaopin.png',
         }
         if (!('Notification' in window)) {
           this.$notify({
@@ -1597,7 +1601,7 @@
           if (Notification.permission === 'granted') {
             console.log("===============:Notification.permission === 'granted'",item)
             const notification = new Notification(item.user_name, {
-              icon: 'http://img.bjzxtw.org.cn/master/www/icon/group.png',
+              icon: 'https://img.bjzxtw.org.cn/master/www/icon/group.png',
               body: item.content,
               requireInteraction: true, // 需要用户交互才能关闭
               renotify: true, // 每次新消息都提醒
@@ -1632,6 +1636,104 @@
         }, item);
 
       },
+      // 处理心跳消息
+      handleHeartbeat(heartbeatMessage) {
+        try {
+          // 根据心跳消息类型回复不同的响应
+          let heartbeatResponse;
+          
+          if (heartbeatMessage === 'ping') {
+            // 简单的心跳，回复 pong
+            heartbeatResponse = 'pong';
+          } else {
+            // 复杂的心跳消息，回复结构化响应
+            heartbeatResponse = {
+              type: 'heartbeat_response',
+              timestamp: Date.now(),
+              original_message: heartbeatMessage
+            };
+          }
+          
+          // 通过 WebSocket 发送心跳响应
+          if (wsService.getReadyState() === WebSocket.OPEN) {
+            wsService.send(heartbeatResponse);
+            console.log("心跳响应已发送:", heartbeatResponse);
+          } else {
+            console.warn("WebSocket 连接已断开，无法发送心跳响应");
+          }
+        } catch (error) {
+          console.error("处理心跳消息失败:", error);
+        }
+      },
+      // 启动心跳检测机制
+      startHeartbeatDetection() {
+        // 每30秒发送一次心跳
+        this.heartbeatInterval = setInterval(() => {
+          this.sendHeartbeat();
+        }, 30000);
+        
+        // 每60秒检查一次连接状态
+        this.connectionCheckInterval = setInterval(() => {
+          this.checkConnectionHealth();
+        }, 60000);
+      },
+      
+      // 发送心跳消息
+      sendHeartbeat() {
+        try {
+          if (wsService.getReadyState() === WebSocket.OPEN) {
+            // 发送简单的心跳消息
+            const heartbeatMessage = 'ping';
+            wsService.send(heartbeatMessage);
+            console.log("心跳消息已发送:", heartbeatMessage);
+          } else {
+            console.warn("WebSocket 连接已断开，尝试重连");
+            this.reconnectWebSocket();
+          }
+        } catch (error) {
+          console.error("发送心跳消息失败:", error);
+        }
+      },
+      
+      // 检查连接健康状态
+      checkConnectionHealth() {
+        if (wsService.getReadyState() !== WebSocket.OPEN) {
+          console.warn("检测到 WebSocket 连接异常，尝试重连");
+          this.reconnectWebSocket();
+        }
+      },
+      
+      // 重连 WebSocket
+      reconnectWebSocket() {
+        try {
+          console.log("开始重连 WebSocket...");
+          wsService.reconnect();
+          
+          // 重连成功后重新添加消息监听器
+          setTimeout(() => {
+            if (wsService.getReadyState() === WebSocket.OPEN) {
+              wsService.addMessageListener(this.handleIncomingMessage);
+              console.log("WebSocket 重连成功");
+            } else {
+              console.error("WebSocket 重连失败");
+            }
+          }, 1000);
+        } catch (error) {
+          console.error("重连 WebSocket 失败:", error);
+        }
+      },
+      
+      // 清除心跳检测定时器
+      clearHeartbeatTimers() {
+        if (this.heartbeatInterval) {
+          clearInterval(this.heartbeatInterval);
+          this.heartbeatInterval = null;
+        }
+        if (this.connectionCheckInterval) {
+          clearInterval(this.connectionCheckInterval);
+          this.connectionCheckInterval = null;
+        }
+      },
       //1.会话列表 start---------------------------------------->
       //1.1获取会话列表
       getConversationList(){
@@ -2575,6 +2677,13 @@
           console.log("websocket连接成功！")
           return;
         }
+        
+        // 处理心跳消息
+        if(event === 'ping' || event.type === 'heartbeat' || event.msg_type === 'heartbeat' || event.action === 'heartbeat') {
+          console.log("收到心跳消息，回复心跳确认");
+          this.handleHeartbeat(event);
+          return;
+        }
         const message = event;
         this.conversationList.forEach(item => {
           if(item.receiver_id==message.receiver_id){
@@ -3288,6 +3397,9 @@
       // //let websocketNewUrl = URL.WebsocketUrl +"?token=" + adminToken;
       // this.ws = new WebSocket(websocketNewUrl);
       wsService.addMessageListener(this.handleIncomingMessage);
+      
+      // 启动心跳检测机制
+      this.startHeartbeatDetection();
   
       //3.当连接中断时提供一个方法重新连接
       let that = this;
@@ -3346,6 +3458,9 @@
       }
       clearInterval(this.getFriendApplyListStatus);
       wsService.removeMessageListener(this.handleIncomingMessage);
+      
+      // 清除心跳检测定时器
+      this.clearHeartbeatTimers();
     },
     watch: {
       // 监听 user.avatar 的变化

src/utils/websocketService.js

@@ -22,7 +22,17 @@ class WebSocketService {
     };
 
     this.ws.onmessage = (event) => {
-      const message = JSON.parse(event.data);
+      console.log('#############websocket event:', event);
+      let message;
+      
+      try {
+        // 尝试解析为 JSON
+        message = JSON.parse(event.data);
+      } catch (error) {
+        // 如果不是 JSON 格式，直接使用原始字符串
+        message = event.data;
+      }
+      
       console.log('#############websocket message:', message);
       this.messageListeners.forEach(cb => {
         if (typeof cb === 'function') {
@@ -39,7 +49,9 @@ class WebSocketService {
 
   send(data) {
     if (this.ws && this.isConnected) {
-      this.ws.send(JSON.stringify(data));
+      // 如果 data 是字符串，直接发送；否则转换为 JSON
+      const message = typeof data === 'string' ? data : JSON.stringify(data);
+      this.ws.send(message);
     }
   }