01 · Concept

WebSocket vs SSE (Server-Sent Events)

실시간 통신을 위한 두 가지 접근 방식을 비교합니다. WebSocket은 양방향, SSE는 서버에서 클라이언트로의 단방향 스트리밍을 제공합니다.

전통적인 HTTP는 요청-응답 모델입니다. 서버가 클라이언트에게 먼저 데이터를 보낼 수 없죠. 이를 해결하기 위해 WebSocket SSE (Server-Sent Events)가 등장했습니다. WebSocket은 양방향 전이중 통신을, SSE는 서버→클라이언트 단방향 스트리밍을 제공합니다. ChatGPT의 응답 스트리밍이 SSE를 사용하는 대표적인 예입니다.

02 · Interactive Demo

실시간 통신 시뮬레이션

WebSocket과 SSE의 메시지 흐름을 시각적으로 비교해보세요. 시뮬레이션을 실행하여 양방향/단방향 차이를 확인하세요.

Connection Flow
1클라이언트 → HTTP Upgrade 요청
2서버 → 101 Switching Protocols 응답
3TCP 연결 위에 WebSocket 프레임 교환
4양쪽 모두 자유롭게 메시지 전송 가능
Message Flow Simulation
Client
ws://
양방향
Server
시뮬레이션을 시작하세요
통신 방향
양방향 (Full-Duplex)
프로토콜
ws:// / wss://
03 · Code Example

코드 예시

실제 코드로 동작 원리를 확인하세요.

// WebSocket 클라이언트 연결
const ws = new WebSocket('wss://api.example.com/chat');

// 연결 성공
ws.onopen = () => {
  console.log('연결됨!');
  ws.send(JSON.stringify({
    type: 'join',
    room: 'chat-1'
  }));
};

// 메시지 수신
ws.onmessage = (event) => {
  const data = JSON.parse(event.data);
  console.log('받은 메시지:', data);
};

// 연결 종료
ws.onclose = (event) => {
  console.log(`연결 종료: ${event.code} ${event.reason}`);
};

// 메시지 전송 (양방향!)
ws.send(JSON.stringify({ type: 'msg', text: '안녕!' }));
04 · Interview Point

면접 핵심 질문

WebSocketws:// 프로토콜을 사용하는 양방향(Full-Duplex) 통신입니다. 클라이언트와 서버가 자유롭게 메시지를 주고받을 수 있습니다.

SSE는 HTTP 기반의 단방향(서버→클라이언트) 스트리밍입니다. EventSource API로 서버가 보내는 이벤트를 수신합니다. SSE는 자동 재연결이 내장되어 있고, 기존 HTTP 인프라를 그대로 활용할 수 있어 구현이 간단합니다. 반면 WebSocket은 양방향 통신이 가능하지만 직접 재연결 로직을 구현해야 합니다.
WebSocket: 채팅, 실시간 게임, 공동 편집 등 클라이언트도 서버에 빈번하게 데이터를 보내야 하는 경우에 적합합니다.

SSE: 실시간 알림, 주식 시세, AI 응답 스트리밍 등 서버에서 클라이언트로 일방적으로 데이터를 푸시하는 경우에 적합합니다. ChatGPT의 응답 스트리밍도 SSE를 사용합니다.

선택 기준: 클라이언트가 서버에 자주 데이터를 보내야 하면 WebSocket, 서버의 이벤트를 수신만 하면 SSE를 선택합니다.
Long Polling은 클라이언트가 HTTP 요청을 보내고, 서버가 새 데이터가 있을 때까지 응답을 보류하는 방식입니다. 데이터가 오면 응답 후 클라이언트가 즉시 다시 요청합니다.

문제점: 매 응답마다 HTTP 헤더 오버헤드가 발생하고, 서버가 대기 연결을 유지해야 하므로 리소스가 낭비됩니다.

WebSocket/SSE는 하나의 연결을 유지하며 데이터를 주고받으므로 헤더 오버헤드가 없고 지연 시간이 안정적입니다. Long Polling은 WebSocket/SSE를 사용할 수 없는 환경에서의 폴백(Fallback) 용도로 사용합니다.