Feature : disconnecting 이벤트 발생 및 클라이언트 수신 및 핸들

상세:
- 서버에서 소켓의 disconnecting 이벤트가 발생할 경우 sendLeftPlayer 이벤트 룸전체로 발생
- 만약 disconnecting 이벤트 발생자가 스트리머일 경우 set를 끝내고 시작
- 클라이언트에서 sendLeftPlayer 이벤트를 수신할 경우 해당 플레이어를 webRTC에서 closeConnection
- remotePlayers에서 삭제
- view로 전달할 viewPlayerList를 생성

#294

client/src/service/ClientManager.js

@@ -2,6 +2,7 @@ import io from 'socket.io-client';
 import GameManager from './GameManager';
 import StreamingManager from './StreamingManager';
 import ChattingManager from './ChattingManager';
+import { makeViewPlayerList } from '../utils';
 
 class ClientManager {
   constructor() {
@@ -13,7 +14,7 @@ class ClientManager {
       score: 0,
     };
     /** @todo 이후에 지워야 할 사항. 개발용 */
-    this.socket = io('localhost:3001');
+    this.socket = io(`${window.location.hostname}:3001`);
     this.remotePlayers = {};
     this.gameManager = new GameManager(
       this.socket,
@@ -29,6 +30,19 @@ class ClientManager {
 
   registerSocketEvents() {
     this.socket.on('sendSocketId', this.sendSocketIdHandler.bind(this));
+    this.socket.on('sendLeftPlayer', this.sendLeftPlayerHandler.bind(this));
+  }
+
+  sendLeftPlayerHandler({ socketId }) {
+    try {
+      this.streamingManager.closeConnection(socketId);
+      delete this.remotePlayers[socketId];
+      /** @todo chatting manager 핸들링 */
+      /** @todo view로 dispatch 필요 */
+      makeViewPlayerList(this.localPlayer, this.remotePlayers);
+    } catch (e) {
+      console.log('someone left');
+    }
   }
 
   sendSocketIdHandler({ socketId }) {

client/src/service/StreamingManager.js

@@ -81,10 +81,15 @@ class StreamingManager {
 
   trackHandler(stream) {
     /** @todo 추후 view의 dispatch 연결 */
+    // eslint-disable-next-line
     console.log(this.dispatch);
     document.querySelector('video').srcObject = stream;
     // this.dispatch({ type: 'setStream', payload: { stream } });
   }
+
+  closeConnection(socketId) {
+    this.webRTCManager.closeConnection(socketId);
+  }
 }
 
 export default StreamingManager;

server/socket/handlers/disconnectingHandler.js

@@ -1,7 +1,16 @@
 const rooms = require('../rooms');
+const { endSet, startSet, isGameContinuable } = require('../gameController');
 
 const disconnectingHandler = socket => {
+  const room = rooms.getRoomByRoomId(socket.roomId);
+  socket.to(socket.roomId).emit('sendLeftPlayer', { socketId: socket.id });
   rooms.removePlayerBySocket(socket);
+  if (!isGameContinuable(socket)) {
+    /** @todo 게임종료 로직 필요 */
+  } else if (socket.id === room.streamerSocketId) {
+    endSet(socket.roomId);
+    startSet(socket.roomId);
+  }
   socket.leave(socket.roomId);
 };