当页面不可见时暂时不重连，防止重连后又心跳超时

frontend/src/api/chat/ChatClientDirectOpenLive.js

@@ -24,24 +24,32 @@ export default class ChatClientDirectOpenLive extends ChatClientOfficialBase {
   }
 
   stop() {
-    super.stop()
-
-    if (this.gameHeartbeatTimerId) {
-      window.clearTimeout(this.gameHeartbeatTimerId)
-      this.gameHeartbeatTimerId = null
-    }
     this.endGame()
+    super.stop()
   }
 
   async initRoom() {
-    if (!await this.startGame()) {
-      return false
+    return this.startGame()
+  }
+
+  async wsConnect() {
+    await super.wsConnect()
+    if (this.isDestroying) {
+      return
     }
 
     if (this.gameId && this.gameHeartbeatTimerId === null) {
       this.gameHeartbeatTimerId = window.setTimeout(this.onSendGameHeartbeat.bind(this), GAME_HEARTBEAT_INTERVAL)
     }
-    return true
+  }
+
+  onWsClose() {
+    if (this.gameHeartbeatTimerId) {
+      window.clearTimeout(this.gameHeartbeatTimerId)
+      this.gameHeartbeatTimerId = null
+    }
+
+    super.onWsClose()
   }
 
   async startGame() {
@@ -139,10 +147,11 @@ export default class ChatClientDirectOpenLive extends ChatClientOfficialBase {
   }
 
   async onBeforeWsConnect() {
-    // 重连次数太多则重新init_room，保险
+    // 重连次数太多则重新initRoom，保险
     let reinitPeriod = Math.max(3, (this.hostServerUrlList || []).length)
     if (this.retryCount > 0 && this.retryCount % reinitPeriod === 0) {
       this.needInitRoom = true
+      await this.endGame()
     }
     return super.onBeforeWsConnect()
   }
@@ -155,6 +164,16 @@ export default class ChatClientDirectOpenLive extends ChatClientOfficialBase {
     this.websocket.send(this.makePacket(this.authBody, base.OP_AUTH))
   }
 
+  delayReconnect() {
+    if (document.visibilityState !== 'visible') {
+      // 不知道什么时候才能重连，先endGame吧
+      this.needInitRoom = true
+      this.endGame()
+    }
+
+    super.delayReconnect()
+  }
+
   async dmCallback(command) {
     let data = command.data
 

frontend/src/api/chat/ChatClientOfficialBase/index.js

@@ -200,7 +200,24 @@ export default class ChatClientOfficialBase {
       return
     }
 
-    window.setTimeout(this.wsConnect.bind(this), this.getReconnectInterval())
+    this.delayReconnect()
+  }
+
+  delayReconnect() {
+    if (document.visibilityState === 'visible') {
+      window.setTimeout(this.wsConnect.bind(this), this.getReconnectInterval())
+      return
+    }
+
+    // 页面不可见就先不重连了，即使重连也会心跳超时
+    let listener = () => {
+      if (document.visibilityState !== 'visible') {
+        return
+      }
+      document.removeEventListener('visibilitychange', listener)
+      this.wsConnect()
+    }
+    document.addEventListener('visibilitychange', listener)
   }
 
   getReconnectInterval() {

frontend/src/api/chat/ChatClientRelay.js

@@ -107,6 +107,7 @@ export default class ChatClientRelay {
       return
     }
 
+    // 这边不用判断页面是否可见，因为发心跳包不是由定时器触发的，即使是不活动页面也不会心跳超时
     window.setTimeout(this.wsConnect.bind(this), this.getReconnectInterval())
   }