웹소켓과 SSE(Server Sent Event)를 알아보자

현대 웹 애플리케이션은 실시간 데이터 전송이 중요한 요소로 자리잡고 있습니다. 이 글에서는 두 가지 주요 기술, 웹소켓(WebSocket)과 서버 전송 이벤트(Server Sent Event, SSE)를 비교하고, 각각의 장단점을 살펴보겠습니다.

웹소켓(WebSocket) 과 서버 전송 이벤트(Server Sent Event, SSE)?

웹소켓은 HTML5 표준의 일부로, 클라이언트와 서버 간의 양방향 통신을 가능하게 합니다. 초기 HTTP 핸드셰이크 후, 지속적인 연결을 유지하며 데이터를 주고받을 수 있습니다.

 

SSE는 서버에서 클라이언트로 일방향으로 데이터를 전송하는 기술입니다. 클라이언트는 HTTP 연결을 통해 서버로부터 지속적으로 데이터를 받을 수 있습니다.

 

자세한 인터페이스는 MDN 문서를 참조할 수 있습니다.

 

Ref.

• https://developer.mozilla.org/ko/docs/Web/API/WebSockets_API

웹 소켓 - Web API | MDN

• https://developer.mozilla.org/en-US/docs/Web/API/Server-sent_events/Using_server-sent_events

Using server-sent events - Web APIs | MDN

 

 

웹소켓과 서버 전송 이벤트 비교

 

	웹소켓	서버 전송 이벤트 (SSE)
통신	양방향 ( 클라이언트 ↔ 서버 )	단방향 ( 서버 → 클라이언트 )
연결	연결이 끊어지면 클라이언트가 수동으로 재연결을 시도해야 합니다.	연결이 끊어지면 클라이언트가 자동으로 재연결을 시도합니다.
데이터 형식	바이너리 데이터와 텍스트 데이터를 모두 전송할 수 있습니다.	주로 텍스트 데이터를 전송합니다.
장점	실시간 데이터 전송: 지연 시간이 거의 없어 실시간 데이터 전송이 가능합니다. 효율성: HTTP 요청/응답 오버헤드가 없으므로 효율적입니다.	간단한 구현: HTTP 기반이므로 구현이 비교적 간단합니다. 자동 재연결: 클라이언트가 자동으로 재연결을 시도하므로 안정적입니다.
사용되는 곳	채팅 애플리케이션, 온라인 게임, 주식 시세 등 실시간 양방향 데이터 전송이 필요한 경우	뉴스 피드, 실시간 알림, 모니터링 대시보드 등 서버에서 지속적으로 데이터를 보내는 경우

 

 

호환성

웹소켓과 SSE 의 브라우저 호환성을 위해 Can I Use 사이트에서 검색해보았습니다.

Can I Use? - WebSocket API

 

Can I Use? - Server-sent Events

 

대부분의 브라우저 버전에서 사용 가능한 것으로 나옵니다.

 

만약 모든 브라우저에 대해서 SSE 를 적용하고 싶다면 "event-source-polyfill" 과 같은 라이브러리를 활용하여 가능합니다.

 

https://github.com/Yaffle/EventSource

GitHub - Yaffle/EventSource: a polyfill for http://www.w3.org/TR/eventsource/

 

예시코드

import { EventSourcePolyfill } from 'event-source-polyfill';

const eventHandler = (e) => {
  // do something with e
}

const eventSource = new EventSourcePolyfill(BASE_URL, { headers });
eventSource.addEventListener('EVENT_NAME', eventHandler);
eventSource.onerror = errorHandler;

 

 

사용해보지는 않았지만 WebSocket Polyfill 검색시 웹소켓 관련 폴리필 라이브러리도 있는 것 같습니다. 

https://github.com/samchon/websocket-polyfill

GitHub - samchon/websocket-polyfill: WebSocket class from Browser to NodeJS

 

 

그런데 SSE 연결의 경우 HTTP 버전과 브라우저에 따라서 연결 수 제한이 있다고 합니다.

SSE limits

MDN 에 따르면, HTTP/2를 통해 사용하지 않는 경우 SSE는 최대 연결 수에 제한이 있다고 합니다. 브라우저별로 제한이 있고 매우 낮은 수(6)로 설정되어 있어 여러 탭을 열 때 특히 불편할 수 있습니다. 이때 6개의 제한은 "브라우저와 도메인" 이 조합된 값을 기준으로 한다고 합니다. 따라서 하나 브라우저 하나의 도메인에 대해서 6개의 SSE 연결을 생성할 수 있다고 보시면 됩니다.

 

활용

웹소켓의 경우에는 게임 사이트를 만들때 실시간 통신 용으로 사용했었습니다.

 

SSE 의 경우에는 특별하게 사용해본 경험이 있는데요, iOS 웹뷰에서 Native 측과 통신할 때 우회하는 방법으로 사용해본적이 있습니다.

Native 측에서 window 객체를 활용하여 Client 측에 응답해주는 것이 막히는 이슈가 있었는데요 ( iOS 정책상 막혔습니다..) , 이때 native → 서버 → 서버에서 SSE 를 통해 Client 에 데이터를 전송해주는 방법으로 우회해서 사용해본 경험이 있습니다.

 

 

웹소켓과 SSE 에 대한 기본 개념에 대해 알아보았는데요, 자세한 코드와 활용법은 다음 기회가 되면 또 포스팅 해보겠습니다!