SSE 实现服务端推送消息
SSE（Server-Sent Events）是一种 HTML5 技术，允许浏览器从服务器接收实时事件（实时数据流），这使得服务器可以在任何时候将数据推送到客户端，而不需要客户端一直发送请求来获取数据。这就为实现实时通信提供了一个很好的解决方案。
一、SSE 基本原理
SSE 基于 HTTP 协议，它会在服务器和客户端之间建立一条持久化的连接通道。在连接建立之后，服务器就可以推送消息给客户端，并且客户端也可以通过一个特殊的 API 来接收这些消息。
SSE 与 WebSocket 不同，WebSocket 是一种双向的通信协议，可以在客户端和服务器之间双向发送消息，而 SSE 仅支持服务器向客户端发送消息。
二、SSE 使用步骤
- 新建一个事件流
在服务器端，我们需要创建一个事件流（EventStream），这个事件流代表了与客户端之间的一个连接。我们可以使用 Node.js 中的 EventSource 来创建这个事件流，示例代码如下：
-- -------------------- ---- -------
----- ---- - ----------------
----------------------- ---- -- -
------------------ -
--------------- --------------------
---------------- -----------
------------- ------------
---
----- -- - --------------
-------------- -- -
-------------- ----------
---------------- ----- -----------------------------------
-- ------
----------------在这段代码中，我们首先设置了响应头，Content-Type 表示为 text/event-stream，Cache-Control 设置为 no-cache，Connection 设置为 keep-alive。然后我们使用 setInterval() 来定时向客户端推送消息，消息格式符合 SSE 规范。
- 客户端建立连接
在客户端，我们需要建立一个 SSE 连接，使用一个 EventSource 对象来接收来自服务器的消息。EventSource 被添加到页面上的方法如下：
<head>
<script>
const eventSource = new EventSource('http://localhost:8080');
eventSource.onmessage = event => {
console.log(event.data);
}
</script>
</head>在这段代码中，我们建立了一个 EventSource 对象，并指定其连接的服务器地址。然后我们绑定了 onmessage 事件处理函数，当服务器推送消息时会触发这个事件。
- 向客户端发送消息
最后，我们在服务端定时向客户端推送消息，在客户端就可以实时接收到来自服务器的推送消息了。
三、SSE 的优劣势
- 优势
（1）与 WebSocket 相比，SSE 更容易实现和部署，可以在现有的 HTTP 技术基础上轻松构建。
（2）SSE 可以通过 HTTP/2 配置使用多路复用，大大提高性能。
（3）SSE 使用心跳包机制，可以在连接中止时自动重连。
- 劣势
SSE 的劣势在于其只支持从服务器向客户端单向推送消息，无法实现双向通信；并且服务器端推送消息时，需要注意浏览器的缓存问题，需要添加相应的响应头。
四、总结
SSE 是一种简单易用的实时通信技术，可以实现服务器向客户端单向推送消息。它比 WebSocket 更易于部署和实现，而且可以与 HTTP/2 配置使用多路复用，大大提高性能。但它并不能实现双向通信，因此对于部分需要双向通信的应用场景，还需要使用 WebSocket 或其他技术。
来源：JavaScript中文网 ，转载请注明来源 https://www.javascriptcn.com/post/647809fd968c7c53b044f7c0