공부

Web Socket

웹 어플리케이션에서 실시간 양방향 통신을 가능하게 하는 통신 프로토콜

기존 http로 client와 server가 상호작용 할 때는 단방향 통신임 (client에서 server에 요청을 보내면, server는 client에게 요청에 대한 결과 반환) 만약 단방향으로 채팅을 구현한다면, 일정 주기마다 요청을 보내서 새로운 채팅이 있는지 확인 필요

web socket으로 문제 해결 가능

web socket은 TCP 기반으로 client와 server가 양방향 통신을 할 수 있도록 지원 이벤트를 중심으로 응답을 받는 상호작용 가능

연결 과정

먼저 client에서 server로 web socket을 사용한다는 http 요청 보내기
이후 서버에서 http 요청을 web socket으로 업그레이드해줌 (이 시점부터 양방향 통신 시작)

STOMP

Streaming Text Oriented Messaging Protocol로, 텍스트 기반의 메시징 프로토콜
다양한 언어 및 플랫폼 간의 상호 운용성 지원 (spring에서 주로 사용됨)
header가 포함되어 보다 다양한 정보들을 수신할 수 있음 이는 통신 시에 인증 처리가 가능하다는 stomp의 가장 큰 이점

일반적으로 stomp를 사용하여 client와 server 간의 통신을 할 때 web socket이 양방향 통신을 지원하기 때문에 stomp와의 효율적인 통신 가능 따라서 stomp는 web socket 위에서 동작

🆚 sockjs-client, 일반 WebSocket 차이점

구분	`sockjs-client`	WebSocket (`brokerURL`)
브라우저 호환	WebSocket을 지원하지 않는 브라우저에서도 fallback 제공	최신 브라우저에서만 작동
설정 방법	`webSocketFactory`로 SockJS 인스턴스를 생성	`brokerURL`에 직접 WebSocket URL 입력
장점	안정성 높음
(fallback, reconnect, load balancer 우회)	설정 간단
용도	실서비스에 적합	개발 테스트나 웹소켓 지원 브라우저에만 적합

SockJS를 사용하는 방식이 훨씬 호환성과 안정성이 좋기 때문에 실제 배포용 서비스에서는 SockJS 방식을 사용하는 걸 추천

WebSocket 연결 코드 예시 (sockjs-client 사용)

import { Client } from '@stomp/stompjs'
import SockJS from 'sockjs-client'

const client = new Client({
  webSocketFactory: () => new SockJS('/ws'), // 이 부분이 핵심
  reconnectDelay: 5000,
  onConnect: () => {
    client.subscribe(`/topic/chat/room/${roomId}`, (message) => {
      const msg = JSON.parse(message.body)
      setMessages((prev) => [...prev, msg])
    })
  },
})

WebSocket 연결 코드 예시 (brokerURL 사용)