update interval/timeou

src/data/DanmakuClient.ts

@@ -3,6 +3,7 @@ import { QueryGetAPI, QueryPostAPI } from '@/api/query'
 import ChatClientDirectOpenLive from '@/data/chat/ChatClientDirectOpenLive.js'
 import { OPEN_LIVE_API_URL } from './constants'
 import { ref, toRef } from 'vue'
+import { setInterval, clearInterval } from 'worker-timers'
 
 export interface DanmakuInfo {
   room_id: number
@@ -182,7 +183,9 @@ export default class DanmakuClient {
     } else {
       console.warn('[OPEN-LIVE] 弹幕客户端未被启动, 忽略')
     }
-    clearInterval(this.timer)
+    if (this.timer) {
+      clearInterval(this.timer)
+    }
     this.events = {
       danmaku: [],
       gift: [],
@@ -191,7 +194,7 @@ export default class DanmakuClient {
   }
   private sendHeartbeat() {
     if (this.client) {
-      ;(this.authInfo ? QueryPostAPI<OpenLiveInfo>(OPEN_LIVE_API_URL + 'heartbeat', this.authInfo) : QueryGetAPI<OpenLiveInfo>(OPEN_LIVE_API_URL + 'heartbeat-internal')).then((data) => {
+      (this.authInfo ? QueryPostAPI<OpenLiveInfo>(OPEN_LIVE_API_URL + 'heartbeat', this.authInfo) : QueryGetAPI<OpenLiveInfo>(OPEN_LIVE_API_URL + 'heartbeat-internal')).then((data) => {
         if (data.code != 200) {
           console.error('[OPEN-LIVE] 心跳失败: ' + data.message)
           this.client.stop()

src/data/chat/ChatClientOfficialBase/index.js

@@ -1,4 +1,5 @@
 import { BrotliDecode } from './brotli_decode'
+import { setInterval, clearInterval, setTimeout, clearTimeout } from 'worker-timers'
 
 const HEADER_SIZE = 16
 
@@ -142,8 +143,9 @@ export default class ChatClientOfficialBase {
 
   onWsOpen() {
     this.sendAuth()
-    this.heartbeatTimerId = window.setInterval(this.sendHeartbeat.bind(this), HEARTBEAT_INTERVAL)
+    this.heartbeatTimerId = setInterval(this.sendHeartbeat.bind(this), HEARTBEAT_INTERVAL)
     this.refreshReceiveTimeoutTimer()
+    console.log('ws 已连接');
   }
 
   sendHeartbeat() {
@@ -152,9 +154,9 @@ export default class ChatClientOfficialBase {
 
   refreshReceiveTimeoutTimer() {
     if (this.receiveTimeoutTimerId) {
-      window.clearTimeout(this.receiveTimeoutTimerId)
+      clearTimeout(this.receiveTimeoutTimerId)
     }
-    this.receiveTimeoutTimerId = window.setTimeout(this.onReceiveTimeout.bind(this), RECEIVE_TIMEOUT)
+    this.receiveTimeoutTimerId = setTimeout(this.onReceiveTimeout.bind(this), RECEIVE_TIMEOUT)
   }
 
   onReceiveTimeout() {
@@ -164,7 +166,7 @@ export default class ChatClientOfficialBase {
 
   discardWebsocket() {
     if (this.receiveTimeoutTimerId) {
-      window.clearTimeout(this.receiveTimeoutTimerId)
+      clearTimeout(this.receiveTimeoutTimerId)
       this.receiveTimeoutTimerId = null
     }
 
@@ -177,11 +179,11 @@ export default class ChatClientOfficialBase {
   onWsClose() {
     this.websocket = null
     if (this.heartbeatTimerId) {
-      window.clearInterval(this.heartbeatTimerId)
+      clearInterval(this.heartbeatTimerId)
       this.heartbeatTimerId = null
     }
     if (this.receiveTimeoutTimerId) {
-      window.clearTimeout(this.receiveTimeoutTimerId)
+      clearTimeout(this.receiveTimeoutTimerId)
       this.receiveTimeoutTimerId = null
     }
 
@@ -189,8 +191,8 @@ export default class ChatClientOfficialBase {
       return
     }
     this.retryCount++
-    console.warn('掉线重连中', this.retryCount)
-    window.setTimeout(this.wsConnect.bind(this), 1000)
+    console.warn('心跳超时, 重连中', this.retryCount)
+    setTimeout(this.wsConnect.bind(this), 1000)
   }
 
   onWsMessage(event) {

src/views/open_live/MusicRequest.vue

@@ -830,19 +830,13 @@ onUnmounted(() => {
     <NText depth="3">
       如果没有部署
       <NButton text type="primary" tag="a" href="https://www.yuque.com/megghy/dez70g/vfvcyv3024xvaa1p" target="_blank"> VtsuruEventFetcher </NButton>
-      则其需要保持此页面开启才能点歌
+      则其需要保持此页面开启才能点歌, 也不要同时开多个页面, 会导致点歌重复 !(部署了则不影响)
     </NText>
   </NAlert>
   <NAlert type="warning" v-else title="你尚未注册并登录 VTsuru.live, 大部分规则设置将不可用 (因为我懒得在前段重写一遍逻辑">
     <NButton @click="$router.push({ name: 'manage-index' })" type="primary"> 前往登录或注册 </NButton>
   </NAlert>
   <br />
-  <NAlert v-if="accountInfo?.eventFetcherOnline != true" type="warning" closable>
-    不要同时开多个页面, 会导致点歌重复! 可以考虑使用
-    <NButton text type="primary" tag="a" href="https://www.yuque.com/megghy/dez70g/vfvcyv3024xvaa1p" target="_blank"> VtsuruEventFetcher </NButton>
-    , 部署后还可以记录SC和上舰历史
-  </NAlert>
-  <br />
   <NCard size="small">
     <NSpace align="center">
       <NTooltip>

src/views/open_live/OpenLiveIndex.vue

@@ -1,12 +1,15 @@
 <script setup lang="ts">
-import DanmakuClient, { RoomAuthInfo } from '@/data/DanmakuClient';
-import { NButton, NCard, NDivider, NSpace } from 'naive-ui'
+import { useAccount } from '@/api/account'
+import DanmakuClient, { RoomAuthInfo } from '@/data/DanmakuClient'
+import { NAlert, NButton, NCard, NDivider, NSpace } from 'naive-ui'
 
 const props = defineProps<{
   client: DanmakuClient
   roomInfo: RoomAuthInfo
   code: string | undefined
 }>()
+
+const accountInfo = useAccount()
 </script>
 
 <template>
@@ -25,6 +28,15 @@ const props = defineProps<{
       </template>
     </NCard>
   </NSpace>
+  <br />
+  <NAlert v-if="accountInfo?.eventFetcherOnline != true" type="warning" title="可用性警告" style="max-width: 600px; margin: 0 auto">
+    当浏览器在后台运行时定时器和 Websocket 连接将受到严格限制, 这会导致弹幕接收功能无法正常工作 (详见
+    <NButton text tag="a" href="https://developer.chrome.com/blog/background_tabs/" target="_blank" type="info">此文章</NButton>), 虽然本站已经针对此问题做出了处理, 一般情况下即使掉线了也会重连,
+    不过还是有可能会遗漏事件
+    <br />
+    为避免这种情况, 建议注册本站账后使用 <NButton type="primary" text size="tiny" tag="a" href="https://www.yuque.com/megghy/dez70g/vfvcyv3024xvaa1p" target="_blank"> VtsuruEventFetcher </NButton>,
+    否则请在使用功能时尽量保持网页在前台运行
+  </NAlert>
   <NDivider> 还有更多 </NDivider>
   <NSpace justify="center" align="center" vertical>
     动态抽奖、视频征集、歌单、棉花糖、日程表...