完善前端调试消息，添加开关

frontend/src/api/chat/ChatClientDirectOpenLive.js

@@ -33,29 +33,6 @@ export default class ChatClientDirectOpenLive extends ChatClientOfficialBase {
     return this.startGame()
   }
 
-  async wsConnect() {
-    if (!this.isDestroying) {
-      this.msgHandler.onDebugMsg(new chatModels.DebugMsg({
-        content: '开始连接房间'
-      }))
-    }
-
-    return super.wsConnect()
-  }
-
-  onWsClose() {
-    this.msgHandler.onDebugMsg(new chatModels.DebugMsg({
-      content: '房间连接已断开'
-    }))
-
-    if (this.gameHeartbeatTimerId) {
-      window.clearTimeout(this.gameHeartbeatTimerId)
-      this.gameHeartbeatTimerId = null
-    }
-
-    super.onWsClose()
-  }
-
   async startGame() {
     let res
     try {
@@ -73,9 +50,7 @@ export default class ChatClientDirectOpenLive extends ChatClientOfficialBase {
       }
     } catch (e) {
       console.error('startGame failed:', e)
-      this.msgHandler.onDebugMsg(new chatModels.DebugMsg({
-        content: `开放平台开启项目失败：${e}`
-      }))
+      this.addDebugMsg(`Failed to start Open Live session: ${e}`)
 
       if (e instanceof chatModels.ChatClientFatalError) {
         throw e
@@ -95,9 +70,7 @@ export default class ChatClientDirectOpenLive extends ChatClientOfficialBase {
   }
 
   async endGame() {
-    this.msgHandler.onDebugMsg(new chatModels.DebugMsg({
-      content: '开放平台关闭项目'
-    }))
+    this.addDebugMsg('Ending Open Live session')
 
     this.needInitRoom = true
     if (!this.gameId) {
@@ -118,9 +91,7 @@ export default class ChatClientDirectOpenLive extends ChatClientOfficialBase {
       }
     } catch (e) {
       console.error('endGame failed:', e)
-      this.msgHandler.onDebugMsg(new chatModels.DebugMsg({
-        content: `开放平台关闭项目失败：${e}`
-      }))
+      this.addDebugMsg(`Failed to end Open Live session: ${e}`)
       return false
     }
     return true
@@ -158,9 +129,7 @@ export default class ChatClientDirectOpenLive extends ChatClientOfficialBase {
       }
     } catch (e) {
       console.error('sendGameHeartbeat failed:', e)
-      this.msgHandler.onDebugMsg(new chatModels.DebugMsg({
-        content: `开放平台项目心跳失败：${e}`
-      }))
+      this.addDebugMsg(`Failed to send Open Live heartbeat: ${e}`)
       return false
     }
     return true
@@ -189,23 +158,24 @@ export default class ChatClientDirectOpenLive extends ChatClientOfficialBase {
   }
 
   sendAuth() {
-    this.msgHandler.onDebugMsg(new chatModels.DebugMsg({
-      content: '已连接到房间，认证中'
-    }))
-
     this.websocket.send(this.makePacket(this.authBody, base.OP_AUTH))
   }
 
+  onWsClose() {
+    if (this.gameHeartbeatTimerId) {
+      window.clearTimeout(this.gameHeartbeatTimerId)
+      this.gameHeartbeatTimerId = null
+    }
+
+    super.onWsClose()
+  }
+
   delayReconnect() {
     if (document.visibilityState !== 'visible') {
       // 不知道什么时候才能重连，先endGame吧
       this.endGame()
     }
 
-    this.msgHandler.onDebugMsg(new chatModels.DebugMsg({
-      content: `计划下次重连，当前页面${document.visibilityState === 'visible' ? '可见' : '不可见'}`
-    }))
-
     super.delayReconnect()
   }
 

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

@@ -98,11 +98,16 @@ export default class ChatClientOfficialBase {
     throw Error('Not implemented')
   }
 
+  addDebugMsg(content) {
+    this.msgHandler.onDebugMsg(new chatModels.DebugMsg({ content }))
+  }
+
   async wsConnect() {
     if (this.isDestroying) {
       return
     }
 
+    this.addDebugMsg('Connecting')
     await this.onBeforeWsConnect()
     if (this.isDestroying) {
       return
@@ -133,7 +138,7 @@ export default class ChatClientOfficialBase {
     }
 
     if (!res) {
-      this.onWsClose()
+      window.setTimeout(() => this.onWsClose(), 0)
       throw Error('initRoom failed')
     }
     this.needInitRoom = false
@@ -144,6 +149,8 @@ export default class ChatClientOfficialBase {
   }
 
   onWsOpen() {
+    this.addDebugMsg('Connected and authenticating')
+
     this.sendAuth()
     if (this.heartbeatTimerId === null) {
       this.heartbeatTimerId = window.setInterval(this.sendHeartbeat.bind(this), HEARTBEAT_INTERVAL)
@@ -164,6 +171,8 @@ export default class ChatClientOfficialBase {
 
   onReceiveTimeout() {
     console.warn('接收消息超时')
+    this.addDebugMsg('Receiving message timed out')
+
     this.discardWebsocket()
   }
 
@@ -173,13 +182,19 @@ export default class ChatClientOfficialBase {
       this.receiveTimeoutTimerId = null
     }
 
-    // 直接丢弃阻塞的websocket，不等onclose回调了
-    this.websocket.onopen = this.websocket.onclose = this.websocket.onmessage = null
-    this.websocket.close()
-    this.onWsClose()
+    if (this.websocket) {
+      if (this.websocket.onclose) {
+        window.setTimeout(() => this.onWsClose(), 0)
+      }
+      // 直接丢弃阻塞的websocket，不等onclose回调了
+      this.websocket.onopen = this.websocket.onclose = this.websocket.onmessage = null
+      this.websocket.close()
+    }
   }
 
   onWsClose() {
+    this.addDebugMsg('Disconnected')
+
     this.websocket = null
     if (this.heartbeatTimerId) {
       window.clearInterval(this.heartbeatTimerId)
@@ -211,6 +226,8 @@ export default class ChatClientOfficialBase {
   }
 
   delayReconnect() {
+    this.addDebugMsg(`Scheduling reconnection. The page is ${document.visibilityState === 'visible' ? 'visible' : 'invisible'}`)
+
     if (document.visibilityState === 'visible') {
       window.setTimeout(this.wsConnect.bind(this), this.getReconnectInterval())
       return

frontend/src/api/chat/ChatClientRelay.js

@@ -41,10 +41,17 @@ export default class ChatClientRelay {
     }
   }
 
+  addDebugMsg(content) {
+    this.msgHandler.onDebugMsg(new chatModels.DebugMsg({ content }))
+  }
+
   wsConnect() {
     if (this.isDestroying) {
       return
     }
+
+    this.addDebugMsg('Connecting')
+
     const protocol = window.location.protocol === 'https:' ? 'wss' : 'ws'
     const url = `${protocol}://${window.location.host}/api/chat`
     this.websocket = new WebSocket(url)
@@ -54,6 +61,8 @@ export default class ChatClientRelay {
   }
 
   onWsOpen() {
+    this.addDebugMsg('Connected and authenticating')
+
     this.websocket.send(JSON.stringify({
       cmd: COMMAND_JOIN_ROOM,
       data: {
@@ -74,16 +83,23 @@ export default class ChatClientRelay {
   }
 
   onReceiveTimeout() {
-    console.warn('接收消息超时')
     this.receiveTimeoutTimerId = null
+    console.warn('接收消息超时')
+    this.addDebugMsg('Receiving message timed out')
 
-    // 直接丢弃阻塞的websocket，不等onclose回调了
-    this.websocket.onopen = this.websocket.onclose = this.websocket.onmessage = null
-    this.websocket.close()
-    this.onWsClose()
+    if (this.websocket) {
+      if (this.websocket.onclose) {
+        window.setTimeout(() => this.onWsClose(), 0)
+      }
+      // 直接丢弃阻塞的websocket，不等onclose回调了
+      this.websocket.onopen = this.websocket.onclose = this.websocket.onmessage = null
+      this.websocket.close()
+    }
   }
 
   onWsClose() {
+    this.addDebugMsg('Disconnected')
+
     this.websocket = null
     if (this.receiveTimeoutTimerId) {
       window.clearTimeout(this.receiveTimeoutTimerId)
@@ -107,6 +123,8 @@ export default class ChatClientRelay {
       return
     }
 
+    this.addDebugMsg('Scheduling reconnection')
+
     // 这边不用判断页面是否可见，因为发心跳包不是由定时器触发的，即使是不活动页面也不会心跳超时
     window.setTimeout(this.wsConnect.bind(this), this.getReconnectInterval())
   }

frontend/src/api/chat/index.js

@@ -11,6 +11,7 @@ export function getDefaultMsgHandler() {
     onUpdateTranslation: dummyFunc,
 
     onFatalError: dummyFunc,
+    onDebugMsg: dummyFunc,
   }
 }
 

frontend/src/api/chatConfig.js

@@ -19,6 +19,7 @@ export const DEFAULT_CONFIG = {
   blockUsers: '',
   blockMedalLevel: 0,
 
+  showDebugMessages: false,
   relayMessagesByServer: false,
   autoTranslate: false,
   giftUsernamePronunciation: '',
@@ -43,7 +44,10 @@ export function getLocalConfig() {
     sanitizeConfig(config)
     return config
   } catch {
-    return deepCloneDefaultConfig()
+    let config = deepCloneDefaultConfig()
+    // 新用户默认开启调试消息，免得总有人问
+    config.showDebugMessages = true
+    return config
   }
 }
 

frontend/src/lang/en.js

@@ -45,6 +45,8 @@ export default {
     blockMedalLevel: 'Block medal level lower than',
 
     advanced: 'Advanced',
+    showDebugMessages: 'Show debug messages',
+    showDebugMessagesTip: 'If the messages cannot be displayed, you can enable this for debugging. Otherwise there is no need to enable it',
     relayMessagesByServer: 'Relay messages by the server',
     relayMessagesByServerTip: 'Message path when enabled: Bilibili server -> blivechat server -> your browser. Some advanced features require this to be enabled. It is recommended to enable it only when using blivechat locally, and not when using through a remote server',
     autoTranslate: 'Auto translate messages to Japanese',

frontend/src/lang/ja.js

@@ -45,6 +45,8 @@ export default {
     blockMedalLevel: 'ブロック勲章等級がx未満',
 
     advanced: 'アドバンスド',
+    showDebugMessages: 'デバッグメッセージを表示する',
+    showDebugMessagesTip: 'メッセージが表示されない場合、デバッグのためにこれを有効にすることができます。それ以外の場合は、有効にする必要はありません',
     relayMessagesByServer: 'サーバを介してメッセージを転送する',
     relayMessagesByServerTip: '有効になった場合のメッセージパス：Bilibiliサーバー -> blivechatサーバー -> あなたのブラウザー。一部の高度な機能では、これが有効になっている必要があります。blivechatをローカルで使用する場合にのみ有効にすることを推奨します。リモートサーバーを介して使用する場合には、有効にしないようにしてください',
     autoTranslate: 'コメントを日本語に翻訳する',

frontend/src/lang/zh.js

@@ -45,6 +45,8 @@ export default {
     blockMedalLevel: '屏蔽当前直播间勋章等级低于',
 
     advanced: '高级',
+    showDebugMessages: '显示调试消息',
+    showDebugMessagesTip: '如果消息不能显示，可以开启这个用来调试，否则没必要开启',
     relayMessagesByServer: '通过服务器转发消息',
     relayMessagesByServerTip: '开启时的消息路径：B站服务器 -> blivechat服务器 -> 你的浏览器。部分高级功能需要开启这个。推荐只在本地使用blivechat时开启，而通过远程服务器使用时不开启',
     autoTranslate: '自动翻译弹幕到日语',

frontend/src/views/Home.vue

@@ -143,6 +143,15 @@
           </el-tab-pane>
 
           <el-tab-pane :label="$t('home.advanced')">
+            <el-row>
+              <el-col :xs="24" :sm="8">
+                <el-tooltip :content="$t('home.showDebugMessagesTip')">
+                  <el-form-item :label="$t('home.showDebugMessages')">
+                    <el-switch v-model="form.showDebugMessages"></el-switch>
+                  </el-form-item>
+                </el-tooltip>
+              </el-col>
+            </el-row>
             <el-row :gutter="20">
               <el-col :xs="24" :sm="8">
                 <el-tooltip :content="$t('home.relayMessagesByServerTip')">

frontend/src/views/Room.vue

@@ -172,6 +172,7 @@ export default {
       cfg.blockNotMobileVerified = toBool(cfg.blockNotMobileVerified)
       cfg.blockMedalLevel = toInt(cfg.blockMedalLevel, chatConfig.DEFAULT_CONFIG.blockMedalLevel)
 
+      cfg.showDebugMessages = toBool(cfg.showDebugMessages)
       cfg.relayMessagesByServer = toBool(cfg.relayMessagesByServer)
       cfg.autoTranslate = toBool(cfg.autoTranslate)
       cfg.importPresetCss = toBool(cfg.importPresetCss)
@@ -364,6 +365,9 @@ export default {
     },
     /** @param {chatModels.DebugMsg} data */
     onDebugMsg(data) {
+      if (!this.config.showDebugMessages) {
+        return
+      }
       this.onAddText(new chatModels.AddTextMsg({
         authorName: 'blivechat',
         authorType: constants.AUTHOR_TYPE_ADMIN,