현대 웹 애플리케이션은 실시간 데이터 전송이 중요한 요소로 자리잡고 있습니다. 이 글에서는 두 가지 주요 기술, 웹소켓(WebSocket)과 서버 전송 이벤트(Server Sent Event, SSE)를 비교하고, 각각의 장단점을 살펴보겠습니다.
웹소켓(WebSocket) 과 서버 전송 이벤트(Server Sent Event, SSE)?
웹소켓은 HTML5 표준의 일부로, 클라이언트와 서버 간의 양방향 통신을 가능하게 합니다. 초기 HTTP 핸드셰이크 후, 지속적인 연결을 유지하며 데이터를 주고받을 수 있습니다.
SSE는 서버에서 클라이언트로 일방향으로 데이터를 전송하는 기술입니다. 클라이언트는 HTTP 연결을 통해 서버로부터 지속적으로 데이터를 받을 수 있습니다.
자세한 인터페이스는 MDN 문서를 참조할 수 있습니다.
Ref.
웹 소켓 - Web API | MDN
웹 소켓은 사용자의 브라우저와 서버 사이의 인터액티브 통신 세션을 설정할 수 있게 하는 고급 기술입니다. 개발자는 웹 소켓 API를 통해 서버로 메시지를 보내고 서버의 응답을 위해 서버를 폴
developer.mozilla.org
Using server-sent events - Web APIs | MDN
Developing a web application that uses server-sent events is straightforward. You'll need a bit of code on the server to stream events to the front-end, but the client side code works almost identically to websockets in part of handling incoming events. Th
developer.mozilla.org
웹소켓과 서버 전송 이벤트 비교
| 웹소켓 | 서버 전송 이벤트 (SSE) | |
| 통신 | 양방향 ( 클라이언트 ↔ 서버 ) | 단방향 ( 서버 → 클라이언트 ) |
| 연결 | 연결이 끊어지면 클라이언트가 수동으로 재연결을 시도해야 합니다. | 연결이 끊어지면 클라이언트가 자동으로 재연결을 시도합니다. |
| 데이터 형식 | 바이너리 데이터와 텍스트 데이터를 모두 전송할 수 있습니다. | 주로 텍스트 데이터를 전송합니다. |
| 장점 |
|
|
| 사용되는 곳 | 채팅 애플리케이션, 온라인 게임, 주식 시세 등 실시간 양방향 데이터 전송이 필요한 경우 | 뉴스 피드, 실시간 알림, 모니터링 대시보드 등 서버에서 지속적으로 데이터를 보내는 경우 |
호환성
웹소켓과 SSE 의 브라우저 호환성을 위해 Can I Use 사이트에서 검색해보았습니다.
대부분의 브라우저 버전에서 사용 가능한 것으로 나옵니다.
만약 모든 브라우저에 대해서 SSE 를 적용하고 싶다면 "event-source-polyfill" 과 같은 라이브러리를 활용하여 가능합니다.
https://github.com/Yaffle/EventSource
GitHub - Yaffle/EventSource: a polyfill for http://www.w3.org/TR/eventsource/
a polyfill for http://www.w3.org/TR/eventsource/. Contribute to Yaffle/EventSource development by creating an account on GitHub.
github.com
예시코드
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
WebSocket class from Browser to NodeJS. Contribute to samchon/websocket-polyfill development by creating an account on GitHub.
github.com
그런데 SSE 연결의 경우 HTTP 버전과 브라우저에 따라서 연결 수 제한이 있다고 합니다.
MDN 에 따르면, HTTP/2를 통해 사용하지 않는 경우 SSE는 최대 연결 수에 제한이 있다고 합니다. 브라우저별로 제한이 있고 매우 낮은 수(6)로 설정되어 있어 여러 탭을 열 때 특히 불편할 수 있습니다. 이때 6개의 제한은 "브라우저와 도메인" 이 조합된 값을 기준으로 한다고 합니다. 따라서 하나 브라우저 하나의 도메인에 대해서 6개의 SSE 연결을 생성할 수 있다고 보시면 됩니다.
활용
웹소켓의 경우에는 게임 사이트를 만들때 실시간 통신 용으로 사용했었습니다.
SSE 의 경우에는 특별하게 사용해본 경험이 있는데요, iOS 웹뷰에서 Native 측과 통신할 때 우회하는 방법으로 사용해본적이 있습니다.
Native 측에서 window 객체를 활용하여 Client 측에 응답해주는 것이 막히는 이슈가 있었는데요 ( iOS 정책상 막혔습니다..) , 이때 native → 서버 → 서버에서 SSE 를 통해 Client 에 데이터를 전송해주는 방법으로 우회해서 사용해본 경험이 있습니다.
웹소켓과 SSE 에 대한 기본 개념에 대해 알아보았는데요, 자세한 코드와 활용법은 다음 기회가 되면 또 포스팅 해보겠습니다!