浏览器兼容性之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 {
      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来实现服务端向客户端实时推送消息。