Server-Sent 事件（SSE）是一种在 Web 浏览器中实现服务器推送实时事件的技术。使用 Server-Sent 事件可以构建实时通信、监控仪表盘等应用。
本文将介绍如何使用 Express 和 SSE 构建 Server-Sent 应用，并提供代码示例。
准备工作
在使用 Express 和 SSE 构建 Server-Sent 应用之前，需要先安装 Node.js 和 Express。
安装 Node.js 和 Express 的方法请参考官方文档。
创建 Express 应用
使用 Express 创建一个新的应用：
const express = require('express');
const app = express();设置 SSE 头部
在使用 SSE 技术向客户端推送事件之前，需要设置 SSE 头部：
app.get('/events', (req, res) => {
res.setHeader('Content-Type', 'text/event-stream');
});SSE 头部包括 Content-Type 和 Cache-Control 两个头部字段，其中 Content-Type 表示响应内容的类型为 text/event-stream，Cache-Control 表示响应内容不缓存。
使用 SSE 事件
使用 SSE 事件可以向客户端推送事件。SSE 事件包含以下格式：
event: [event name] data: [event data]
其中，event 表示事件名称，data 表示事件数据。使用 SSE 事件的方法如下：
app.get('/events', (req, res) => {
res.setHeader('Content-Type', 'text/event-stream');
setInterval(() => {
res.write('data: hello world\n\n');
}, 1000);
});上述代码使用 setInterval 每秒向客户端推送一条数据。
使用 SSE id
客户端可以使用 lastEventId 设置 SSE id，以便继续接收从指定 id 开始的 SSE 事件。
使用 SSE id 的方法如下：
-- -------------------- ---- -------
------------------ ----- ---- -- -
----------------------------- ---------------------
--- -- - --
-------------- -- -
-------------- ----------
---------------- ----- ------------
-----
-- ------
---上述代码使用自增 id 向客户端推送 SSE 事件。
SSE 事件的浏览器支持
SSE 事件具有广泛的浏览器支持，包括 Chrome、Firefox、Safari、Edge 等主流浏览器。但是，部分浏览器还未完全支持 SSE 事件，例如 Internet Explorer。
示例代码
下面是一个完整的 SSE 事件应用代码示例：
-- -------------------- ---- -------
----- ------- - -------------------
----- --- - ----------
------------------ ----- ---- -- -
----------------------------- ---------------------
--- -- - --
-------------- -- -
-------------- ----------
---------------- ----- ------------
-----
-- ------
---
---------------- -- -- -
-------------------- --- --------- -- ---- --------
---总结
本文介绍了如何使用 Express 和 SSE 构建 Server-Sent 应用，并提供了代码示例。通过学习本文，读者可以更深入了解 SSE 技术，并将其应用到实际的项目中。
来源：JavaScript中文网 ，转载请注明来源 https://www.javascriptcn.com/post/649839b548841e9894549a3d