在 Web 开发中，实时推送是一个非常重要的特性，它可以让用户在不刷新页面的情况下获取最新的数据。其中，SSE（Server-Sent Events）是一种支持浏览器实时接收服务器推送消息的技术，在前端开发中应用广泛。本文将介绍如何使用 Express.js 实现 SSE 的实时推送，并提供示例代码。
SSE 的基本原理
SSE 是基于 HTTP 协议的一种实时推送技术，它使用了 HTTP 的长连接来实现服务器向客户端实时推送数据。SSE 的基本原理如下：
- 客户端向服务器发送 HTTP 请求，请求头中包含了
Accept: text/event-stream表示客户端需要接收 SSE 数据。 - 服务器接收到请求后，将建立一个长连接，并发送一个 HTTP 响应，响应头中包含了
Content-Type: text/event-stream表示服务器将使用 SSE 数据格式进行推送。 - 服务器向客户端发送数据，数据格式为
event: eventName\ndata: eventData\n\n，其中eventName表示事件名称，eventData表示事件数据。每个事件以两个换行符结尾，表示事件结束。 - 客户端接收到数据后，使用 JavaScript 的
EventSource对象解析数据，并触发相应的事件。
使用 Express.js 实现 SSE
在 Express.js 中实现 SSE 的关键在于建立长连接和向客户端发送 SSE 数据。下面是一个示例代码：
----- ------- - ------------------
----- --- - ---------
--------------- ----- ---- -- -
------------------ -
--------------- --------------------
---------------- -----------
------------- ------------
--
-------------- -- -
----- ---- - ------- -------------- ----- ------------
---------------
-- -----
--
---------------- -- -- -
------------------- -- ------- -- ---- -------
--在上面的代码中，我们定义了一个路由 /sse，当客户端访问该路由时，服务器将建立一个长连接，并每隔一秒钟向客户端发送一个 SSE 数据。
其中，res.writeHead 方法设置了响应头，包括 Content-Type 表示使用 SSE 数据格式，Cache-Control 表示不缓存响应结果，Connection 表示使用长连接。
在 setInterval 中，我们使用 res.write 方法向客户端发送 SSE 数据。其中，事件名称为 message，事件数据为当前时间。每个事件以两个换行符结尾，表示事件结束。
客户端代码
在客户端中，我们可以使用 JavaScript 的 EventSource 对象来接收 SSE 数据。下面是一个示例代码：
----- ------ - --- ------------------- ---------------------------------- ------- -- - ----------------------- --
在上面的代码中，我们创建了一个 EventSource 对象，指定了 SSE 数据的来源为 /sse。然后我们使用 addEventListener 方法监听事件 message，并在事件触发时输出事件数据。
总结
本文介绍了如何使用 Express.js 实现 SSE 的实时推送，并提供了示例代码。在实际开发中，我们可以使用 SSE 技术来实现实时聊天、实时通知等功能。同时，我们还需要注意 SSE 数据格式的规范和浏览器的兼容性。
来源：JavaScript中文网 ，转载请联系管理员！ 本文地址：https://www.javascriptcn.com/post/650d31e595b1f8cacd6e8aec