feat: websocket新增heart beat方法

src/layouts/BasicLayout.jsx

@@ -63,11 +63,8 @@ const BasicLayout = props => {
         url: getSocketUrl({ token, channelId }),
       });
       socket.connection();
-      socket.event.on('open', () => {
-        console.log('wesocket连接成功');
-      });
+
       socket.event.on('message', msg => {
-        console.log(msg);
         dispatch({
           type: 'messageReminder/setUnReadData',
           payload: [JSON.parse(msg.data)],
@@ -76,22 +73,7 @@ const BasicLayout = props => {
     } catch (e) {
       console.log(e);
     }
-    // let a = 100000000000;
-    // setInterval(() => {
-    //   a++;
-    //   socket.sendMessage(
-    //     {
-    //       id: a,
-    //       channelId: 100001,
-    //       bussinessId: 'self_40',
-    //       type: 0,
-    //       sendContent: `{"name":"商品21111","title":"商品21111", "orderNo":${a},"createdAt":"2022-10-13 12:12:12", "count":11}`,
-    //       readStatus: 0,
-    //       createdAt: '2022-10-18 14:05:12',
-    //       updatedAt: '2022-10-18 17:15:19',
-    //     },
-    //   );
-    // }, 5000);
+
     if (dispatch) {
       dispatch({
         type: 'settings/getSetting',
@@ -102,11 +84,6 @@ const BasicLayout = props => {
       dispatch({
         type: 'messageReminder/getUnReadMsgList',
       });
-      setTimeout(() => {
-        dispatch({
-          type: 'messageReminder/getUnReadCount',
-        });
-      }, 2000);
     }
   }, []);
   /**

src/utils/websocket.js

@@ -13,6 +13,7 @@ class Socket extends EventEmitter {
     this.connected = false;
     this.waitingSendData = [];
     this.reconnectCount = 0;
+    this.heartBeatTimer = null;
     return this;
   }
 
@@ -53,8 +54,10 @@ class Socket extends EventEmitter {
 
   // 连接成功触发
   onopen = () => {
+    const { heartBeatTime } = this.options;
     console.log('ws:连接成功');
     this.connected = true;
+    this.heartBeat(heartBeatTime);
     this.checkWaitingData();
     this.event.emit('open');
   };
@@ -68,56 +71,66 @@ class Socket extends EventEmitter {
 
   // 关闭连接触发
   onclose = e => {
-    this.connected = false; // 关闭将标识符改为true
     console.log('关闭socket收到的数据');
+    this.connected = false; // 关闭将标识符改为true
+    if (this.heartBeatTimer) {
+      clearTimeout(this.heartBeatTimer);
+    }
     this.event.emit('close', e);
-    // 根据后端返回的状态码做操作
-    // 我的项目是当前页面打开两个或者以上，就把当前以打开的socket关闭
-    // 否则就20秒重连一次，直到重连成功为止
+    // 最多重连10次
     if (this.reconnectCount > 10) {
       this.reconnectCount = 0;
       return;
     }
     const reconnect = () => {
+      if (this.taskRemindInterval) {
         clearTimeout(this.taskRemindInterval);
+      }
       this.taskRemindInterval = setTimeout(() => {
         if (!this.connected) {
           this.reconnectCount++;
           this.connection();
           reconnect();
         }
-      }, 20000);
+      }, 5000);
     };
     reconnect();
   };
 
   onerror = e => {
+    console.log('ws: error', e);
     this.socket = null;
     this.event.emit('error', e);
   };
 
   sendMessage = value => {
+    console.log('ws: send', value);
     // 向后端发送数据
     if (this.socket) {
       if (!this.connected) {
         this.waitingSendData.unshift(value);
         return;
       }
-      this.socket.send(JSON.stringify(value));
+      const sendValue = typeof value === 'string' ? value : JSON.stringify(value);
+      this.socket.send(sendValue);
     }
   };
 
   checkWaitingData() {
+    console.log('ws: checkWaitingData', this.waiting);
     if (this.waitingSendData.length) {
       this.sendMessage(this.waitingSendData.splice(0, 1));
       this.checkWaitingData();
     }
   }
 
-  hearBeat() {
-    setTimeout(() => {
+  // 保持连接-默认每3分钟重置一下服务器关闭时间
+  heartBeat(time) {
+    this.heartBeatTimer = setTimeout(() => {
+      console.log('ws: heart beat', time);
       this.sendMessage('HeartBeat');
-    }, 300000);
+      this.heartBeat(time);
+    }, time || 180000);
   }
 }