관련 PR : https://github.com/urdego/Urdego_Frontend/pull/149

• 웹소켓 코드
• ENGLISH TRANSLATION

개요

이 코드는 웹소켓을 통해 서버에서 실시간 알림 메시지를 수신하고, 이를 UI에 반영하는 기능을 구현하고 있습니다. 웹소켓 연결 관리, 구독 등록, 그리고 메시지 처리 로직이 각각 분리되어 있어 유지보수와 확장이 용이하도록 설계되어 있습니다.

웹소켓 연결 관리 및 pending subscription

• 전역 상태 관리:

  Zustand를 이용하여 웹소켓 클라이언트의 연결 상태를 전역으로 관리합니다. 이 스토어는 웹소켓 연결 여부와 클라이언트 인스턴스를 보관합니다.

• pending subscription 개념:

  웹소켓 연결이 이루어지기 전에 구독 요청을 저장할 수 있도록 pending subscription 기능이 도입되어 있습니다. 이 방식은 연결이 완료되면 저장된 구독 정보를 기반으로 자동으로 재구독을 수행합니다.

실시간 알림 구독 및 메시지 처리 로직

• 구독 함수:

  별도의 훅에서는 사용자 고유 식별자(예: userId)를 기반으로 알림 채널에 구독을 등록합니다.

  • 웹소켓 클라이언트를 통해 정해진 경로로 구독하고, 도착한 메시지는 JSON 형식으로 파싱되어 콜백 함수에 전달됩니다.
  • 에러 메시지에 대해서도 동일한 방식으로 구독을 설정하여 문제 발생 시 적절한 처리가 가능하도록 합니다.

• 메시지 처리:

  수신된 알림 메시지는 특정 타입(예를 들어 초대 메시지)인지 확인한 후, 관련 토스트 알림을 띄워 사용자에게 표시합니다.

  • 초대 메시지의 경우, 사용자가 수락하면 대기방 정보가 전역 상태에 저장되고 해당 대기실로 라우팅되는 후속 조치를 취합니다.
  • 거절 시에는 별도의 처리(서버 API 호출 또는 추가 소켓 이벤트)를 통해 상황에 대응할 수 있도록 구성되어 있습니다.

Home 컴포넌트에서의 활용

• 초기 웹소켓 연결:

  컴포넌트 마운트 시 웹소켓 연결 상태를 확인하고, 연결이 안 되어 있으면 연결을 시도합니다.

• 구독 등록 및 pending subscription 추가:

  사용자 세션에서 가져온 userId를 기준으로 알림 구독을 등록합니다.

  • pending subscription에 등록하여 연결이 복구될 때도 구독이 유지되도록 합니다.
  • 별도로 에러 메시지 구독도 등록하여, 문제가 발생하면 콘솔 로그를 통해 확인할 수 있도록 합니다.

• 알림 처리:

  수신된 알림 메시지가 초대 관련 메시지인 경우, 토스트 알림을 통해 사용자에게 알리고, 사용자의 선택에 따라 대기방 정보 저장과 라우팅 등의 후속 처리를 진행합니다.

결론

이 구조는 웹소켓 연결과 구독, 그리고 메시지 처리 로직을 명확하게 분리하여 관리하고 있습니다. 전역 상태 관리를 통한 pending subscription 기능은 연결이 불안정한 환경에서도 안정적으로 메시지를 처리할 수 있도록 돕습니다. 또한, 실시간 알림 구독과 관련된 로직을 별도의 훅으로 분리함으로써 Home 컴포넌트에서는 UI와 사용자 인터랙션에 집중할 수 있는 구조를 갖추고 있습니다.