eventSource(SSE)的实践

发布时间 2023-11-15 10:44:46作者: 一只两支三指

 

1. 概述

目前JS实时通信方式主要由:websocket、socket.io、eventSource(SSE)这三种方式。对于这三种方式,不同客户端场景有着其各自的优势。

EventSource是单向通信,而websocket是双向通信。在新闻推送、股票行情这种只需要服务器发送消息给客户端场景,使用SSE更加合适,另外SSE是使用HTTP传输的。而websocket要求全双工连接和一个新的websocket服务器去处理,
​因为各有所长,我们只需要根据实际应用场景,去选择最优的应用方案。

EventSource 对象接口用于接收服务器发送的事件。它通过 HTTP 连接到服务器,已 text/event-stream 格式接收事件,不关闭连接
​EventSource 对象主要用于 Server-Sent Events(简称 SSE)的技术。这是一种能让浏览器通过 HTTP 连接自动收到服务器端更新的技术。
​这个技术的作用是可以完成从服务器端到客户端(浏览器)单向的消息传递。因此我们可以用这个来做推送。


EventSource相关文档:https://developer.mozilla.org/zh-CN/docs/Web/API/EventSource

 

2. 兼容性

 

3. 实例

(1)服务端(以下为 node-expressjs搭建的一个简易后台接口)

 

注意:

a. 设置响应头,必须包含以上几个!

b. 后端返回需要指定格式,类似上图红线框中示例,否则浏览器端的 onmessage函数接收不到数据!(具体可查看 EventSource相关文档的 “服务器发送事件”中的事件流格式 )

 

 

 

(2)浏览器端(找个fetch-event-source插件处理一些自定义配置)

安装依赖:npm install --save @microsoft/fetch-event-source 
引入插件:import { fetchEventSource } from '@microsoft/fetch-event-source';  
 
最后,在相应的程序里处理以下代码即可。 

浏览器端的console输出结果如下: