前言
在 Web 应用程序中，服务器通常是被动的，只有当客户端发起请求时才会响应。但是，有些场景需要服务器主动向客户端推送数据，例如实时聊天、实时数据监控等。传统的实现方式是使用长轮询或 WebSocket，但是这些方案都有一些缺点。长轮询需要频繁的网络连接和断开，WebSocket 的实现复杂度较高。Server-Sent Events（SSE）是一种新的解决方案，它可以轻松地实现服务器端事件推送应用程序。
什么是 Server-Sent Events
Server-Sent Events（SSE）是一种基于 HTTP 的服务器端事件推送技术，它允许服务器向客户端推送任意数据，而不需要客户端发起请求。SSE 使用简单的文本格式传输数据，可以轻松地与现有的 HTTP 服务器和客户端通信库集成。
SSE 的优点如下：
- 简单易用：SSE 使用简单的文本格式传输数据，可以轻松地与现有的 HTTP 服务器和客户端通信库集成。
- 可靠性高：SSE 基于 HTTP，可以使用现有的网络基础设施，具有很高的可靠性。
- 实时性好：SSE 支持实时数据传输，可以实现实时聊天、实时数据监控等应用程序。
如何使用 Server-Sent Events
服务端实现
服务端需要遵循以下规则来实现 SSE：
- 使用 HTTP 协议。
- 使用 text/event-stream 类型的 MIME 类型。
- 发送数据时，每个数据块之间以空行分隔。
- 每个数据块由一个或多个字段组成，每个字段由字段名和字段值组成，用冒号分隔。字段名可以为 data、event、id 和 retry。
下面是一个 Node.js 实现 SSE 的示例代码：
-- -------------------- ---- ------- ----- ---- - ---------------- ----------------------- ---- -- - ------------------ - --------------- -------------------- ---------------- ----------- ------------- ------------- --- -------------- -- - ----- ---- - ------ ----- ---------------------------------- ---------------- -- ------ ----------------展开代码
该示例代码创建了一个 HTTP 服务器，每秒向客户端推送一个包含当前时间的数据块。
客户端实现
客户端需要使用 JavaScript 来实现 SSE。下面是一个使用浏览器原生 API 实现 SSE 的示例代码：
-- -------------------- ---- ------- ----- ----------- - --- -------------------- --------------------------------------- ------- -- - ----- ---- - ----------------------- ------------------ --- ------------------------------------- ------- -- - --------------------- ---展开代码
该示例代码创建了一个 EventSource 对象，用于接收服务器推送的数据。当收到数据时，会触发 message 事件，可以在事件处理函数中处理数据。当发生错误时，会触发 error 事件，可以在事件处理函数中处理错误。
总结
Server-Sent Events 是一种简单易用、可靠性高、实时性好的服务器端事件推送技术。使用 SSE 可以轻松地实现实时聊天、实时数据监控等应用程序。需要注意的是，SSE 不支持双向通信，如果需要双向通信，可以使用 WebSocket。
来源：JavaScript中文网 ，转载请注明来源 https://www.javascriptcn.com/post/658e0c50eb4cecbf2d3e1572
