websocket消息支持 (#188)

* Release (#162)

* feat: ✨ websocket server demo

* feat: ✨ ws server demo dev

* feat: ✨ ws server and mobile page

* feat: ✨ 手机端发送消息

* feat: ✨ 手机网页发送消息

* 添加了抽奖中和抽奖完成时的音效

* feat: ✨ 自定义设置弹幕服务器地址

* feat: ✨ ws not done

* fix: 🐛 fix pr-185 #185

为播放音效添加控制

* feat: ✨ server worker demo not done

* feat: ✨ websocket server

* feat: ✨ 全局接收websocket消息并存储到indexdb中

---------

Co-authored-by: Silence@2024 <707261624@qq.com>

src/views/Config/Server/useViewModel.ts

@@ -0,0 +1,55 @@
+import type { ServerType, WsMsgData } from '@/types/storeType'
+import { cloneDeep } from 'lodash-es'
+import { storeToRefs } from 'pinia'
+import { onMounted, ref, watch } from 'vue'
+import { useWebsocket } from '@/hooks/useWebsocket'
+import useStore from '@/store'
+import { getUniqueSignature } from '@/utils/auth'
+import { IndexDb } from '@/utils/dexie'
+
+export function useViewModel() {
+    const serverConfig = useStore().serverConfig
+    const { getServerList: serverList, getCurrentServer: currentServer } = storeToRefs(serverConfig)
+    const currentServerValue = ref<ServerType>(cloneDeep(currentServer.value))
+    const wsUrl = ref<string>('ws://localhost:8080/echo')
+    const msgList = ref<WsMsgData[]>([])
+    const { open: openWs, close: closeWs, status: wsStatus } = useWebsocket()
+    const msgListDb = new IndexDb('msgList', ['msgList'], 1, ['createTime'])
+    const handleConnectWs = async () => {
+        const userSignature = await getUniqueSignature()
+        wsUrl.value = `ws://localhost:8080/echo?userSignature=${userSignature}`
+        openWs(wsUrl.value)
+    }
+    const getAllMsg = async () => {
+        msgListDb.getDataSortedByDateTime('msgList', 'dateTime').then((data) => {
+            msgList.value = data
+        })
+    }
+
+    watch(
+        () => currentServerValue.value.id,
+        (newValue) => {
+            serverList.value.forEach((item) => {
+                if (item.id === newValue) {
+                    currentServerValue.value = item
+                    serverConfig.setCurrentServer(currentServerValue.value)
+                }
+            })
+        },
+    )
+    watch(() => currentServer.value.host, (newValue) => {
+        currentServerValue.value.host = newValue
+        serverConfig.updateServerList(currentServerValue.value)
+    })
+    onMounted(() => {
+        getAllMsg()
+    })
+    return {
+        serverList,
+        currentServerValue,
+        wsStatus,
+        handleConnectWs,
+        closeWs,
+        msgList,
+    }
+}