Merge pull request #211 from boostcampwm-2024/feature/#210

[Feat] 방 제한 인원 / 탭 연결 끊었을 때 나가기 기능 구현
boostcampwm-2024 · Dec 2, 2024 · 261717f · 261717f
2 parents 67ae5cc + c29c46c
commit 261717f
Show file tree

Hide file tree

Showing 5 changed files with 24 additions and 6 deletions.
diff --git 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/backend/signalingServer/src/handlers/handleSocket.ts b/packages/backend/signalingServer/src/handlers/handleSocket.ts
@@ -1,9 +1,13 @@
 import { Socket } from 'socket.io';
-import { SOCKET_MESSAGES } from '@/constants/socketConstants';
 
 const handleSocket = (socket: Socket) => {
   socket.on('disconnect', () => {
-    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/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}`);
     });
 

diff --git a/packages/frontend/src/states/store/peerConnectionStore.ts b/packages/frontend/src/states/store/peerConnectionStore.ts
@@ -71,7 +71,7 @@ export const usePeerConnectionStore = create<IPeerConnectionState>((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
@@ -148,7 +148,15 @@ export const useSignalingSocketStore = create<ISignalingSocketStore>((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: () => {