SSE(Server Sent Event)：
SSE HTML5新增的一种允许服务端向客户端推送实时更新的 Web API，基于普通的HTTP协议实现；
是单向的，服务器到客户端的实时通道
使用过程：
1. 服务端设置
- 服务器需要设置正确的
Content - Type：text/event - stream，以表明这是一个 SSE 流 - 特殊的格式：
data:内容， 多行就有多个data - 通过发送
event:行来指定事件类型，客户端可以根据不同的事件类型进行不同的处理 - 数据发送完毕后，需要以一个空行结束
event: custom - event // 指定事件类型
data: This is the first line of data.
data: This is the second line of data.
2. 客户端接收和处理:
- 使用
EventSource对象来接收 SSE 数据 - 当服务器发送数据时，
onmessage事件会处理一般的数据消息，addEventListener可以监听特定事件类型（如上述的custom - event）的数据消息并进行相应处理。
const eventSource = new EventSource('https://example.com/sse - endpoint');
eventSource.onmessage = function(event) {
console.log('Received data:', event.data);
};
eventSource.addEventListener('custom - event', function(event) {
console.log('Received custom - event data:', event.data);
});
SSE的优缺点：
- 优点：
- 简单易用：基于 HTTP 协议，容易理解和实现，对于只需要服务器推送数据的场景非常方便。
- 兼容性好：大多数现代浏览器都支持 SSE，包括 Chrome、Firefox、Safari 等。
- 局限性：
- 单向通信：只能从服务器向客户端推送数据，不能实现客户端向服务器发送数据。
- 可靠性问题：如果连接中断，重新建立连接可能会丢失部分数据，需要额外的机制来处理数据丢失和重新同步的问题。
WebSockets 可以通过在应用层实现心跳机制和消息确认机制来更好地处理消息丢失问题，而 SSE 在原生状态下较难做到这一点。
丢消息的解决方案：可以在服务器端为每个 SSE 连接维护一个消息队列，当客户端重新连接时，服务器可以根据队列中存储的消息重新发送丢失的数据。同样，在客户端也可以通过本地存储等方式缓存已经接收的消息，用于和新接收的消息进行比对，以检测和处理可能丢失的消息
HTTP2的服务端推送和SSE的区别是什么？
- SSE ： 侧重实现服务端实时 的将更新数据单向推送给客户端
- 股票行情、新闻推送、实时监控数
- HTTP2： 服务端主动推送则是在 优化资源获取效率 场景下；
- 服务端主动推送客户端 后续可能需要的资源， 像网页相关联的脚本、样式文件等，减少客户端请求的次数
SSE 与其他实时通信技术的比较
与传统 HTTP 轮询对比：
- 传统的 HTTP 轮询是客户端定时向服务器发送请求来获取最新数据。例如，每隔几秒就发送一个请求，询问服务器是否有新的数据。这种方式效率较低，因为大多数情况下服务器可能没有新的数据，这些请求就白白浪费了网络资源和服务器资源。而 SSE 是服务器主动推送数据，只有在有新数据时才会发送， 大大提高了效率。
与 WebSockets 对比：
- WebSockets 提供了全双工通信通道，客户端和服务器可以随时相互发送消息。SSE 则是单向的，仅从服务器向客户端推送消息。在一些只需要服务器推送数据的场景下，SSE 比 WebSockets 更简单易用，因为它基于 HTTP 协议，更容易理解和实现，并且可以直接在浏览器中使用，不需要像 WebSockets 那样进行协议升级等复杂操作。