SSE(Server-Sent Events)
HTTP에서는 데이터를 가져올 때 기본적으로 Request-Response 중심으로 진행됨.
서버에서 변경된 데이터를 가져오기 위한 기존 방법은?
- Pooling: 클라이언트가 서버에 데이터를 반복적으로 요청.
- Long pooling: pooling의 변형. 서버는 새 데이터를 사용할 수 있을 때까지 응답 보류.
- Websocket: 클라이언트와 서버 간 양방향 저지연 통신 채널 생성. HTTP를 사용하여 연결한 뒤 Websocket 프로토콜을 사용할 수 있는 독립 실행형 TCP 연결로 업그레이드.
SSE는 이러한 방식들의 대안으로, 서버의 데이터를 실시간으로, 지속적으로 Streaming하는 기술.
동작 원리
일반적인 HTTP는 TCP를 기반으로 1회성으로 데이터를 주고받은 뒤 연결을 종료하지만, 연결 상태를 유지하고 계속해서 데이터를 보내는 경우도 있음.
- 많은 양의 데이터를 보내야 하는 파일 전송 등.
첫 연결 시 데이터를 주고 받고, 이후 연결된 상태를 유지한 채 서버가 일방적으로 데이터 전송.
서버에서 첫 request에 대한 응답 시 다음과 같이 헤더를 보내야 함.
Content-Type: text/event-stream // text 형태의 event-stream을 전송할 것임.
Cache-Control: no-cache // 새로운 데이터를 받기 위함이므로 캐시 필요 없음.
Connection: keep-alive // connection을 계속 유지해야 함.
keep-alive
HTTP/1.1부터 지원해주며, Handshake를 생략하고 이미 연결되어 있는 TCP 연결을 재사용.
연결된 Socket에 I/O Access가 마지막으로 종료된 시점부터 정의된 시간까지 Access가 없더라도 세션 유지.
- 정의된 시간 내에 Access가 이루어진다면 연결 상태 계속 유지.
정적 자원으로만 구성된 웹 서버에 keep-alive를 사용할 경우 약 50%의 성능 향상 기대.
Websocket vs SSE
Websocket | Server-Send Events | |
---|---|---|
통신 방향 | 양방향 | 서버 -> 클라이언트 일방향 |
실시간성 | 완전히 실시간 | 비교적 실시간 |
데이터 형태 | Binary, UTF-8 | UTF-8 |
자동 재접속 | X | 일정 시간마다 재시도(Default 3초) |
최대 동시 접속 수 | 서버 셋업에 따라 다름 | 브라우저 당 6개 혹은 100개 |
배터리 소모량 | 큼 | 작음 |
프로토콜 | Websocket | HTTP |
Firewall 친화적 | X | O |
통신 방향
Websocket은 양방향 통신이 가능한 반면 SSE는 일방향 통신만 가능하므로, 양방향 통신이 필요하다면 websocket을 사용해야 함.
실시간성
Websocket이 더욱 정밀한 실시간성을 지원하므로 실시간이 매우 중요한 게임 등의 어플리케이션은 websocket을 사용하는 게 나을 수 있음.
최대 동시 접속 수
HTTP/2 이전: 브라우저 당 6개까지만 허용.
- 즉 Tab을 6개 이상 열면 동작하지 않을 수 있음.
HTTP/2 이후: 서버와 negotiate 가능.(Default 100)
배터리 및 데이터 사용량
Websocket은 계속해서 handshake를 하지만 SSE는 한 번 열어두고 계속 기다리므로 websocket의 부하가 더 큼.
프로토콜
Websocket은 HTTP 위에서 작동하지 않으므로 HTTP의 여러 이점을 얻을 수 없음.
- HTTP 압축을 지원하지 않음.
- HTTP/2 멀티플렉싱을 지원하지 않음.
- 동일한 호스트에 대한 여러 요청/응답들이 동일한 TCP 연결을 공유.
- Websocket을 지원하지 않는 프록시에서 문제가 발생할 수 있음.
- Cross-Site Websocket Hijacking으로부터 보호되지 않음.
- Origin 헤더 확인 및 승인되지 않은 도메인으로부터의 연결 차단을 직접 수행해야 함.
반면 SSE의 경우 HTTP를 통해 전송되므로 특별한 프로토콜이나 서버 구현이 필요하지 않음.
브라우저 및 React native 지원 현황
Websocket은 IE10부터 지원하며 전세계 유저의 98.16% 네이티브하게 사용 가능.
SSE는 IE는 polyfills로 지원해야 하며 전세계 유저의 97%가 사용 가능.
React native의 경우에도 관련 라이브러리가 존재.
참고자료
- https://www.html5rocks.com/en/tutorials/eventsource/basics/
- https://boxfoxs.tistory.com/403
- https://subscription.packtpub.com/book/web_development/9781782166320/6/ch06lvl1sec43/listening-for-server-sent-events
- https://surviveasdev.tistory.com/entry/%EC%9B%B9%EC%86%8C%EC%BC%93-%EA%B3%BC-SSEServer-Sent-Event-%EC%B0%A8%EC%9D%B4%EC%A0%90-%EC%95%8C%EC%95%84%EB%B3%B4%EA%B3%A0-%EC%82%AC%EC%9A%A9%ED%95%B4%EB%B3%B4%EA%B8%B0
- https://goodgid.github.io/HTTP-Keep-Alive/
- https://developer.mozilla.org/ko/docs/Web/API/Server-sent_events/Using_server-sent_events
- https://germano.dev/sse-websockets/
Author And Source
이 문제에 관하여(SSE(Server-Sent Events)), 우리는 이곳에서 더 많은 자료를 발견하고 링크를 클릭하여 보았다 https://velog.io/@ymlee3218/SSEServer-Sent-Events저자 귀속: 원작자 정보가 원작자 URL에 포함되어 있으며 저작권은 원작자 소유입니다.
우수한 개발자 콘텐츠 발견에 전념 (Collection and Share based on the CC Protocol.)