面试题：Vue中WebSocket连接如何实现心跳机制以保持连接活跃

Question

在Vue项目里使用WebSocket时，为防止连接因长时间无数据传输而断开，通常需要实现心跳机制。请描述如何实现WebSocket心跳机制，包括发送心跳包的频率设置以及如何处理心跳响应。

Answer 1

1. 设置心跳包发送频率：
   • 在Vue项目中，可以使用setInterval函数来定时发送心跳包。例如，假设每30秒发送一次心跳包，可以这样写：

   // 假设ws是WebSocket实例
   const heartBeatInterval = 30 * 1000;
   let heartBeatTimer;
   function startHeartBeat() {
       heartBeatTimer = setInterval(() => {
           if (ws.readyState === WebSocket.OPEN) {
               ws.send('heartbeat');
           }
       }, heartBeatInterval);
   }
   

2. 处理心跳响应：
   • 在WebSocket的message事件处理函数中，判断接收到的消息是否是心跳响应。例如：

   ws.addEventListener('message', (event) => {
       const data = JSON.parse(event.data);
       if (data.type === 'heartbeat_response') {
           // 心跳响应正常，可以重置心跳相关状态
           clearInterval(heartBeatTimer);
           startHeartBeat();
       }
   });
   

   • 还可以添加一些错误处理机制，比如如果长时间没有收到心跳响应，可以尝试重新连接WebSocket。例如：

   let missedHeartbeatCount = 0;
   const maxMissedHeartbeats = 3;
   ws.addEventListener('message', (event) => {
       const data = JSON.parse(event.data);
       if (data.type === 'heartbeat_response') {
           missedHeartbeatCount = 0;
           clearInterval(heartBeatTimer);
           startHeartBeat();
       }
   });
   // 在心跳包发送逻辑中添加处理
   function startHeartBeat() {
       heartBeatTimer = setInterval(() => {
           if (ws.readyState === WebSocket.OPEN) {
               ws.send('heartbeat');
               missedHeartbeatCount++;
               if (missedHeartbeatCount >= maxMissedHeartbeats) {
                   clearInterval(heartBeatTimer);
                   // 尝试重新连接
                   ws.close();
                   // 重新创建并连接WebSocket
                   ws = new WebSocket('ws://your - server - url');
                   // 重新开始心跳
                   startHeartBeat();
               }
           }
       }, heartBeatInterval);
   }