SSE(Server Sent Events)

https://www.youtube.com/watch?v=rBufGKaRtZc

지인분의 프로젝트 데모 영상을 보다가 신기한 기능이 있어서 github에서 코드를 읽어보았다.

useEffect(() => {
    const tokenKey = sessionStorage.getItem('tokenKey');
    if (!tokenKey) return;

    const sse = new EventSourcePolyfill(`${API_URL}/api/jobs/${jobId}/runningTasks/connect`, {
      headers: {
        Authorization: `Bearer ${localStorage.getItem(tokenKey)}`,
      },
    });

    sse.addEventListener('connect', (e: any) => {
      const { data: receivedSections } = e;

      setSectionsData(JSON.parse(receivedSections));
    });

    sse.addEventListener('flip', (e: any) => {
      const { data: receivedSections } = e;

      setSectionsData(JSON.parse(receivedSections));
    });

    sse.addEventListener('submit', () => {
      navigate(`/enter/${hostId}/spaces/${spaceId}`);
      openToast('SUCCESS', '해당 체크리스트는 제출되었습니다.');
    });
  }, []);

출처 https://github.com/woowacourse-teams/2022-gong-check/blob/dev/frontend/src/pages/user/TaskList/useTaskList.tsx

내가 체크한 tasklist가 실시간으로 다른 사용자에게서도 체크가 되는 기능이다.
처음에는 소켓인가? 생각했는데

    const sse = new EventSourcePolyfill(`${API_URL}/api/jobs/${jobId}/runningTasks/connect`, {
      headers: {
        Authorization: `Bearer ${localStorage.getItem(tokenKey)}`,
      },
    });

소켓이 아닌 것 같아 검색해보니 SSE라는 기술이였다.
서버의 데이터를 실시간으로 지속적으로 streaming 하는 기술이다.

인터페이스로 EventSource 를 사용하면 되는데 아마 IE 지원때문에 EventSourcePolyfill을 쓰신 듯 하다.

소켓과는 다르게 서버에서 클라이언트로 데이터를 주는 단방향이고 배터리 소모량이 적다.
또한 HTTP로 전송되고 자동 재접속이 3초마다 이루어진다.

• 웹소켓 (리얼타임)
  ex) 주식 트레이딩 데이터, 카카오톡 쳇, 크립토 실시간 차트

• SSE (알람에 많이 쓰인다)
  ex) twitter 피드, 페이스북 친구요청

Continew 프로젝트 채팅 알림에 적합했을 듯 하다

참고자료
https://developer.mozilla.org/ko/docs/Web/API/Server-sent_events
https://inpa.tistory.com/entry/NODE-%F0%9F%93%9A-Server-Sent-Events-%F0%9F%92%AF-%EC%A0%95%EB%A6%AC-%EC%82%AC%EC%9A%A9%EB%B2%95