在现代化的 Web 应用中，实时消息推送已经成为了许多应用的必备特性，而 Server-Sent Events（SSE）则是一种方便易用的实现方法。本文将介绍 SSE 的基本原理、使用方法，并提供一个简单的示例代码。
什么是 Server-Sent Events？
SSE 是一种浏览器与服务器之间的单向通信协议，它允许服务器端向客户端发送事件流，从而实现实时消息推送的效果。相比于其他实时通信技术，如 WebSocket 或轮询（Polling），SSE 更加轻量级，并且可以通过普通的 HTTP 连接进行传输。
SSE 的核心是使用 EventSource 对象来与服务器建立长连接，接收来自服务器的事件流。当服务器端有新的消息需要推送时，它只需要简单地将消息以事件流的形式发送至浏览器端即可，而无需浏览器主动发起请求。因此，SSE 能够有效减少网络延迟和服务端资源的开销，同时也能够提高通信的稳定性。
如何使用 Server-Sent Events？
在客户端，我们可以使用 JavaScript 内置的 EventSource 对象来与服务器端建立 SSE 连接：
----- ------ - --- -------------------- ---------------------------------- ------- -- - ------------------------ --- ------------------------------- -- -- - ---------------- ---------- ---------- --- -------------------------------- ------- -- - ------------------ ------ ----------- ---
上述代码中，我们使用 EventSource 对象通过 URL /sse 建立 SSE 连接，并添加了三个事件监听器：
message：当服务器端发送新的消息时触发。open：连接建立成功时触发。error：连接发生错误时触发。
在服务器端，我们可以使用一些流行的 Web 框架（如 Express 或 Koa）来轻松地实现 SSE：
----- ------- - -------------------
----- --- - ----------
--------------- ----- ---- -- -
---------
--------------- --------------------
---------------- -----------
------------- ------------
---
-------------- -- -
----- ---- - ------ ---------------------------- - ---------
---------------- --------------
-- ------
---
---------------- -- -- -
---------------------- -- ---- --------
---上述代码中，我们创建了一个简单的 Express 应用，并定义了一个 /sse 的路由。在路由处理函数中，我们设置了响应头的 Content-Type 为 text/event-stream，指明这是一个 SSE 连接；同时也设置了 Cache-Control 和 Connection 等字段，以确保响应头和保持长连接。
针对这个示例，服务器端每隔 1 秒钟发送一条消息，消息内容为当前时间加上固定的字符串。在每个消息体中，我们都需要使用 data 字段将消息体包裹起来，并在每条消息之间添加 \n\n 以便响应流能够被正常解析。
总结
通过使用 Server-Sent Events 实现实时消息推送，我们可以轻松地构建出高性能、低延迟的实时通信应用。在开发过程中，我们只需要了解 SSE 的基本原理和使用方法，就能够快速地完成实现。
当然，在真实场景中，SSE 还需要考虑诸如断线重连、消息重传等复杂情况下的处理，以确保其可靠性和稳定性。不过这些内容已经超出了本篇文章
来源：JavaScript中文网 ，转载请注明来源 本文地址：https://www.javascriptcn.com/post/65c6881cadd4f0e0ff0de731