瀏覽器兼容性之IE不支持EventSource

問題描述

EventSource官方名爲Server-sent events（縮寫SSE）服務端派發事件，EventSource 是基於http協議的單項通訊，可實現服務端向客戶端實時推送消息。但因爲瀏覽器兼容性問題，IE並不支持EventSource。
(注：開發環境Angular8.1.0，ng-zorro-antd：~8.0.2，前端容器nginx：1.10.1。)

解決方案

經過引入event-source-polyfill可解決該問題，具體實現以下：

• 使用npm安裝 event-source-polyfill

  npm install event-source-polyfill

• 在src/app/polyfills.ts文件中引入eventsource.min.js

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

• 在SSE模塊中引入EventSourcePolyfill類：

  import {NativeEventSource,EventSourcePolyfill} from 'event-source-polyfill';
  
  createObservableSse(url: string): Observable<any> {
      const EventSource = NativeEventSource || EventSourcePolyfill;
      this.sse = new EventSource(url); // 鏈接sse服務器
      return new Observable(   // 返回一個流
          observer => {
              // sse接收到消息時，發射下一個元素
              this.sse.onmessage = (event) => observer.next(event.data);
              // sse出問題時，流拋出異常
              this.sse.onerror = (event) => observer.error(event);
              // sse關閉時，流發出結束的信號
              this.sse.onclose = (event) => observer.complete();
          }
      );
  }

總結

目前只找到這一種方法解決SSE在IE瀏覽器上不兼容的問題。另外，也可用Websocket替換SSE來實現服務端向客戶端實時推送消息。