From 11f1a321756f2bea60e54803fbdc62832231dc88 Mon Sep 17 00:00:00 2001 From: Litrix Date: Tue, 17 Dec 2024 12:56:53 +0800 Subject: [PATCH] =?UTF-8?q?=F0=9F=90=9E=20fix:=20=E4=BF=AE=E5=A4=8D?= =?UTF-8?q?=E8=BF=9E=E6=8E=A5=E4=B8=8D=E7=A8=B3=E5=AE=9A=E7=9A=84bug?= MIME-Version: 1.0 Content-Type: text/plain; charset=UTF-8 Content-Transfer-Encoding: 8bit --- src/views/GobangListPage.vue | 63 ++++++++++++++++++++---------------- src/views/GobangPlayPage.vue | 25 +++++++------- 2 files changed, 49 insertions(+), 39 deletions(-) diff --git a/src/views/GobangListPage.vue b/src/views/GobangListPage.vue index 7f1ef72..d6b93d8 100644 --- a/src/views/GobangListPage.vue +++ b/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 { 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>; -type RelatedRespNames = keyof typeof relations; type RelatedRequestNames = ValueOf; const reversedRelations = {} as Record; 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]>(); - let firstConnected = true; + // let firstConnected = true; const ws = useWebSocket(`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([]); +const rooms = ref([]); const loading = ref(false); const loadingText = ref(); 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) { diff --git a/src/views/GobangPlayPage.vue b/src/views/GobangPlayPage.vue index 1a6371b..0342473 100644 --- a/src/views/GobangPlayPage.vue +++ b/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'; } });