SSE(Server Sent Event)와 EventSource

Server Sent Event는 서버가 클라이언트에게 데이터를 전송하는 기법 중 하나다.
웹소켓과는 어느정도 대체가능한 관계에 있다.

기본적인 원리는 단순하다.

브라우저에서 EventSource라는 표준 기능으로 채널을 열어두면, 서버가 거기로 데이터를 전송해줄 수 있는 것이다.

브라우저의 요청 없이도 서버 혼자서 능동적으로 처리할 수 있다는게 특징이다.

브라우저 호환성

예전에는 SSE가 IE에서 지원되지 않는다는 문제가 있었는데, 요즘은 SSE나 웹소켓이나 둘다 대부분의 브라우저에서 다 잘 작동한다.
매우 특수한 경우가 아니라면 브라우저 호환성이 문제될 일은 없을 것이다.

장점 (vs Websocket)

1. 상호작용이 필요없고 서버->클라이언트의 단방향 통신만 하면 되는 경우에는 더 간단한 해결책이다. 구현과 사용 자체가 더 단순하다.

2. Websocket의 경우 패킷 검사를 수행하는 방화벽 환경에서 문제가 생길 수 있는데, SSE는 그러한 문제를 회피할 수 있다.

단점 (vs Websocket)

1. connection limit
   HTML 1.1을 쓰는경우 대부분 동시 연결 개수에 제한이 있다.
   대부분의 브라우저는 도메인당 최대 연결 개수가 6개쯤 된다.
   사실 이건 큰 문제는 아니긴 하다.
   한 도메인에 6개 이상 쓸일이 그렇게 많나? 싶기도 하고, HTTP2부터는 개수 제한 문제가 없다.

2. 바이너리 데이터는 전송 불가 (UTF-8 텍스트만 가능)

사용처

그럼 어떨때 SSE를 주로 사용할까?

일반적으로 웹소켓은 "채팅" 같은 빠르고 탄력적인 실시간 상호작용이 필요한 곳에 응용된다.

반면 SSE는 실시간으로 업데이트되는 "실시간 시세창" 같은 기능이나, "트위터 피드 업데이트 알림" 등 현재 사용자의 액션과 관계없이 이루어지는 변경사항에 대한 알림을 구현하는데 좀더 적합한 편이다.

하지만 서로 교체 가능한 관계에 있고, 사용중인 기술의 환경이 어떠한지, 어떠한 형태의 서비스를 만드는지에 따라서 적절히 선택하면 된다.

사용법 (Express.js)

Express에서 SSE를 구현하는 방법을 정리해보겠다.
다른 프레임워크들도 다 가능하다.

먼저 연결용 API를 작성해야 한다.
SSE는 생성된 response 객체를 기반으로 지속적으로 통신을 하는 구조이기 때문이다.

그리고 SSE 사용에 필요한 헤더들을 몇가지 설정해준다.

이래야지 브라우저가 SSE인줄 알고 뻘짓을 하지 않는다.

여기서부터 SSE 동작을 구현한 코드다.
총 2번까지만 반복해서 별로 의미는 없는 텍스트를 전송한다.

그리고 브라우저에서 연결을 끊을 경우를 고려해서 낭비를 줄이도록 했다.

전체 코드다.

const Express = require("express");
const fs = require("fs");

const app = Express();

app.get("/", (req, res) => {
  const html = fs.readFileSync("./index.html", "utf-8");
  res.send(html);
});

app.get("/stream", (req, res) => {
  res.setHeader("Cache-Control", "no-cache");
  res.setHeader("Content-Type", "text/event-stream"); // EventSource 객체를 생성하기 위해 필요한 헤더
  res.setHeader("Access-Control-Allow-Origin", "*");
  res.setHeader("Connection", "keep-alive");
  res.flushHeaders(); // flush the headers to establish SSE with client

  let counter = 0;
  let interValID = setInterval(() => {
    counter++;
    if (counter >= 3) {
      clearInterval(interValID);
      res.end(); // terminates SSE session
      return;
    }

    // Server Sent Event로 데이터 전송
    res.write(`data: ${JSON.stringify({ num: counter })}\n\n`);
  }, 1000);

  // Client가 연결을 끊을 경우
  res.on("close", () => {
    console.log("client dropped me");
    clearInterval(interValID);
    res.end();
  });
});

app.listen(5500, () => {
  console.log("Server started on port 5500");
});

사용법 (브라우저)

브라우저 측의 사용법은 매우 간단한 편이다.
연결용 API로 EventStore 객체를 생성하고, 콜백으로 이벤트를 받아와 처리하면 된다.

그럼 이렇게 적절히 날아올 것이다.

참조
https://developer.mozilla.org/en-US/docs/Web/API/Server-sent_events/Using_server-sent_events
https://stackoverflow.com/questions/34657222/how-to-use-server-sent-events-in-express-js
https://stackoverflow.com/questions/5195452/websockets-vs-server-sent-events-eventsource