SSE（Server-Sent Events）场景和简单实现

SSE 服务器发送事件

提示：这里写一下简单的长连接 数据流，前后端，后端用的 Nodejs,前端vue3+typescript

SSE: server-sent events 服务端发送事件

---

---

前言

提示文档地址：https://developer.mozilla.org/zh-CN/docs/Web/API/EventSource
W3C组织官方：https://www.w3cschool.cn/nwfchn/wpi3cozt.html

1、SSE是什么？

传统的网页都是浏览器向服务器“查询”数据，但是很多场合，最有效的方式是服务器向浏览器“发送”数据。比如，每当收到新的电子邮件，服务器就向浏览器发送一个“通知”，这要比浏览器按时向服务器查询（polling）更有效率。

服务器发送事件（Server-Sent Events，简称SSE）就是为了解决这个问题，而提出的一种新API，部署在EventSource对象上。目前，除了IE，其他主流浏览器都支持。

所谓SSE，就是浏览器向服务器发送一个HTTP请求，然后服务器不断单向地向浏览器推送“信息”（message）。这种信息在格式上很简单，就是“信息”加上前缀“data: ”，然后以“\n\n”结尾。

2、SSE与WebSocket区别

SSE与WebSocket有相似功能，都是用来建立浏览器与服务器之间的通信渠道。两者的区别在于：

• WebSocket是全双工通道，可以双向通信，功能更强；SSE是单向通道，只能服务器向浏览器端发送。

• WebSocket是一个新的协议，需要服务器端支持；SSE则是部署在HTTP协议之上的，现有的服务器软件都支持。

• SSE是一个轻量级协议，相对简单；WebSocket是一种较重的协议，相对复杂。

• SSE默认支持断线重连，WebSocket则需要额外部署。

• SSE支持自定义发送的数据类型。

从上面的比较可以看出，两者各有特点，适合不同的场合。

SSE 特点：简单的几句话概括

• 单向通道，HTTP协议，只要客户端不关，那么服务器就一直给浏览器发送流信息，不支持客户端向服务器发送请求。
• 只支持文本传输，其他格式需要转为二进制
• 不支持IE ,因为前端使用EventSource对象,是属于ES -next
• 默认支持断线重连

场景：

思考:某个项目的实时数据怎么处理，为什么这么考虑，如果你能很好的理解，就显而易见看出你的水平。

场景：获取实时数据
SSE适用场景是指服务器向客户端实时推送数据的场景，例如：

• 股票价格更新：服务器可以根据股市的变化，实时地将股票价格推送给客户端，让客户端能够及时了解股票的走势和行情。
• 新闻实时推送：服务器可以根据新闻的更新，实时地将新闻内容或标题推送给客户端，让客户端能够及时了解最新的新闻动态和信息。
• 在线聊天：服务器可以根据用户的发送，实时地将聊天消息推送给客户端，让客户端能够及时收到和回复消息。
• 实时监控：服务器可以根据设备的状态，实时地将监控数据或报警信息推送给客户端，让客户端能够及时了解设备的运行情况和异常情况。

SSE适用场景的特点

• 数据更新频繁：服务器需要不断地将最新的数据推送给客户端，保持数据的实时性和准确性。
• 低延迟：服务器需要尽快地将数据推送给客户端，避免数据的延迟和过期。
• 单向通信：服务器只需要向客户端推送数据，而不需要接收客户端的数据。
• chatGPT 返回的数据 就是使用的SSE 技术
• 实时数据大屏 如果只是需要展示 实时的数据可以使用SSE技术 而不是非要使用webSocket

---

一、前端

发送请求

const getOrderData = () => {
   
  const source = new