在 Web 开发中，服务器与客户端之间的实时通讯变得越来越常见。而传统的轮询（Polling）和长轮询（Long Polling）技术不仅浪费带宽，而且反应不及时，影响用户体验。因此，HTML5 引入了 Server-Sent Events（SSE）技术，也就是服务器推送技术，以实现更高效、更快速的实时通讯。本文将向您介绍 Node.js 和 Express 中如何实现 SSE，让您的 Web 应用更加高效。
SSE 简介
SSE 是一种服务器推送技术，用于将实时信息从服务器传输到客户端，基于 HTTP 1.1 的机制，每次只能从服务器传输一条消息，但由于采用了长连接，所以能实现实时通讯。SSE 具有以下特点：
- SSE 使用常规的 HTTP 协议，不需要额外的握手或协商。
- SSE 建立的连接基于 HTTP，支持跨域。
- SSE 支持服务器的单向推送消息，适合处理实时数据、日志或聊天室等场景。
- SSE 支持自定义事件类型和消息数据。
实现 SSE
1. 服务端实现
Node.js 作为一个基于 JavaScript 的服务器端平台，天然支持 SSE。接下来，我们使用 Express 框架实现 SSE 服务端的代码。
首先引入 express 和 http 模块，并定义一个 SSE 路由，将应答头设置为 text/event-stream，表示使用 SSE 服务：
-- -------------------- ---- -------
----- ------- - -------------------
----- ---- - ----------------
----- --- - ----------
----- ------ - -----------------------
----- --------- - -------
------------------ ----- ---- -- -
----------------------------- ---------------------
------------------------------ ------------
--------------------------- --------------
----------------
-- --------
-------------- -- -
---------------- -----------------------
-- ------
-- -- --- --
--------------- -- -- -
---------------- ---------- ---------
---
---
------------------- -- -- -
------------------- --------- -- ---- -------
---上述代码定义了一个 GET 请求的 SSE 路由，并将应答头设置为 text/event-stream，表示使用 SSE 服务。然后在路由处理函数中，使用 setInterval 每秒向客户端发送数据，发送的数据格式为 data: ${data}\n\n，其中 data 为自定义数据。最后，在 req.close 事件中关闭 SSE 连接。
2. 客户端实现
客户端可以使用 EventSource 接口创建 SSE 通讯对象，使用 onmessage 事件处理 SSE 推送的消息。创建 SSE 实例时，需要将服务端 SSE URL 作为参数传递，如下所示：
const sse = new EventSource('/sse');
sse.onmessage = (event) => {
console.log(event.data); // 打印从服务端接收到的数据
};在上述代码中，定义了一个 SSE 通讯对象 sse，并将服务端 SSE URL 传递给 SSE 构造函数。然后，在 sse.onmessage 事件中处理 SSE 推送的消息，获取 data 属性并输出。
总结
本文向您介绍了如何在 Node.js 和 Express 中实现 SSE，只需要几行代码就可以快速实现实时通讯。SSE 可以改善传统轮询技术的缺陷，优化开发者和用户体验。希望这篇文章能够给您带来一些启示，让您更好地应用 SSE 技术。
来源：JavaScript中文网 ，转载请注明来源 https://www.javascriptcn.com/post/64d2321bb5eee0b52599315e