웹소켓을 통한 실시간 채팅방 연결은 Swagger에서 문서화되지 않아 노션에 문서화하였습니다.

만일 오류가 있을시 @정대식 에게 알려주세요~

개요

- 전송 방식: STOMP over WebSocket (SockJS 폴백 지원)
- 기본 WebSocket 엔드포인트: `ws(s)://{host}/ws-chat`
- 애플리케이션 목적지 프리픽스: `/app`
- 브로드캐스트 목적지 프리픽스: `/topic`
- 모든 메시지는 JSON 포맷을 사용합니다.

흐름

1. 클라이언트가 /ws-chat으로 SockJS(또는 native WebSocket) 연결을 맺습니다.
   • WebSocket 핸드셰이크는 HTTP GET 업그레이드 요청으로 진행되며, 추가 요청 바디나 쿼리 파라미터를 요구하지 않습니다.
2. STOMP 클라이언트를 초기화하고 CONNECT 프레임을 보냅니다.
3. 채팅방 수신을 위해 /topic/chat/{roomId}를 구독합니다.
4. 메시지를 전송할 때는 /app/api/v1/chat/{roomId} 목적지로 STOMP SEND 프레임을 보냅니다.
5. 서버는 해당 채널을 구독 중인 모든 클라이언트에게 ChatMessageResponse를 브로드캐스트합니다.

JS 예시

import SockJS from "sockjs-client";
import Stomp from "stompjs";

const socket = new SockJS("https://{host}/ws-chat");
const stomp = Stomp.over(socket);

// 웹소켓 연결 시도
stomp.connect({}, () => {
  const roomId = 1;
	
	// 웹소켓 채널(메시지를 주고 받을 수 있는 통로) 구독
	// 해당 채널을 구독하는 사람들은 메시지를 받을 수 있습니다.
  stomp.subscribe(`/topic/chat/${roomId}`, (frame) => {
    const message = JSON.parse(frame.body);
    console.log("incoming", message);
  });

	// 해당 채널로 메시지 전송
  stomp.send(`/app/api/v1/chat/${roomId}`, {}, JSON.stringify({
    senderId: 42,
    content: "안녕하세요!"
  }));
});

해당 기능을 html로도 테스트해보았습니다.

chat-test.html

추가로..