[라이브러리] EventSource Polyfill 정리

개요

자바스크립트에서 기본적으로 제공하는 eventSource는 주로 Server Sent Event(SSE)에 대한 웹 컨텐츠 인터페이스이다.

EventSource 인스턴스는 text/event-stream 포맷으로 이벤트를 보내는 HTTP 서버에 지속적인 연결을 하며 메세지를 받아온다.

하지만, 단순한 기능만을 제공하기 때문에 헤더를 추가하는 등의 작업을 할 수는 없다.

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

EventSource - Web API | MDN

Super Space 프로젝트를 진행하면서 JWT를 이용함에 따라 'Authorization' 헤더에 Access Token을 넣어줘야 했고, 실시간 알림 기능을 구현하기 위해 사용했던 EventSource로는 한계가 생겨 방법을 알아보던 중 해당 라이브러리를 알게됐다.

---

EventSource Pollyfill 소개

https://github.com/Yaffle/EventSource

GitHub - Yaffle/EventSource: a polyfill for http://www.w3.org/TR/eventsource/

EventSource Polyfill은 기존 EventSource 사용법을 그대로 계승하면서 크로스 도메인(Cross-domain)간 요청을 지원한다.

무엇보다 커스텀 헤더를 추가를 할 수 있다는 점과 연결이 끊어졌다 다시 연결됐을 때 놓친 메시지를 수신하기 위해 붙은 lastEventId의 이름을 커스텀할 수 있다.

var es = new EventSourcePolyfill('/events', {
  headers: {
    'X-Custom-Header': 'value'
  }
});

var es = new EventSourcePolyfill(hubUrl, {
  lastEventIdQueryParameterName: 'Last-Event-Id'
});

(Polyfill은 브라우저에서 기본적으로 제공하지 않는 최신 기능을 제공하는데 필요한 코드를 의미한다.)

---

설치 및 사용방법

1. CDN

<script src="https://unpkg.com/event-source-polyfill@1.0.31/src/eventsource.js"></script>

HTML/CSS/JS 구성으로 웹을 만들 때 간단하게 import 할 수 있다.

개인적으로 CDN은 간편하지만, CDN 서버 상태에 따라 본인 서비스가 영향을 받기 때문에 테스트용으로 쓸때 좋은 것 같다.

2. 직접 추가

https://unpkg.com/event-source-polyfill@1.0.31/src/eventsource.js
https://unpkg.com/event-source-polyfill@1.0.31/src/eventsource.min.js

해당 주소에서 js 파일을 직접 다운로드 받고, 프로젝트 폴더에다 넣은 후 위에처럼 스크립트 태그를 이용해 import 한다.

3. npm 기반

npm install event-source-polyfill //다운로드

import 'path/to/event-source-polyfill/src/eventsource.min.js' //import

declare var EventSourcePolyfill: any; //인스턴스 생성

기타

bower나, Ionic2, Angular2 등 다양한 환경에서의 설치 및 사용법은 위쪽 공식 Github에서 확인