issue#98 페이지 언마운트 시 웹소켓 연결 해제

[Catleap02]

📝 상세 내용

• 페이지 언마운트 시 웹소켓 연결 해제
• socket 로직, 함수 instance로 분리

언마운트 시 웹소켓 연결 해제를 하기 위해 코드를 보니 중복 구독 문제가 있었습니다. stomp client를 chat page 내에 여러 useEffect 훅 내에서 선언하여 구독, 연결, 해제 로직을 쓰다 보니, stomp client의 현재 상태가 제대로 반영되지 않는 문제가 있었습니다.
그래서 코드의 구조를 전체 수정했습니다. 하나의 stomp client 객체로 관리하고, 이와 구독 로직들을 함수로 만들어 ws instance로 분리하였습니다. 이로 인해 stomp client 객체 하나만 관리돼서 문제 없이 연결, 해제가 가능합니다.

ws instance로 웹소켓 함수들을 분리하는 과정에서 소켓에서 구독하는 roomUserList, userList 들이 subscribeToRoom 콜백 내부에 있어서 채팅방의 채팅 메세지가 도착할 때만 실행되는 문제가 있어서 콜백 밖으로 분리하여서, 이제 /topic/users와 /topic/room-users 토픽으로 메세지가 올 때마다 실시간으로 전체 사용자 목록, 방 사용자 목록이 반영되도록 수정했습니다.

#️⃣ 이슈 번호

• resolve [기능 수정] 채팅 페이지 벗어나면 웹소켓 연결 해제하도록 #98

💬 리뷰 요구사항

⏰ 현재 버그

📷 스크린샷(선택)

이처럼 홈으로 가게 되면, 웹소켓 연결 해제가 문제 없이 됩니다.

🔗 참고 자료(선택)