Websocket 연결 과정

Websocket

HTTP가 가진 요청-응답 구조의 한계를 보완하기 위해 서버-클라이언트 간 양방향 통신을 지원하는 프로토콜이다.

 

Websocket 연결 과정

 

1. HTTP Handshake

- 클라이언트가 HTTP 요청으로 Websocket 연결 요청

- Upgrade: websocket (프로토콜을 전환하기 위해 사용하는 헤더)

- Connection: Upgrade (현재의 전송이 완료된 후 네트워크 접속을 유지할 것인가에 대한 정보)

 

2. HTTP 101 Response

- 프로토콜 전환 요청 수락 응답

- HTTP에서 websocket으로 전환

 

3. 양방향 데이터 통신

- 메시지 단위 통신

- 텍스트(JSON 등)나 바이너리 데이터를 실시간으로 주고받음

 

4. Close Frame

- 서버, 클라이언트 둘 다 전송 가능

 

클라이언트 코드

import { Client } from "@stomp/stompjs";

export const createStompClient = (token: string) => {
  // 1. 소켓 URL 설정
  const socketUrl = `wss://api.example.com/ws-chat?token=${token}`;

  // 2. STOMP 클라이언트 생성
  const client = new Client({
    // 웹소켓 실제 연결 시도
    webSocketFactory: () => new WebSocket(socketUrl),
    
    // 연결 성공 시 실행할 로직
    onConnect: () => {
      console.log("STOMP 연결 성공");
      // client.subscribe(...) 등 구독 로직 위치
    },

    // (선택) 연결 끊김 시 재연결 대기 시간 (ms)
    reconnectDelay: 5000,
  });

  return client;
};

useEffect(() => {
  if (!roomId) return;

  // 1. 클라이언트 생성 (앞서 만든 함수 사용)
  const client = createStompClient("ACCESS_TOKEN");

  // 2. 연결 성공 시 실행될 로직
  client.onConnect = () => {
    // 특정 주제(Topic) 구독: 이 주소로 데이터가 오면 콜백 함수가 실행됨
    client.subscribe(`/topic/room/${roomId}/presence`, (message) => {
      const data = JSON.parse(message.body);
      
      // 실시간 데이터로 화면 업데이트
      setParticipantCount(data.participantCount);
    });
  };

  // 3. 웹소켓 연결 시작 (Handshake)
  client.activate();

  // 4. 컴포넌트 언마운트 시 연결 종료
  return () => {
    client.deactivate();
  };
}, [roomId]);

 

참고

https://buly.kr/5q8cEWo