[Web] SSE(Server Sent Event)

SSE?

• Server Sent Event의 약어로 서버의 데이터를 실시간으로, 지속적으로 Streaming하는 기술
• 웹 표준으로써 IE를 제외한 모든 브라우저에서 지원됨

Why? 

• 기존에는 서버의 변경된 data를 업데이트 해주기 위하여 polling을 사용하여 가져왔지만 SSE는 1회성 데이터를 주고받은 뒤 종료하는 것이 아닌 연결상태를 유지하고 계쏙해서 데이터를 보내는 경우다
• Websocket도 있는데 왜 SSE?
• 1. websocket은 대표적으로 양방향으로 클라이언트와 서버의 지속적인 통신이다. client도 데이터를 서버에게 보낼 수 있다는 것이다. 하지만 SSE는 바로 클라이언트가 굳이 서버에게 데이터를 보낼필요가 없을때 빛을 발한다.(단뱡향)
• Websocket은 http를 websocket 프로토콜을 업그레이드 하여 사용하지만 SSE는 http위에서 작동된다
• 단점, 브라우저에서 최대 동시 접속 수는 HTTP/1.1의 경우 6개, HTTP/2는 100개까지 가능하다.
• 단점, 클라이언트에서 페이즈를 닫아도 서버에서 감지하기 어렵다.

how?

 

// HTTP 기반답게 기본 instance로 제공된다.
// client
// open된다.
let source = new EventSource('target address');

// event listener 'message' topic으로 수신
source.addEventListener('message', (e) => {
	console.log(e.data);
})