🐞 fix: 修复连接不稳定的bug

src/views/GobangListPage.vue

@@ -68,7 +68,7 @@ export enum RoomState {
 }
 /** 房间UUID */
 export type RoomId = string;
-export interface Room {
+export interface RoomInfo {
   id: RoomId;
   full: boolean;
   state: RoomState;
@@ -76,14 +76,7 @@ export interface Room {
   isBlackAcceptRestart: boolean;
   canWhiteDown: boolean;
 }
-export interface RoomRender extends Room {
-  briefId: string;
-}
-export function toRoomRender(room: Room): RoomRender {
-  return Object.assign(room, {
-    briefId: room.id.slice(0, 8),
-  });
-}
+export interface RoomDetail {}
 export interface SimplePart<N extends string> {
   name: N;
 }
@@ -98,7 +91,7 @@ export type Request =
   | SimplePart<'ResetRoom'>;
 export type Resp =
   | PayloadPart<'UserInfo', SucceedUserInfoResponse>
-  | PayloadPart<'RoomList', { rooms: Room[] }>
+  | PayloadPart<'RoomList', { rooms: RoomInfo[] }>
   | PayloadPart<'RoomCreated', { roomId: RoomId }>
   | PayloadPart<'PlayerSideAllocation', { isWhite: boolean }>;
 const relations = {
@@ -106,7 +99,6 @@ const relations = {
   RoomCreated: 'CreateRoom',
   PlayerSideAllocation: 'PlayerJoin',
 } as const satisfies Partial<Record<Resp['name'], Request['name']>>;
-type RelatedRespNames = keyof typeof relations;
 type RelatedRequestNames = ValueOf<typeof relations>;
 const reversedRelations = {} as Record<RelatedRequestNames, string[]>;
 for (const [k, v] of Object.entries(relations)) {
@@ -132,18 +124,23 @@ export interface UseGobangSocketOptions {
 export function useGobangSocket(options: UseGobangSocketOptions) {
   const userStore = useUserStore();
   const relationMap = new Map<RelatedRequestNames, [Request, Set<string>]>();
-  let firstConnected = true;
+  // let firstConnected = true;
   const ws = useWebSocket<string>(`wss://wzpmc.cn:18080/chess/${userStore.token}`, {
-    onConnected() {
-      // 新连接无故断开的临时解决方案
-      if (firstConnected) {
-        firstConnected = false;
-        return;
-      }
-      for (const [req] of relationMap.values()) {
-        send(req);
-      }
-    },
+    // autoReconnect: {
+    //   delay: 500,
+    // },
+    // onConnected() {
+    //   // 连接无故断开的临时解决方案
+    //   if (firstConnected) {
+    //     console.log('connected');
+    //     firstConnected = false;
+    //     return;
+    //   }
+    //   console.log('reconnected');
+    //   for (const [req] of relationMap.values()) {
+    //     send(req);
+    //   }
+    // },
     onMessage(_, { data }) {
       const resp: Resp | ErrorResp = JSON.parse(data);
       console.log(resp);
@@ -184,9 +181,12 @@ export function useGobangSocket(options: UseGobangSocketOptions) {
         }
       }
     },
-    autoReconnect: true,
-    onDisconnected() {
+    onDisconnected(_, ev) {
       console.log('disconnected');
+      // 正常断开
+      if (ev.code === 1000) return;
+      ElMessage.error(`连接已断开：${ev.reason}`);
+      router.push('/');
     },
   });
   const send = (data: Request) => {
@@ -211,9 +211,18 @@ import { useUserStore } from '@/stores/user';
 import { isKeyOf, type ValueOf } from '@/utils';
 import { useWebSocket } from '@vueuse/core';
 import { ElMessage } from 'element-plus';
+import { es } from 'element-plus/es/locales.mjs';
 import { onMounted, ref, toRaw } from 'vue';
+interface RoomInfoRender extends RoomInfo {
+  briefId: string;
+}
+function toRoomRender(room: RoomInfo): RoomInfoRender {
+  return Object.assign(room, {
+    briefId: room.id.slice(0, 8),
+  });
+}
 const showDialog = ref(false);
-const rooms = ref<RoomRender[]>([]);
+const rooms = ref<RoomInfoRender[]>([]);
 const loading = ref(false);
 const loadingText = ref<string>();
 const { send } = useGobangSocket({
@@ -239,7 +248,7 @@ function refresh() {
 onMounted(() => {
   refresh();
 });
-function getPlayerCount(row: RoomRender) {
+function getPlayerCount(row: RoomInfoRender) {
   switch (row.state) {
     case RoomState.CREATED:
       return '0/2';
@@ -249,7 +258,7 @@ function getPlayerCount(row: RoomRender) {
       return '2/2';
   }
 }
-function onJoinButtonClick(room: RoomRender) {
+function onJoinButtonClick(room: RoomInfoRender) {
   play(room.id);
 }
 function play(roomId: RoomId) {

src/views/GobangPlayPage.vue

@@ -93,6 +93,7 @@ import router from '@/router';
 import { useMediaStore } from '@/stores/media';
 import { create2DArray } from '@/utils';
 import { useGobangSocket, type RoomId } from '@/views/GobangListPage.vue';
+import { ElMessage } from 'element-plus';
 import { storeToRefs } from 'pinia';
 import { computed, onMounted, ref, watchEffect, type CSSProperties } from 'vue';
 import { useRoute } from 'vue-router';
@@ -179,15 +180,25 @@ function getCellStyle(chess: Chess | undefined, x: number, y: number) {
 }
 const state = ref<'firstLoading' | 'loading' | 'idle' | 'waiting'>('firstLoading');
 const isWhite = ref(false);
+// const
 const { send } = useGobangSocket({
   succeed: {
+    UserInfo() {
+      if (!roomId) return;
+      send({
+        name: 'PlayerJoin',
+        payload: {
+          roomId,
+        },
+      });
+    },
     PlayerSideAllocation(p) {
       isWhite.value = p.isWhite;
     },
   },
   error: {
     PlayerJoin() {
-      // router.back();
+      router.back();
     },
   },
   finally: {
@@ -198,18 +209,8 @@ const { send } = useGobangSocket({
     },
   },
 });
-function playerJoin(roomId: RoomId) {
-  send({
-    name: 'PlayerJoin',
-    payload: {
-      roomId,
-    },
-  });
-}
 onMounted(() => {
-  if (roomId) {
-    playerJoin(roomId);
-  } else {
+  if (!roomId) {
     state.value = 'idle';
   }
 });