fix hub load

default.d.ts

@@ -1,4 +1,5 @@
 import { LoadingBarProviderInst, MessageProviderInst } from "naive-ui"
+import { useRoute } from "vue-router"
 
 declare module 'vue3-aplayer' {
   const content: any
@@ -17,5 +18,6 @@ declare global {
   interface Window {
     $message: MessageProviderInst,
     $loadingBar: LoadingBarProviderInst
+    $route: ReturnType<typeof useRoute>
   }
 }

src/api/account.ts

@@ -182,7 +182,19 @@ export function downloadConfigDirect(name: string) {
     name: name
   })
 }
-export async function DownloadConfig<T>(name: string) {
+export type ConfigStatus = 'success' | 'error' | 'notfound'
+export async function DownloadConfig<T>(name: string): Promise<
+  | {
+      msg: undefined
+      status: ConfigStatus
+      data: T
+    }
+  | {
+      msg: string
+      status: ConfigStatus
+      data: undefined
+    }
+> {
   try {
     const resp = await QueryGetAPI<string>(VTSURU_API_URL + 'get-config', {
       name: name
@@ -191,18 +203,21 @@ export async function DownloadConfig<T>(name: string) {
       console.log('已获取配置文件: ' + name)
       return {
         msg: undefined,
+        status: 'success',
         data: JSON.parse(resp.data) as T
       }
     } else if (resp.code == 404) {
       console.error(`未找到名为 ${name} 的配置文件`)
       return {
         msg: `未找到名为 ${name} 的配置文件, 需要先上传`,
+        status: 'notfound',
         data: undefined
       }
     } else {
       console.error(`无法获取配置文件 [${name}]: ` + resp.message)
       return {
         msg: `无法获取配置文件 [${name}]: ` + resp.message,
+        status: 'error',
         data: undefined
       }
     }
@@ -210,6 +225,7 @@ export async function DownloadConfig<T>(name: string) {
     console.error(`无法获取配置文件 [${name}]: ` + err)
     return {
       msg: `无法获取配置文件 [${name}]: ` + err,
+      status: 'error',
       data: undefined
     }
   }

src/components/TempComponent.vue

@@ -1,19 +1,27 @@
 <script setup lang="ts">
+import { useAccount } from '@/api/account';
 import { useLoadingBarStore } from '@/store/useLoadingBarStore'
-import { useLoadingBar, useMessage } from 'naive-ui'
+import { useStorage } from '@vueuse/core';
+import { NSpin, useLoadingBar, useMessage } from 'naive-ui'
 import { onMounted } from 'vue'
+import { useRoute } from 'vue-router';
+
+const cookie = useStorage('JWT_Token', '')
+const accountInfo = useAccount()
 
 // Setup code
 onMounted(() => {
   window.$loadingBar = useLoadingBar()
   window.$message = useMessage()
+  window.$route = useRoute()
   const providerStore = useLoadingBarStore()
   providerStore.setLoadingBar(window.$loadingBar)
 })
 </script>
 
 <template>
-  <div style="height: 100vh">
+  <NSpin v-if="($route.query.token || cookie) && accountInfo.id < 1" style="margin: 0 auto;" />
+  <div v-else style="height: 100vh">
     <slot></slot>
   </div>
 </template>

src/data/RTCClient.ts

@@ -99,11 +99,14 @@ abstract class BaseRTCClient {
   }
   public processData(conn: DataConnection, data: RTCData) {
     //console.log(data)
-    if (data.Key == 'Heartbeat') { // 心跳
+    if (data.Key == 'Heartbeat') {
+      // 心跳
       return
-    } else if (data.Key == 'VTsuru.RTCEvent.On') { // 添加事件
+    } else if (data.Key == 'VTsuru.RTCEvent.On') {
+      // 添加事件
       this.handledEvents[conn.peer].push(data.Data)
-    } else if (data.Key == 'VTsuru.RTCEvent.Off') { // 移除事件
+    } else if (data.Key == 'VTsuru.RTCEvent.Off') {
+      // 移除事件
       const i = this.handledEvents[conn.peer].indexOf(data.Data)
       if (i > -1) {
         this.handledEvents[conn.peer].splice(i, 1)
@@ -127,12 +130,14 @@ abstract class BaseRTCClient {
     )
   }
 
-  public Init() {
+  public async Init() {
     if (!this.isInited) {
       this.isInited = true
+      await this.vhub.on('RTCOffline', (id: string) =>
+        this.onConnectionClose(id)
+      )
       this.connectRTC()
     }
-    this.vhub.on('RTCOffline', (id: string) => this.onConnectionClose(id))
     return this
   }
 }
@@ -170,8 +175,8 @@ export class SlaveRTCClient extends BaseRTCClient {
     c?.on('data', (data) => this.processData(c, data as RTCData))
     c?.on('close', () => this.onConnectionClose(c.peer))
   }
-  public Init() {
-    super.Init()
+  public async Init() {
+    await super.Init()
     this.vhub?.on('MasterOnline', (data: string) => this.connectToMaster(data))
     setTimeout(() => {
       this.connectToAllMaster()

src/main.ts

@@ -101,7 +101,6 @@ QueryGetAPI<string>(BASE_API_URL + 'vtsuru/version')
     //加载其他数据
     await GetSelfAccount()
     const account = useAccount()
-    const vhub = useVTsuruHub().Init(account.value.token)
     const useAuth = useAuthStore()
     if (account.value.id) {
       if (account.value.biliUserAuthInfo && !useAuth.currentToken) {

src/store/useDanmakuClient.ts

@@ -1,3 +1,4 @@
+import { useAccount } from '@/api/account'
 import DanmakuClient, { AuthInfo, RoomAuthInfo } from '@/data/DanmakuClient'
 import { defineStore } from 'pinia'
 import { computed, ref } from 'vue'
@@ -18,6 +19,7 @@ export const useDanmakuClient = defineStore('DanmakuClient', () => {
     () => status.value === 'running' || status.value === 'listening'
   )
   const authInfo = ref<RoomAuthInfo>()
+  const accountInfo = useAccount()
 
   let existOtherClient = false
   let isInitializing = false
@@ -75,7 +77,7 @@ export const useDanmakuClient = defineStore('DanmakuClient', () => {
         async (lock) => {
           if (lock) {
             status.value = 'initializing'
-            bc = new BroadcastChannel('vtsuru.danmaku')
+            bc = new BroadcastChannel('vtsuru.danmaku.' + accountInfo.value?.id)
             bc.onmessage = (event) => {
               const message: BCMessage = event.data as BCMessage
               const data = message.data ? JSON.parse(message.data) : {}
@@ -83,7 +85,7 @@ export const useDanmakuClient = defineStore('DanmakuClient', () => {
                 case 'check-client':
                   sendBCMessage('response-client-status', {
                     status: status.value,
-                    auth: authInfo.value
+                    auth: authInfo.value,
                   })
                   break
                 case 'response-client-status':

src/store/useRTC.ts

@@ -9,7 +9,9 @@ export const useWebRTC = defineStore('WebRTC', () => {
   const accountInfo = useAccount()
   let isInitializing = false
 
-  function Init(type: 'master' | 'slave'): MasterRTCClient | SlaveRTCClient | undefined {
+  function Init(
+    type: 'master' | 'slave'
+  ): MasterRTCClient | SlaveRTCClient | undefined {
     if (isInitializing) {
       return
     }
@@ -30,7 +32,7 @@ export const useWebRTC = defineStore('WebRTC', () => {
                   accountInfo.value.id.toString(),
                   accountInfo.value.token
                 )
-                masterClient.value.Init()
+                await masterClient.value.Init()
                 return masterClient
               }
             } else {
@@ -41,7 +43,7 @@ export const useWebRTC = defineStore('WebRTC', () => {
                   accountInfo.value.id?.toString(),
                   accountInfo.value.token
                 )
-                slaveClient.value.Init()
+                await slaveClient.value.Init()
                 return slaveClient
               }
             }

src/store/useVTsuruHub.ts

@@ -13,14 +13,16 @@ export const useVTsuruHub = defineStore('VTsuruHub', () => {
   const signalRClient = ref<signalR.HubConnection>()
   const isInited = ref(false)
   const isIniting = ref(false)
-  let token = ''
+  const accountInfo = useAccount()
 
   async function connectSignalR() {
     if (isIniting.value) return
     isIniting.value = true
+    while (!accountInfo.value.id || accountInfo.value.id < 1)
+      await new Promise((resolve) => setTimeout(resolve, 1000))
     //console.log('[Components-Event] 正在连接到 VTsuru 服务器...')
     const connection = new HubConnectionBuilder()
-      .withUrl(BASE_HUB_URL + 'main?token=' + token, {
+      .withUrl(BASE_HUB_URL + 'main?token=' + accountInfo.value.token, {
         skipNegotiation: true,
         transport: HttpTransportType.WebSockets,
         logger: LogLevel.Error
@@ -91,9 +93,8 @@ export const useVTsuruHub = defineStore('VTsuruHub', () => {
     signalRClient.value?.onreconnected(listener)
   }
 
-  function Init(_token: string) {
-    token = _token
-    if (!isInited.value) {
+  function Init() {
+    if (!isInited.value && !isIniting.value) {
       connectSignalR()
     }
     return useVTsuruHub()

src/views/TestView.vue

@@ -39,6 +39,6 @@ function mount() {
     </template>
 
     <NInput v-model:value="customCss" placeholder="css" @update:value="s => danmujiRef?.setCss(s.toString())" />
-    <DanmujiOBS ref="danmujiRef" :customCss="customCss" style="width: 400px;height: 700px;" />
+    <DanmujiOBS ref="danmujiRef" :customCss="customCss" style="width: 400px;height: 700px;"  :isOBS="false" />
   </div>
 </template>

src/views/obs/DanmujiOBS.vue

@@ -17,6 +17,8 @@ import { useWebRTC } from '@/store/useRTC';
 import { QueryGetAPI } from '@/api/query';
 import { OPEN_LIVE_API_URL, VTSURU_API_URL } from '@/data/constants';
 import { CustomChart } from 'echarts/charts';
+import { useRoute } from 'vue-router';
+import { NAlert } from 'naive-ui';
 
 export interface DanmujiConfig {
   minGiftPrice: number,
@@ -42,15 +44,16 @@ export interface DanmujiConfig {
 }
 
 defineExpose({ setCss })
-const props = defineProps<{
+const { customCss, isOBS = true } = defineProps<{
   customCss?: string
+  isOBS?: boolean
 }>()
 
 const messageRender = ref()
 const client = await useDanmakuClient().initClient()
 const pronunciationConverter = new pronunciation.PronunciationConverter()
 const accountInfo = useAccount()
-
+const route = useRoute()
 
 const defaultConfig: DanmujiConfig = {
   minGiftPrice: 0.1,
@@ -389,7 +392,7 @@ onMounted(async () => {
       config.value = result.data as DanmujiConfig
       break
     }
-    else {
+    else if (result.status == 'error') {
       await new Promise(resolve => setTimeout(resolve, 1000))
     }
   }
@@ -406,5 +409,7 @@ onUnmounted(() => {
 </script>
 
 <template>
-  <MessageRender ref="messageRender" :customCss="customCss" :showGiftName="config.showGiftName" style="height: 100%; width: 100%"/>
+  <NAlert v-if="!$route.query.token && isOBS" type="error"> 未携带token参数 </NAlert>
+  <MessageRender v-else ref="messageRender" :customCss="customCss" :showGiftName="config.showGiftName"
+    style="height: 100%; width: 100%" />
 </template>