웹 소켓(WebSocket)과 SSE(Server-Sent Events) – 실시간 데이터 처리

1. 개요

실시간 데이터 처리는 현대 웹 애플리케이션에서 중요한 요소로 자리 잡았다. 채팅 애플리케이션, 주식 시장 데이터 스트리밍, 실시간 알림 시스템 등에서 빠른 데이터 전송이 필수적이다. 이를 구현하는 대표적인 기술이 **웹 소켓(WebSocket)**과 **SSE(Server-Sent Events)**이다.

이 글에서는 웹 소켓과 SSE의 개념, 차이점, 그리고 어떤 상황에서 어떤 기술을 선택해야 하는지를 설명한다.

---

2. 웹 소켓(WebSocket)과 SSE 개요

 

✅ 웹 소켓(WebSocket) 개념

웹 소켓은 풀-이중(Full-Duplex) 통신을 제공하는 프로토콜로, 클라이언트와 서버 간의 양방향 데이터 전송이 가능하다. HTTP 요청과 다르게 연결이 지속적으로 유지되며, 서버와 클라이언트가 필요할 때마다 데이터를 주고받을 수 있다.

웹 소켓의 특징

• 클라이언트와 서버 간 양방향(Full-Duplex) 통신
• 항상 연결이 유지되며, 필요할 때 데이터 전송
• **낮은 지연 시간(Low Latency)**으로 실시간 애플리케이션에 적합
• HTTP 연결과는 별개로 ws:// 또는 wss:// 프로토콜 사용

---

✅ SSE(Server-Sent Events) 개념

SSE는 단방향(One-Way) 통신 방식으로, 서버에서 클라이언트로만 데이터를 푸시(Push)하는 기술이다. 기본적으로 HTTP 기반의 이벤트 스트리밍 방식을 사용하며, 서버에서 실시간으로 변경된 데이터를 클라이언트에 전달하는 데 최적화되어 있다.

SSE의 특징

• 서버에서 클라이언트로만 데이터 전송 가능 (단방향 통신)
• 기본적으로 HTTP 기반이므로 추가 프로토콜이 필요 없음
• 자동으로 재연결 기능을 제공
• 단순한 **실시간 데이터 스트리밍(예: 뉴스 피드, 주식 시세)**에 적합

---

3. 웹 소켓과 SSE 비교

비교 항목웹 소켓(WebSocket)SSE(Server-Sent Events)

통신 방식	양방향(Full-Duplex)	단방향(Server → Client)
프로토콜	WS(WSS) (웹 소켓 전용 프로토콜)	HTTP 기반
연결 유지	연결이 지속됨 (Keep-Alive)	HTTP 연결을 통해 지속적인 데이터 전송
재연결 기능	별도 구현 필요	기본 제공
데이터 전송 크기	바이너리 및 텍스트 지원	텍스트 전송만 가능
사용 사례	채팅, 온라인 게임, 실시간 협업	뉴스 피드, 실시간 알림, 주식 데이터 스트리밍

✅ 웹 소켓은 양방향 통신이 필요한 경우 적합하며,
✅ SSE는 단순한 실시간 데이터 푸시에 적합하다.

---

4. 웹 소켓과 SSE의 사용법

✅ 웹 소켓(WebSocket) 예제

서버 코드 (Node.js + WebSocket)

javascript

복사편집

const WebSocket = require('ws'); const server = new WebSocket.Server({ port: 8080 }); server.on('connection', (socket) => { console.log('클라이언트가 연결되었습니다.'); socket.on('message', (message) => { console.log('클라이언트로부터 메시지 수신:', message); socket.send(`서버 응답: ${message}`); }); socket.on('close', () => { console.log('클라이언트 연결 종료'); }); });

클라이언트 코드 (JavaScript)

javascript

복사편집

const socket = new WebSocket('ws://localhost:8080'); socket.onopen = () => { console.log('웹 소켓 연결 성공'); socket.send('안녕하세요, 서버!'); }; socket.onmessage = (event) => { console.log('서버로부터 메시지:', event.data); }; socket.onclose = () => { console.log('웹 소켓 연결 종료'); };

✔️ 웹 소켓을 활용하면 클라이언트와 서버가 자유롭게 데이터를 주고받을 수 있다.

---

✅ SSE(Server-Sent Events) 예제

서버 코드 (Node.js + Express)

javascript

복사편집

const express = require('express'); const app = express(); app.get('/events', (req, res) => { res.setHeader('Content-Type', 'text/event-stream'); res.setHeader('Cache-Control', 'no-cache'); res.setHeader('Connection', 'keep-alive'); setInterval(() => { res.write(`data: ${new Date().toLocaleTimeString()}\n\n`); }, 3000); }); app.listen(3000, () => { console.log('SSE 서버가 3000번 포트에서 실행 중'); });

클라이언트 코드 (JavaScript)

javascript

복사편집

const eventSource = new EventSource('http://localhost:3000/events'); eventSource.onmessage = (event) => { console.log('서버로부터 메시지:', event.data); }; eventSource.onerror = () => { console.log('SSE 연결 종료'); };

✔️ SSE를 사용하면 서버에서 지속적으로 데이터를 푸시할 수 있다.

---

5. 웹 소켓과 SSE 활용 사례

✅ 웹 소켓(WebSocket)이 적합한 경우

• 양방향 데이터 전송이 필요한 경우
  • 채팅 애플리케이션
  • 온라인 게임
  • 실시간 협업 도구 (Google Docs, Figma)
• 빠른 응답 속도가 필요한 경우
  • 주식 시장 트레이딩
  • IoT 데이터 스트리밍

✅ SSE(Server-Sent Events)가 적합한 경우

• 단방향 실시간 데이터 푸시가 필요한 경우
  • 뉴스 피드 업데이트
  • 실시간 주식 시세 제공
  • 서버에서 클라이언트로 자동 업데이트가 필요한 경우

---

6. 결론 – 어떤 기술을 선택해야 할까?

웹 소켓(WebSocket)과 SSE(Server-Sent Events)는 각각의 장점과 한계가 있다.

✅ 양방향 통신이 필요하다면 웹 소켓을 선택하는 것이 좋다.
✅ 단순한 서버 → 클라이언트 데이터 푸시가 필요하면 SSE를 사용하는 것이 효율적이다.

🔹 선택 기준 요약

• 실시간 채팅, 게임, 협업 툴 → 웹 소켓(WebSocket)
• 실시간 알림, 주식 시세, 뉴스 피드 → SSE(Server-Sent Events)
• 빠른 응답 속도가 중요하고 데이터 트래픽이 많다면 → 웹 소켓
• HTTP 기반이며 간단한 실시간 데이터 업데이트가 필요하다면 → SSE

프로젝트의 요구 사항과 성능 고려 요소를 기반으로 적절한 기술을 선택하는 것이 중요하다.