크롬과 엣지의 웹소켓 연결/해제 순서 문제 분석

안녕하세요 🐸

Node.js 강의를 들으면서 웹소켓에 대해 공부 중 이상한 문제를 만났습니다.

배경 상황

/chat , /room 으로 나뉘어진 네임스페이스가 있다.
각각 /chat 은 채팅방에 연결되는 소켓을 관리하고
/room 은 채팅방 목록에 연결되는 소켓을 관리한다.
채팅방에서 모든 유저가 방을 나가면 해당 방은 삭제되고 사용자는 메인페이지로 이동한다. 그리고 채팅방이 없어졌음을 /room 에 알려 채팅방 목록에서 해당 채팅방을 제거한다.

문제

크롬에서는 채팅방의 마지막 사용자가 방을 나갈 때 방이 사라지지 않는다.
하지만 엣지에서는 정상적으로 사라진다.

원인

크롬과 엣지 등의 브라우저가 페이지 이동을 처리하는 방식의 차이가 있다.
각각의 브라우저에서 페이지 전환과 소켓 연결/해제 순서는 아래와 같았다.

크롬

1. 메인페이지로 이동
2. DB의 채팅방 목록 조회 후 화면에 랜더링
3. /chat 소켓 연결 해제
4. DB에서 채팅방 삭제
5. /room 으로 제거된 채팅방 아이디 전달
6. 클라이언트가 /room 네임스페이스에 연결

   엣지

7. 메인페이지로 이동
8. DB의 채팅방 목록 조회 후 화면에 랜더링
9. 클라이언트가 /room 네임스페이스에 연결
10. /chat 네임스페이스 연결 해제
11. DB에서 채팅방 삭제
12. /room 으로 제거된 채팅방 아이디 전달

해결

채팅방 목록의 조회를 웹소켓 연결 후로 변경하여 사용자가 최신 정보를 받을 수 있도록 수정