From 4fce05635e6e9c7bc92d5d21ea1bec4e42870d2d Mon Sep 17 00:00:00 2001 From: today-is-first Date: Mon, 2 Dec 2024 13:59:21 +0900 Subject: [PATCH 1/3] =?UTF-8?q?feat:=20=EB=B0=A9=20=EC=A0=9C=ED=95=9C=20?= =?UTF-8?q?=EC=9D=B8=EC=9B=90=20=EC=B4=88=EA=B3=BC=20=EC=8B=9C=20Room=20Jo?= =?UTF-8?q?in=20=EC=8B=A4=ED=8C=A8=20=EA=B5=AC=ED=98=84?= MIME-Version: 1.0 Content-Type: text/plain; charset=UTF-8 Content-Transfer-Encoding: 8bit --- .../signalingServer/src/handlers/handleSignaling.ts | 8 +++++++- packages/frontend/src/hooks/useJoinRoom.ts | 2 +- 2 files changed, 8 insertions(+), 2 deletions(-) diff --git a/packages/backend/signalingServer/src/handlers/handleSignaling.ts b/packages/backend/signalingServer/src/handlers/handleSignaling.ts index e08ce749..3519f3a4 100644 --- a/packages/backend/signalingServer/src/handlers/handleSignaling.ts +++ b/packages/backend/signalingServer/src/handlers/handleSignaling.ts @@ -7,15 +7,21 @@ import { IRoomPayload, } from '@/types/signaling.types'; import { getTargetSocket } from '@/util/handlerUtils'; +import { getRoom } from '@/util/handlerUtils'; +import { ROOM_CONSTANTS } from '@/constants/roomConstants'; const handleSignaling = (socket: ISignalingSocket, io: Server) => { socket.on('create_room', async (payload: IRoomPayload) => { await socket.join(payload.gsid); socket.data.gsid = payload.gsid; + console.log('[Server][🎥] create_room', payload.gsid); }); socket.on('join_room', async (payload: IRoomPayload) => { - await socket.join(payload.gsid); + const roomSize = await getRoom(io, payload.gsid)?.size; + if (!roomSize || roomSize >= ROOM_CONSTANTS.maxParticipants) return; socket.data.gsid = payload.gsid; + await socket.join(payload.gsid); + console.log('[Server][🎥] join_room', payload.gsid); socket .to(payload.gsid) .emit('user_joined', { fromUserId: socket.data.userId, gsid: payload.gsid }); diff --git a/packages/frontend/src/hooks/useJoinRoom.ts b/packages/frontend/src/hooks/useJoinRoom.ts index 747dccec..ebea5b05 100644 --- a/packages/frontend/src/hooks/useJoinRoom.ts +++ b/packages/frontend/src/hooks/useJoinRoom.ts @@ -16,10 +16,10 @@ export default function useJoinRoom() { if (!userId || !socket || !signalingSocket) return; socket.emit('join_room', { gsid }); - signalingSocket.emit('join_room', { gsid }); socket.on('join_room_success', (data) => { setRoomData(gsid, data.isHost, false); setAllUsers(data.userIds); + signalingSocket.emit('join_room', { gsid }); navigate(`/game/${gsid}`); }); From 30a53e5c3216a6750ad9f89524cf9e245a6bcd1e Mon Sep 17 00:00:00 2001 From: today-is-first Date: Mon, 2 Dec 2024 14:00:48 +0900 Subject: [PATCH 2/3] =?UTF-8?q?feat:=20Socket.io=20disconnect=20=EC=9D=B4?= =?UTF-8?q?=EB=B2=A4=ED=8A=B8=20=EB=B0=9C=EC=83=9D=20=EC=8B=9C=20user=5Fle?= =?UTF-8?q?ft=20=EA=B5=AC=ED=98=84?= MIME-Version: 1.0 Content-Type: text/plain; charset=UTF-8 Content-Transfer-Encoding: 8bit --- packages/backend/signalingServer/src/handlers/handleSocket.ts | 3 +++ 1 file changed, 3 insertions(+) diff --git a/packages/backend/signalingServer/src/handlers/handleSocket.ts b/packages/backend/signalingServer/src/handlers/handleSocket.ts index 429e18e8..8ca4aff0 100644 --- a/packages/backend/signalingServer/src/handlers/handleSocket.ts +++ b/packages/backend/signalingServer/src/handlers/handleSocket.ts @@ -3,6 +3,9 @@ import { SOCKET_MESSAGES } from '@/constants/socketConstants'; const handleSocket = (socket: Socket) => { socket.on('disconnect', () => { + socket + .to(socket.data.gsid) + .emit('user_left', { fromUserId: socket.id, gsid: socket.data.gsid }); console.log(SOCKET_MESSAGES.disconnect); }); }; From c29c46c82e47838a5e9ca1b05c0db8232021ed2d Mon Sep 17 00:00:00 2001 From: today-is-first Date: Mon, 2 Dec 2024 14:27:14 +0900 Subject: [PATCH 3/3] =?UTF-8?q?feat:=20=ED=83=AD=EC=9C=BC=EB=A1=9C=20?= =?UTF-8?q?=EB=82=98=EA=B0=80=EB=A9=B4=20=EB=B0=94=EB=A1=9C=20=EB=82=98?= =?UTF-8?q?=EA=B0=80=EC=A7=80=EB=8A=94=20=EA=B8=B0=EB=8A=A5=20=EA=B5=AC?= =?UTF-8?q?=ED=98=84?= MIME-Version: 1.0 Content-Type: text/plain; charset=UTF-8 Content-Transfer-Encoding: 8bit --- .../signalingServer/src/handlers/handleSocket.ts | 11 ++++++----- .../frontend/src/states/store/peerConnectionStore.ts | 2 +- .../frontend/src/states/store/signalingSocketStore.ts | 10 +++++++++- 3 files changed, 16 insertions(+), 7 deletions(-) diff --git a/packages/backend/signalingServer/src/handlers/handleSocket.ts b/packages/backend/signalingServer/src/handlers/handleSocket.ts index 8ca4aff0..d090f4b2 100644 --- a/packages/backend/signalingServer/src/handlers/handleSocket.ts +++ b/packages/backend/signalingServer/src/handlers/handleSocket.ts @@ -1,12 +1,13 @@ import { Socket } from 'socket.io'; -import { SOCKET_MESSAGES } from '@/constants/socketConstants'; const handleSocket = (socket: Socket) => { socket.on('disconnect', () => { - socket - .to(socket.data.gsid) - .emit('user_left', { fromUserId: socket.id, gsid: socket.data.gsid }); - console.log(SOCKET_MESSAGES.disconnect); + socket.to(socket.data.gsid).emit('disconnect_event', { + fromUserId: socket.data.userId, + gsid: socket.data.gsid, + }); + socket.leave(socket.data.gsid); + console.log('[Server][🔔] disconnect_event', socket.data.userId, socket.data.gsid); }); }; diff --git a/packages/frontend/src/states/store/peerConnectionStore.ts b/packages/frontend/src/states/store/peerConnectionStore.ts index fa828749..6da4c5d7 100644 --- a/packages/frontend/src/states/store/peerConnectionStore.ts +++ b/packages/frontend/src/states/store/peerConnectionStore.ts @@ -71,7 +71,7 @@ export const usePeerConnectionStore = create((set, get) => peerConnection.onconnectionstatechange = () => { const state = peerConnection.connectionState; console.log(`[Client][🎥] 연결 상태 (${fromUserId}):`, state); - if (state === 'closed' || state === 'failed') { + if (state === 'closed' || state === 'failed' || state === 'disconnected') { get().removePeerConnection(fromUserId); get().removeRemoteStream(fromUserId); } diff --git a/packages/frontend/src/states/store/signalingSocketStore.ts b/packages/frontend/src/states/store/signalingSocketStore.ts index 1740f537..7b1d4d4e 100644 --- a/packages/frontend/src/states/store/signalingSocketStore.ts +++ b/packages/frontend/src/states/store/signalingSocketStore.ts @@ -148,7 +148,15 @@ export const useSignalingSocketStore = create((set, get) console.log('[Client][📢] user_left', fromUserId); }); - console.log('[Client][🔔] setupEventHandlers'); + signalingSocket.on('disconnect_event', async ({ fromUserId, gsid }) => { + const peerConnections = usePeerConnectionStore.getState().peerConnections; + const peerConnection = peerConnections.get(fromUserId)?.connection; + if (!peerConnection) return; + await peerConnection.close(); + removePeerConnection(fromUserId); + removeRemoteStream(fromUserId); + console.log('[Client][📢] disconnect_event', fromUserId, gsid); + }); }, removeEventHandlers: () => {