介绍
Server-sent Events（SSE）是 HTML5 API 中的一种实时推送技术，它允许服务器推送事件数据到客户端的 Web 浏览器。与 WebSocket 相比，SSE 更加灵活且不需要建立双向连接，可以在服务器发生事件时向客户端发送数据，使得服务端和客户端之间的实时通信成为可能。
在 Node.js 中，我们可以使用 npm 库 express-sse 来实现 SSE 推送。express-sse 是基于 express 框架开发的一种中间件，可以在服务器上配置 SSE 服务，为客户端提供实时数据推送。
本文将介绍如何使用 npm 库 express-sse 来实现 SSE 推送，包括安装、配置和使用方法，并提供示例代码和实用小技巧。
安装和配置
使用 npm 安装 express-sse
npm install --save express-sse
在 Node.js 中引入 express-sse 模块
const SSE = require('express-sse');
创建 express-sse 实例
const sse = new SSE();
将 express-sse 中间件绑定到 express 服务器对象上
app.use('/sse', sse.init);
以上代码将 SSE 服务绑定到了路由 /sse 上，并使客户端能够通过改路径访问 SSE 服务。
使用方法
通过 sse.send() 方法向客户端实时推送数据
sse.send('hello');
上述代码会向所有已经建立连接的客户端推送 'hello' 数据。
同时也可以为不同的客户端单独推送
sse.send('hello', 'clientId');
上述代码会向 clientId 对应的客户端推送 'hello' 数据。
为 SSE 服务添加事件监听器，当发生特定事件时向所有已连接的客户端实时推送数据
sse.on('eventName', (data) => { sse.send(data); });
上述代码会监听 'eventName' 事件，并在事件发生时向所有已连接的客户端实时推送 data 数据。可以在这里实现服务端实时推送数据的逻辑。
示例代码
下面是一个完整的 SSE 示例代码：
server.js
-- -------------------- ---- ------- ----- ------- - ------------------- ----- --- - ----------------------- ----- --- - ---------- ----- --- - --- ------ -- --- ------- ---- --------------- ---------- -- -- ------- ------------ ------------------ -- ------- ------------------------ ---------------- ------ -- - --------------- --- -- -- ------- -- ---- -- ---------------- -- -- ------------------- ------- -- ---- ---------展开代码
client.html
-- -------------------- ---- ------- --------- ----- ------ ------ ----- --------------- -- ------------- ---- ------------ ------- ------ --- ------------------ -------- ----- ------- - ----------------------------------- ----- ------ - --- -------------------- -- -- --- ----------- ---------------------------------- ------- -- - ----- -- - ----------------------------- ------------ - ----------- ------------------------ --- -- ------- -------- ----------- - ------------------------ ----------------- - --------- ------- -------------------------- -------------- ------- -------展开代码
运行 server.js，并在浏览器中访问 client.html，可以看到在服务器端推送数据后，客户端的列表中实时添加新的数据，同时可以点击按钮向服务器发送自定义事件，并观察数据变化。
实用小技巧
express-sse 除了常规的 SSE 推送功能之外，还提供了一些实用小技巧，帮助我们更灵活地使用 SSE 服务。
向连接指定 ID 的客户端发送实时数据
sse.send('hello', 'clientId');
将 SSE 服务绑定到多个路由上
app.use(['/sse1', '/sse2'], sse.init);
修改 SSE 初始化函数的参数，以配置 HTTP 头信息
app.use('/sse', sse.init({ headers: { 'Content-Type': 'text/event-stream', 'Cache-Control': 'no-cache', 'Connection': 'keep-alive' } }));
以上就是在 Node.js 中使用 npm 库 express-sse 来实现 Server-sent Events 推送的简介。通过 express-sse 提供的 API，我们可以实现简单且灵活的 SSE 推送服务，为客户端提供实时更新的数据。
来源：JavaScript中文网 ，转载请注明来源 https://www.javascriptcn.com/post/67b6d330306f20b3a6323a50
