EventSource IE 처리 (Feat. Polyfill)

EventSource 란 server-sent-events 에 대한 웹 컨텐츠 인터페이스이다. 

text/event-stream format 으로 event 를 보내는 HTTP 서버에 지속적인 연결을 한다. 

연결은 EventSource.close() 호출로 종료되기 전까지 지속된다.

 

웹소켓과 다르게 server-sent-events 는 단방향이다. 

client 에서 server로 event를 보낼 필요가 없을 때에는 웹소켓보다 간단하게 사용할 수 있기 때문에 좋다.

SNS 의 상태 업데이트, 뉴스피드 등에서 사용할 수 있으며 

최근 데이터 내보내기 시 파일이 클 경우 내보내기의 진행상황을 표현하기 위해 이 기술을 위해서 개발했다.

kimyhcj.tistory.com/433

SSE (Server-Send Event) 를 이용한 다운로드 진행 상황 표시 (progressbar)

그런데 역시나 Internet Explorer 에서는 동작하지 않는다.

이럴 때 사용하라고 polyfill 이 있는 것이지

 

www.npmjs.com/package/event-source-polyfill

event-source-polyfill

import { NativeEventSource, EventSourcePolyfill } from 'event-source-polyfill';

const EventSource = NativeEventSource || EventSourcePolyfill;

let downloadEventSource = new EventSource(url);

event-source-polyfill 을 설치하면 IE10+, Firefox 3.5+, Chrome 3+, Safari 4+, Opera 12+ 에서 잘 동작한다고 나와있다.

 

그런데... IE 에서 돌려보면.... 최초 한번만 잘 동작하고 그 다음부터는 new EventSource(url); 시 url 호출이 안된다.

왜 이러는 걸까.....;;; 

혹시나 브라우저가 가지고 있는 캐시나 이런문제는 아닐까 생각이 들어 

URL 뒤에 Parameter 로 random 값을 추가해봤다.

잘된다................

어차피 downloadKey 를 만들기 위해 각 행위에 대한 unique 한 값이 필요했기에 random 값을 만들었어야 했고 

url 에 parameter 로 매번 다른값을 붙였더니 잘 동작한다... 

물론, 다른 브라우저들은 같은 url 의 반복호출이어도 잘 동작한다...

역시 IE !!