완성도 높이기... socket.io

현재 문제점

• 방장이 새로고침 등 소켓의 disconnect 이벤트를 일으켰을 때, 방이 삭제되지 않는 문제가 있다.

해결 : socket.io에 대한 이해

유저가 socket에 연결되면 아래와 같은 동작이 실행됨

1. 자동으로 io.on("connection") 이벤트에 걸리게 되고, "socket"이 만들어짐

   • socket에는 broadcast, emit, on과 같은 메소드들과 고유의 id값이 자동으로 부여됨

   <aside> 💡 몇 가지 유용한 메소드들

   • socket.on: 이벤트 리스너를 정의할 수 있음
   • socket.emit: 특정 이벤트를 발생시킬 수 있음
   • socket.broadcast.to(roomId): 자신을 제외하고, roomId에 있는 모든 소켓에게 전달
   • socket.id: 해당 소켓의 고유한 id
   • socket.join: socket.id를 특정 roomId로 소속시킴
   • socket.leave: 소속된 socket에서 socket.id를 지움

   </aside>

   <aside> 💡 특정 socket이 소속된 모든 room 보기 socket.adapter.rooms ⇒ Map 형태

   </aside>

   

   <aside> 💡 특정 room에 연결된 모든 socket 보기 io.sockets.adapter.rooms.get(roomId) ⇒ Set 형태

   </aside>

   

2. "socket"을 전달받은 콜백이 실행됨

   • 콜백 안에서 다양한 socket 이벤트를 정의해둘 수 있음

3. 자기 id로 된 socket room은 자동으로 생성되고, 의도적으로 특정 roomId를 줘서 roomId를 key로 하는 socket room을 생성시킬 수 있다.

io.on("connection", (socket) => {
  // socket과 관련된 이벤트들
});

생성된 socket들을 같은 방에 묶기

• join-room 이벤트를 열어두고, 이벤트가 발생할 때 roomId를 받도록 한다.
• socket.join(roomId)를 통해서 해당 roomId를 key로 하는 방에 소켓들을 묶어둘 수 있다.
  • 해당 roomId로 된 socket Room이 없으면 자동으로 새로 생성한다.

io.on("connection", (socket) => {
  socket.on("join-room", (roomId, playerData) => {
    socket.join(roomId);
	});
});

disconnect와 leave

• disconnect (예약어)
  • socket이 기본으로 가지고 있는 이벤트이다.
  • socket이 새로고침, 강제 종료, 인터넷 끊김 등 연결이 끊어졌을 때 발생하는 이벤트이다.

socket.on("disconnect", () => {
  socket.broadcast.to(roomId).emit("player-disconnected", playerData);
});

• leave (이름 바꿀 수 있음)
  • 개발자가 catch할 수 있도록 만들어 둔 이벤트이다.
  • react에서 사용자가 unmount되었을 때 발생되도록 하면 된다.

<aside> 💡 leave 이벤트는 별도로 설정한 이벤트이기 때문에 socket.leave()를 통해서 socket에서도 제거해줘야한다. 그렇지 않으면 클라이언트 화면에서는 방을 나갔지만, socket은 계속 남아있게 된다.

</aside>