From 4ae374a8b6d3be7b84ec792cf23aa90f5c2a42fd Mon Sep 17 00:00:00 2001
From: Litirx <wbpstn@163.com>
Date: Mon, 16 Dec 2024 17:52:11 +0800
Subject: [PATCH] =?UTF-8?q?=F0=9F=8E=88=20perf:=20=E5=AE=8C=E5=96=84?=
 =?UTF-8?q?=E4=BA=94=E5=AD=90=E6=A3=8Bwebsocket?=
MIME-Version: 1.0
Content-Type: text/plain; charset=UTF-8
Content-Transfer-Encoding: 8bit

---
 src/bus.ts                   |  5 +--
 src/views/GobangListPage.vue | 65 +++++++++++++++++++-----------------
 2 files changed, 36 insertions(+), 34 deletions(-)

diff --git a/src/bus.ts b/src/bus.ts
index a891669..8983ec6 100644
--- a/src/bus.ts
+++ b/src/bus.ts
@@ -1,7 +1,4 @@
 import mitt from 'mitt';
 
-type Events = {
-  userDataUpdateSucceed: void;
-  userDataUpdateFailed: void;
-};
+type Events = {};
 export const bus = mitt<Events>();
diff --git a/src/views/GobangListPage.vue b/src/views/GobangListPage.vue
index 19b93e4..98a2a40 100644
--- a/src/views/GobangListPage.vue
+++ b/src/views/GobangListPage.vue
@@ -99,7 +99,7 @@ export const relations = {
   RoomList: 'RoomList',
   RoomCreated: 'CreateRoom',
   PlayerSideAllocation: 'PlayerJoin',
-};
+} as const;
 const reversedRelations: Record<string, string[]> = {};
 for (const [k, v] of Object.entries(relations)) {
   (reversedRelations[v] ??= []).push(k);
@@ -108,11 +108,10 @@ export interface RelatedPart<N extends keyof typeof relations, P extends Payload
   extends PayloadPart<N, P> {
   originalPacketName?: (typeof relations)[N];
 }
-export interface RespErrorPart extends PayloadPart<'Error', { reason: string }> {
+export interface ErrorResp extends PayloadPart<'Error', { reason: string }> {
   originalPacketName: Request['name'];
 }
 export type Resp =
-  | RespErrorPart
   | PayloadPart<'UserInfo', SucceedUserInfoResponse>
   | RelatedPart<'RoomList', { rooms: Room[] }>
   | RelatedPart<'RoomCreated', { roomId: RoomId }>
@@ -122,38 +121,45 @@ interface UseGobangSocketOptions {
   succeed: {
     [P in Resp['name']]?: (payload: RespOf<P>['payload']) => void;
   };
-  error: {
-    [P in Resp['name']]?: (reason: string) => void;
+  finally?: {
+    [P in Request['name']]?: () => void;
   };
-  finally: object;
 }
 export function useGobangSocket(options: UseGobangSocketOptions) {
-  const { succeed: handlers } = options;
   const userStore = useUserStore();
   const map = new Map<string, Set<string>>();
   const { send: _send } = useWebSocket<string>(
     `ws://172.16.114.84:58080/chess/${userStore.token}`,
     {
       onMessage(_, { data }) {
-        const resp: Resp = JSON.parse(data);
+        const resp: Resp | ErrorResp = JSON.parse(data);
         const { name } = resp;
-        let excFinally = true;
-        if ('originalPacketName' in resp) {
-          const set = map.get(name);
-          if (set) {
-            set.delete(name);
-            if (!set.size) {
-              map.delete(name);
-            } else {
-              excFinally = false;
+        let reqName: Request['name'] | undefined;
+        try {
+          if (name === 'Error') {
+            const { originalPacketName } = resp;
+            ElMessage.error(resp.payload.reason);
+            reqName = originalPacketName;
+            map.delete(originalPacketName);
+            return;
+          }
+          if ('originalPacketName' in resp && resp.originalPacketName) {
+            const { originalPacketName } = resp;
+            const set = map.get(originalPacketName);
+            if (set) {
+              set.delete(name);
+              if (!set.size) {
+                map.delete(name);
+                reqName = originalPacketName;
+              }
             }
           }
+          options.succeed[name]?.(resp.payload as any);
+        } finally {
+          if (reqName) {
+            options.finally?.[reqName]?.();
+          }
         }
-        if (excFinally) {
-          options.finally;
-        }
-        console.log(resp);
-        handlers[name]?.(resp.payload as any);
       },
     },
   );
@@ -181,24 +187,23 @@ const loading = ref(false);
 const loadingText = ref<string>();
 const { send } = useGobangSocket({
   succeed: {
-    Error(p) {
-      ElMessage.error(p.reason);
-      loading.value = false;
-    },
     RoomList(p) {
       rooms.value = p.rooms.map(toRoomRender);
-      console.log(toRaw(rooms.value));
-      loading.value = false;
     },
     RoomCreated(p) {
       play(p.roomId);
     },
   },
+  finally: {
+    RoomList() {
+      loading.value = false;
+    },
+  },
 });
 function refresh() {
   loading.value = true;
   loadingText.value = '加载中';
-  send(JSON.stringify({ name: 'RoomList' } satisfies RequestOf<'RoomList'>));
+  send({ name: 'RoomList' });
 }
 onMounted(() => {
   refresh();
@@ -223,6 +228,6 @@ function play(roomId: RoomId) {
   });
 }
 function createRoom() {
-  send(JSON.stringify({ name: 'CreateRoom' } satisfies RequestOf<'CreateRoom'>));
+  send({ name: 'CreateRoom' });
 }
 </script>