🎈 perf: 完善五子棋websocket

src/bus.ts

@@ -1,7 +1,4 @@
 import mitt from 'mitt';
 
-type Events = {
-  userDataUpdateSucceed: void;
-  userDataUpdateFailed: void;
-};
+type Events = {};
 export const bus = mitt<Events>();

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>