🎨 organize websocket code structure

src/store/index.ts

@@ -3,6 +3,7 @@ import {useThemeStore} from "@/store/modules/themeStore.ts";
 import {langStore} from "@/store/modules/langStore.ts";
 import {useClientStore} from "@/store/modules/clientStore.ts";
 import {useCommentStore} from "@/store/modules/commentStore.ts";
+import {useWebSocketStore} from "@/store/modules/websocketStore.ts";
 
 export default function useStore() {
     return {
@@ -11,5 +12,6 @@ export default function useStore() {
         lang: langStore(),
         client: useClientStore(),
         comment: useCommentStore(),
+        websocket: useWebSocketStore(),
     };
 }

src/store/modules/websocketStore.ts

@@ -0,0 +1,45 @@
+// useWebSocketStore.ts
+import {defineStore} from 'pinia';
+import {onUnmounted, reactive} from 'vue';
+import {WebSocketService} from '@/utils/websocket/websocket.ts';
+
+type MessageCallback = (data: any) => void;
+type EventCallback = () => void;
+export const useWebSocketStore = defineStore('websocket', () => {
+    const state = reactive({
+        wsService: null as WebSocketService | null,
+    });
+
+    function initialize(options: { url: string; protocols?: string | string[]; reconnectTimeout?: number }) {
+        state.wsService = new WebSocketService(options);
+        state.wsService.open();
+
+        onUnmounted(() => {
+            state.wsService?.close(true);
+        });
+    }
+
+    function sendMessage(data: any) {
+        state.wsService?.send(data);
+    }
+
+    function on(event: 'message', callback: MessageCallback) {
+        state.wsService?.on(event, callback);
+    }
+
+    function onEvent(event: 'open' | 'error' | 'close', callback: EventCallback) {
+        state.wsService?.on(event, callback);
+    }
+
+    function close() {
+        state.wsService?.close();
+    }
+
+    return {
+        initialize,
+        sendMessage,
+        on,
+        onEvent,
+        close,
+    };
+});