판매자와 구매자 간 실시간 채팅 기능 구현

구현 방식

• STOMP 메시징 프로토콜 기반의 실시간 채팅 기능 구현 🔗 채팅방 페이지 Code Link

STOMP

• Simple Text Oriented Messaging Protocol
• 간단한 텍스트 기반의 메시징 프로토콜
• 메시징 시스템 간에 데이터를 교환하는 데 사용

선정 이유

1. 양방향 통신

• 중고 거래라는 도메인 특성 상 채팅 알림 기능과 같이 추후에 애플리케이션 전반적으로 실시간 기능이 중요하다고 판단 → WebSocket 기반으로 양방향 통신을 지원하고자 함

2. 호환성

• STOMP는 다양한 언어와 플랫폼 간에 상호 운용이 쉽도록 설계되어 있어 React 기반의 클라이언트와 Spring 기반의 백엔드 서버로 구현된 서비스에 적합하다고 판단

3. 클라이언트-서버 통신 API 제공

• 주로 메시지 큐 시스템과 웹 애플리케이션 간의 통신 지원
• Pub-Sub 기능을 제공하여 클라이언트는 메시지를 큐에 전송하고, 다른 클라이언트는 해당 큐에서 메시지를 구독하는 방식으로 간편하게 실시간 통신

구현 과정 고민

• 🔗 Issue Link
• 🔗 PR Link

채팅방 생성 전후 채팅 상세 페이지 이동 플로우

1. 기존 채팅방 존재 여부 조회

2. 기존 채팅방이 있는 경우

• 이전 채팅 내역 조회
• 실시간 채팅을 위한 STOMP Client 생성

3. 기존 채팅방이 없는 경우

• 3-1. 첫 메시지를 보내기 전
  • 채팅방 페이지로 이동하되, 첫 메시지를 발송하기 전에는 실제로 채팅방이 생성되지 않음
• 3-2. 첫 메시지 전송
  • 채팅방 생성 요청
  • 성공 시 응답으로 생성된 채팅방 id으로 STOMP Client 생성 및 연결
• 3-2. 첫 메시지 이후 메시지 전송
  • 연결된 STOMP Client를 통해 실시간 통신

핵심 트러블 슈팅

• 채팅방 id 상태에 따른 STOMP Client 생성