WebSocket이란?

WebSocket은 웹 앱과 서버 간의 지속적인 연결을 제공하는 프로토콜입니다. 이를 통해 서버와 클라이언트 간에 양방향 통신이 가능해집니다. HTTP와는 달리, WebSocket 연결은 한 번 열린 후 계속 유지되므로, 서버나 클라이언트에서 언제든지 데이터를 전송할 수 있습니다.

WebSocket의 특징?

1. 실시간 통신: 웹 애플리케이션에서 실시간 업데이트가 필요한 경우, WebSocket을 사용할 수 있습니다. 예를 들어, 채팅, 주식 거래 플랫폼, 게임, 라이브 스코어 보드 등에서 실시간 통신이 필수적입니다.

2. 효율성: 지속적인 연결을 통해 데이터를 교환할 때 발생하는 오버헤드(프로그램의 실행흐름에서 나타나는 현상)가 줄어듭니다.

3. 서버에서 클라이언트로의 푸시: WebSocket을 사용하면 서버에서 클라이언트로 직접 데이터를 푸시할 수 있습니다. 이는 클라이언트가 지속적으로 서버에 폴링을 하지 않아도 되므로, 리소스 사용을 최소화하고 반응성을 향상시킵니다.

   • 폴링이란?
     하나의 장치(또는 프로그램)가 충돌 회피 또는 동기화 처리 등을 목적으로 다른 장치(또는 프로그램)의 상태를 주기적으로 검사하여 일정한 조건을 만족할 때 송수신 등의 자료처리를 하는 방식을 말한다

4. 낮은 지연 시간: WebSocket 연결은 초기 핸드쉐이크(통신에서 연결을 설정하기 위한 과정)가 완료된 후에는 지속적으로 열려 있으므로, 데이터 전송에 필요한 지연 시간이 크게 줄어듭니다.

5. 양방향 통신: 클라이언트와 서버 모두에서 데이터를 송신하고 수신할 수 있습니다. 이는 HTTP의 단방향 요청-응답 모델과는 대조적입니다.

6. 유연성: WebSocket은 포트 80 및 443을 통해 통신하므로, 대부분의 방화벽 및 프록시 서버에서 차단되지 않습니다.

React에서 WebSocket 사용

WebSocket 연결 생성

const [messages, setMessages] = useState<string[]>([]);
const webSocket = useRef<WebSocket | null>(null);

useEffect(() => {
  webSocket.current = new WebSocket('wss://websocket-url');
  webSocket.current.onopen = () => {
    console.log('WebSocket 연결!');    
  };
  webSocket.current.onclose = (error) => {
    console.log(error);
  }
  webSocket.current.onerror = (error) => {
    console.log(error);
  }
  webSocket.current.onmessage = (event: MessageEvent) => {   
    setMessages((prev) => [...prev, event.data]);
  };

  return () => {
    webSocket.current?.close();
  };
}, []);

메시지 전송

send 메서드를 사용하여 서버에 메시지를 전송할 수 있습니다.

const sendMessage = (message) => {
  if (webSocket.current.readyState === WebSocket.OPEN) {
    webSocket.current.send(message);
  }
};

메시지 표시

React 컴포넌트 내에서 messages 상태를 사용하여 수신된 메시지를 표시합니다.

return (
  <div>
    {messages?.map((message, index) => (
      <div key={index}>{message}</div>
    ))}
  </div>
);

주의 사항

1. 재연결: 서버나 네트워크에 문제가 발생할 경우 WebSocket 연결이 끊어질 수 있습니다. 이러한 상황에 대비하여 재연결 로직을 구현하는 것이 좋습니다.

2. 보안: wss (WebSocket Secure)를 사용하여 암호화된 연결을 활용해야 합니다.
   2-1. ws(WebSocket)
   - HTTP와 유사하게 암호화되지 않은 연결을 나타냅니다.
   - 데이터 전송 중 중간에서 정보를 가로챌 수 있는 위험이 있습니다.
   2-2. wss(WebSocketSecure)
   - HTTPS와 유사하게 암호화된 연결을 나타냅니다. 데이터는 TLS (전송 계층 보안) 또는 그 전신인 SSL (보안 소켓 계층)을 사용하여 암호화됩니다.
   - 중간자 공격 (Man-in-the-Middle, MitM)으로부터 안전하게 데이터를 전송할 수 있습니다.

reference
https://developer.mozilla.org/ko/docs/Web/API/WebSockets_API
https://ko.javascript.info/websocket
https://youtu.be/yXPCg5eupGM
https://pakss328.medium.com/%EB%8D%B0%EC%9D%B4%ED%84%B0-%ED%86%B5%EC%8B%A0-%EB%B0%A9%EC%8B%9D-realtime-push-polling-4cdb696fb7ad
https://change-words.tistory.com/entry/Network-Handshake