[개발 지식] SSE(Server-Sent Events) vs Sock.js

SSE(Server-Sent Events)와 Sock.js는 모두 클라이언트와 서버 간의 실시간 통신을 가능하게 하지만, 사용하는 기술과 목적이 다르다.
이 두 가지 기술의 차이점과 각각의 구현 기능에 대해 알아보자.

1. SSE(Server-Sent Events)

SSE는 서버에서 클라이언트로 단방향 스트림을 전송하는 기술이다.
주로 서버가 클라이언트에게 지속적으로 데이터를 푸시해야 하는 상황에서 사용된다.

• 작동 방식: 클라이언트가 서버에 연결을 요청하면, 서버는 text/event-stream 형식의 데이터를 지속적으로 전송한다.
  클라이언트는 이 스트림을 받아들이며, 실시간으로 업데이트되는 데이터를 처리할 수 있다.
  연결이 끊어지면 클라이언트는 자동으로 다시 연결을 시도한다.
• 장점: HTTP 기반이라 브라우저 호환성이 좋으며, 구현이 간단하다.
  특히 서버에서 클라이언트로 데이터 푸시가 필요할 때 적합하다.
• 단점: 단방향 통신이므로 클라이언트에서 서버로 데이터를 보낼 수 없다.
  양방향 통신이 필요한 경우에는 적합하지 않다.

예시: 주식 가격이나 뉴스 피드와 같이 서버에서 실시간으로 업데이트되는 정보를 클라이언트에게 전달하는 데 유용하다.

// 클라이언트 측 SSE 예시
const eventSource = new EventSource('http://localhost:8080/stream');

eventSource.onmessage = function(event) {
    console.log('New message from server:', event.data);
};

eventSource.onerror = function(error) {
    console.error('Error:', error);
};

 

2. Sock.js

Sock.js는 웹 소켓(WebSocket)을 지원하지 않는 브라우저에서도 실시간 통신을 가능하게 하기 위해 설계된 라이브러리다.
Sock.js는 다양한 폴백(fallback) 메커니즘을 통해 웹 소켓이 지원되지 않는 경우에도 안정적인 통신을 유지한다.

• 작동 방식: 클라이언트가 서버와 웹 소켓 연결을 시도한다.
  만약 브라우저가 웹 소켓을 지원하지 않는다면 Sock.js는 XHR(Long Polling), Iframe 등의 방법을 사용해 통신을 유지한다.
  이를 통해 웹 소켓이 지원되지 않는 환경에서도 실시간 양방향 통신을 가능하게 한다.
• 장점: 모든 브라우저에서 동일한 API를 사용해 안정적으로 실시간 통신을 구현할 수 있다.
  폴백 메커니즘 덕분에 더 넓은 브라우저 호환성을 제공한다.
• 단점: 웹 소켓이 가능한 경우에 비해 성능이 낮을 수 있으며, 구현 복잡도가 증가할 수 있다.

예시: 채팅 애플리케이션이나 실시간 알림 시스템 등, 양방향 통신이 필요할 때 사용된다.

import SockJS from 'sockjs-client';

// 클라이언트 측 Sock.js 예시
const socket = new SockJS('http://localhost:8080/echo');

socket.onopen = function() {
    console.log('Connection opened');
    socket.send('Hello, Server!');
};

socket.onmessage = function(e) {
    console.log('Message from server:', e.data);
};

socket.onclose = function() {
    console.log('Connection closed');
};

 

3. SSE와 Sock.js의 선택 기준

SSE와 Sock.js는 각각의 장단점이 있기 때문에, 프로젝트 요구사항에 따라 선택이 달라진다.

• SSE를 선택할 경우: 서버에서 클라이언트로 단방향으로 지속적인 데이터를 푸시해야 하는 경우, 그리고 클라이언트가 여러 개의 브라우저일 때 유용하다.
  예를 들어, 뉴스 업데이트, 실시간 주식 가격 등.
• Sock.js를 선택할 경우: 양방향 통신이 필요하거나, 웹 소켓을 기본으로 하되 브라우저 호환성을 고려해야 하는 경우에 적합하다.
  채팅 애플리케이션, 온라인 게임 등.

---

정리하자면

양방향 통신: Sock.js => Stomp.js

지속적인 단방향 통신: SSE