Server Sent Event란? (feat. Websocket과 차이점)

예전에 이름이랑 개념만 들어보고 지나쳤던 기술인데, 소켓 통신이랑 뭐가 다른걸까 궁금해져서 간단하게 데모 프로젝트를 만들어보았다.

Server Sent Event 란?

Server에서 Client로 보내는 단방향 스트리밍 기술이다. 소켓은 실시간으로 양방향 통신이 가능하지만 SSE는 Server -> Client 방향으로만 데이터를 보낼 수 있다.

SSE vs Websocket

항목	SSE	WebSocket
기반 프로토콜	HTTP/1.1	HTTP 업그레이드 -> Websocket 프로토콜
통신 방향	단방향 (서버 -> 클라이언트)	양방향 (서버 <-> 클라이언트)
전송 형식	`text/event-stream` (UTF-8 텍스트 기반), 바이너리 불가능	바이너리, 텍스트 모두 가능
사용 예시	실시간 시계, 모니터링 데이터, 실시간 검색어 순위 등	실시간 채팅, 실시간 비디오 스트리밍, 멀티 게임 등

HTTP 업그레이드란?

HTTP/1.1에서 제공하는 header로, 서버에게 http에서 다른 프로토콜로 전환을 요청할 때 사용하는 header이다. 서버는 다른 프로토콜로 전환을 결정한 경우에는 101(Switching Protocols) status로 응답을 보낸다.

서버의 현재 시간을 띄우는 웹페이지 만들어보기

Websocket으로 만들어보기

server 코드 (express)
client 코드 (react)

실제로 Connection:Upgrade가 포함된 header로 request를 보내고 Connection:Upgrade가 header에 포함된 response를 받는것을 확인할 수 있다.

SSE로 만들어보기

server 코드 (express)
client 코드 (react)