SSE

SSE

SSE는 Server Sent Events 의 약자이며, 서버의 데이터를 신시간으로, 지속적으로 Streaming 하는 기술이다. SSE는 웹 표준으로써 IE를 제외한 모든 브라우저에서 지원되며, IE역시 *polyfill 을 통해 지원이 가능하다.

기존에는 서버의 변경된 데이터를 가져오기 위해서 페이지 새로고침, 지속적으로 request를 보내는 ajax 폴링, 외부 플러그인 이용등을 사용해야만 했었다. 이외에도 websocket을 사용할 수 있지만 HTTP 통신을 이용하는 것이 아닌 웹소켓만을 위한 별도의 서버와 프로토콜로 통신하기 때문에 구현하는 비용이 많이 든다는 단점이 있다.

하지만 SSE는 기존 HTTP 웹 서버에서 HTTP API 만으로 동작되며 구현도 간단하기 때문에 서버와 프론트엔드 양측 모두 매우 쉽게 개발이 가능하다.

polyfill 이란 브라우저가 지원하지 않는 자바스크립트 코드를 지원 가능하도록 변환한 코드를 뜻함

📗 특징

1. 브라우저는 서버가 생성 한 Stream 을 계속 받음(Server 에서 보내는 Stream 으로 Read Only)
2. Connection 유지를 위해 HTTP protocol 을 사용, HTTP/2를 통한 multiplexing 사용 가능
3. 연결이 끊어지면 EventSource가 오류 이벤트를 발생시키고 자동으로 다시 연결을 시도(error recovery)
4. 표준 기술로 IE 를 제외한 브라우저 대부분을 지원(Pollyfill로 IE 사용 가능)

✅ EX)

1. 효율적인 단방향 통신이 필요한 경우
2. 실시간 데이터 스트림밍에 HTTP 를 사용하려는 경우(RestFul 의 GET method 와 유사)
3. 사용 되는 예 (클라이언트는 수신만 받으면 된다)
   • 암호 화폐 또는 주가 피드 구독
   • sns 피드 및 친구요청
   • 뉴스 업데이트 또는 알림
   • 노티피케이션

👍 장점

• 전통적인 HTTP를 통해 통신하므로 다른 프로토콜이 필요가 없다.
• 재접속 처리 같은 대부분의 저수준 처리가 자동으로 된다.
• 표준 기술답게 IE를 제외한 브라우저 대부분을 지원한다.
• HTML과 JavaScript만으로 구현할 수 있으므로 현재 지원되지 않는 브라우저(IE 포함)도 polyfill을 이용해 크로스 브라우징이 가능하다.
• 제일 좋은건 간편함

👎 단점

• client 에서 연결을 끊어도(=페이지를 떠나도) 서버단에서 감지가 어려움
• SSE로 연결되는 서버가 신뢰 구간에 있는 서버라고 하더라도, 가급적이면 FE단에서 SSE로 인한 이슈는 제한될 수 있도록 별도의 방어로직이 필요함
• 푸시해 줄 내용이 없더라도 서버의 자원(쓰레드 자원 및 메모리 공간)을 항상 점유하고 있다.

사용방법 💬

const eventSources = new EventSource(stream_url);


eventSources.addEventListener('myevent', function(e) {
    // 'myevent' 이벤트의 데이터 처리
};

eventSource.addEventListener('message', function(e) {
  // 서버로부터 데이터가 오면
  console.log(e.data);
});
 
eventSource.addEventListener('open', function(e) {
  // connection되면
});
 
eventSource.addEventListener('error', function(e) {
  // error 나면
  if (e.readyState == EventSource.CLOSED) {
  }

참고 👉 https://developer.mozilla.org/ko/docs/Web/API/EventSource