개요

• 양방향 통신을 위해서 webSocket을 사용하기로 결정했다.
• webSocket을 더 편하게 사용하기 위해 socket.io라는 라이브러리를 사용하기로 결정함.
  • socket.io를 사용하면, 소켓으로 연결된 유저 관리 용의
    • namespace, room 사용
    • 해당 룸에 속한 유저들에게 브로드캐스팅해야 할 상황이 있음.
  • webSocket이 없는 브라우저의 경우 long polling 방법을 알아서 사용해줌.

socket.io를 사용하기로 결정한 상황에서 재연결은 어떻게 이뤄지는지 알아보자.

1. socket.io는 engine.io 위에 구축되어 있다.

2. 연결을 확인하는 메커니즘인 heartbeat는 이 engine.io에서 일어난다.

3. http 프로토콜로 handshake 과정이 일어난 후에 engine.io가 heartbeat 매커니즘으로 연결 상태를 확인한다.

   

   key	유형	설명
   sid	string	세션 id
   upgrades	string[]	사용할 서브 프로토콜 종류
   pingInterval	number	하트비트 메커니즘에 사용되는 핑 시간 간격 (ms)
   pingTimeout	number	하트비트 메커니즘에 사용되는 핑 시간 제한 (ms)
   maxPayload	number	청크당 최대 바이트 수

   • upgrades
     • 서브 프로토콜을 설정할 수 있다.
     • 앞쪽이 우선순위를 갖는다.
   • 사용 예시

   {
     "sid": "lv_VI97HAXpY6yYWAAAC",
     "upgrades": ["websocket"],
     "pingIntpierval": 25000, 
     "pingTimeout": 20000,
     "maxPayload": 1000000
   }
   

socket.io의 재연결 검증

• 서버에서 연결을 끊고 다시 연결됐을 경우

  • 다른 식별자를 가진 socket이 자동으로 생성되는 것을 확인할 수 있다.

  화면 기록 2023-11-24 오후 7.00.48.mov

• 클라이언트 네트워크가 끊겼다가 다시 연결 됐을 경우

  • 서버에게 소켓 연결이 끊겼다는 이벤트가 전달됨.
  • 네트워크 연결 시에 다른 식별자를 가진 socket이 자동으로 생성되는 것을 확인할 수 있다.

  화면 기록 2023-12-03 오후 4.25.30.mov

결론

• engine.io에서 재연결과 관련된 모든 작업을 대신 처리해준다.

• 아래의 해당 옵션 정도만 설정이 필요함.

   "pingIntpierval": 25000, 
   "pingTimeout": 20000,