浏览器兼容性(二):IE不支持EventSource

风晴雪sheep

问题描述

EventSource官方名为Server-sent events(缩写SSE)服务端派发事件,EventSource 是基于http协议的单项通信,可实现服务端向客户端实时推送消息。但由于浏览器兼容性问题,IE并不支持EventSource。
(注:开发环境Angular8.1.0ng-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来实现服务端向客户端实时推送消息。

阅读 4.1k
8 声望
5 粉丝
0 条评论
8 声望
5 粉丝
文章目录
宣传栏