WebSocket과 실시간 통신 — SSE, Long Polling과의 차이

setInterval(async () => {
  const res = await fetch('/api/messages');
  if (res.data.length > 0) {
    renderMessages(res.data);
  }
}, 3000); // 3초마다

클라이언트                         서버
    │                               │
    │──── GET /messages ───────────→│
    │           (대기 중...)          │  ← 새 데이터 올 때까지 응답 보류
    │                               │
    │           ...30초 경과...       │
    │                               │
    │←── 200 OK [새 메시지] ────────│  ← 데이터 생기면 그때 응답
    │                               │
    │──── GET /messages ───────────→│  ← 즉시 다음 요청
    │                               │

클라이언트                         서버
    │                               │
    │──── GET /stream ─────────────→│
    │     Accept: text/event-stream  │
    │                               │
    │←── HTTP 200 ─────────────────│
    │     Content-Type: text/event-stream
    │                               │
    │←── data: {"price": 52300}\n\n │  ← 서버가 원할 때 push
    │                               │
    │←── data: {"price": 52450}\n\n │
    │                               │
    │        (연결 유지)              │

const source = new EventSource('/api/notifications');

source.onmessage = (event) => {
  const data = JSON.parse(event.data);
  showNotification(data);
};

source.onerror = () => {
  // 연결 끊기면 브라우저가 자동 재연결
};

클라이언트 → 서버 (HTTP 요청)
GET /chat HTTP/1.1
Host: server.example.com
Upgrade: websocket
Connection: Upgrade
Sec-WebSocket-Key: dGhlIHNhbXBsZSBub25jZQ==
Sec-WebSocket-Version: 13

서버 → 클라이언트 (HTTP 응답)
HTTP/1.1 101 Switching Protocols
Upgrade: websocket
Connection: Upgrade
Sec-WebSocket-Accept: s3pPLMBiTxaQ9kYGzzhZRbK+xOo=

 0                   1                   2                   3
 0 1 2 3 4 5 6 7 8 9 0 1 2 3 4 5 6 7 8 9 0 1 2 3 4 5 6 7 8 9 0 1
+-+-+-+-+-------+-+-------------+-------------------------------+
|F|R|R|R| opcode|M| Payload len |    Extended payload length    |
|I|S|S|S|  (4)  |A|     (7)     |             (16/64)           |
|N|V|V|V|       |S|             |                               |
| |1|2|3|       |K|             |                               |
+-+-+-+-+-------+-+-------------+-------------------------------+
|     Masking-key (0 or 4 bytes)                                |
+-------------------------------+-------------------------------+
|     Payload Data                                              |
+---------------------------------------------------------------+

const ws = new WebSocket('ws://server.example.com/chat');

ws.onopen = () => {
  ws.send(JSON.stringify({ type: 'join', room: 'general' }));
};

ws.onmessage = (event) => {
  const msg = JSON.parse(event.data);
  appendMessage(msg);
};

ws.onclose = (event) => {
  console.log(`연결 종료: ${event.code} ${event.reason}`);
  // 재연결 로직 직접 구현해야 함
};

                    ┌──────────────┐
사용자 A ──SEND──→  │              │ ──MESSAGE──→ 사용자 B
                    │  메시지 브로커  │
사용자 B ──SUBSCRIBE→│  (/topic/chat)│ ──MESSAGE──→ 사용자 C
                    │              │
사용자 C ──SUBSCRIBE→│              │
                    └──────────────┘

@Configuration
@EnableWebSocketMessageBroker
public class WebSocketConfig implements WebSocketMessageBrokerConfigurer {

    @Override
    public void configureMessageBroker(MessageBrokerRegistry config) {
        config.enableSimpleBroker("/topic", "/queue");  // 구독 prefix
        config.setApplicationDestinationPrefixes("/app"); // 전송 prefix
    }

    @Override
    public void registerStompEndpoints(StompEndpointRegistry registry) {
        registry.addEndpoint("/ws")
                .setAllowedOrigins("*")
                .withSockJS(); // WebSocket 미지원 브라우저 폴백
    }
}

@Controller
public class ChatController {

    @MessageMapping("/chat.send")     // /app/chat.send 로 메시지 수신
    @SendTo("/topic/public")           // /topic/public 구독자에게 전달
    public ChatMessage sendMessage(ChatMessage message) {
        return message;
    }
}

// 서버
const io = require('socket.io')(server);

io.of('/chat').on('connection', (socket) => {
  socket.join('room-1');  // 룸 참가

  socket.on('message', (data) => {
    io.of('/chat').to('room-1').emit('message', data); // 룸에 브로드캐스트
  });
});

사용자 A ──── WS 연결 ──→ 서버 1
사용자 B ──── WS 연결 ──→ 서버 2

A가 B에게 메시지 전송 → 서버 1이 받음 → 근데 B는 서버 2에 연결돼 있음

사용자 A ── 서버 1 ──┐
                      ├── Redis Pub/Sub ── 모든 서버에 브로드캐스트
사용자 B ── 서버 2 ──┘

1. A가 서버 1에 메시지 전송
2. 서버 1이 Redis에 PUBLISH
3. 서버 2가 SUBSCRIBE하고 있다가 메시지 수신
4. 서버 2가 B에게 WebSocket으로 전달

서버 → ping (opcode 0x9)
클라이언트 → pong (opcode 0xA)