feat: 탭으로 나가면 바로 나가지는 기능 구현

boostcampwm-2024 · Dec 2, 2024 · c29c46c · c29c46c
1 parent 30a53e5
commit c29c46c
Show file tree

Hide file tree

Showing 3 changed files with 16 additions and 7 deletions.
diff --git 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
@@ -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: () => {