什么是 Server-sent Events (SSE)?
Server-sent Events (SSE) 是一项基于 HTTP 协议的浏览器和 web 服务器之间的通信技术，它使得服务器可以主动地、实时地向客户端推送数据。SSE 是一种轻量级的、简洁的、可靠的推送方案，它与 WebSocket 相比具有更简单的 API 和非常小的 overhead。在很多场景下，SSE 都是一种非常好的选择。
在线监控功能
今天我们要介绍的是使用 SSE 实现的在线监控功能。在线监控功能是一种常见的需求，它通常用于实时监控用户的行为或者统计系统的运行情况。使用 SSE 技术可以实现实时更新数据，无需多次向服务器发送请求，从而大大降低了服务器的负担。
实现步骤
- 在服务器端开启 SSE 支持
要使用 SSE 技术，需要在服务器端开启 SSE 的支持。在 Express 框架中，可以通过引入 sse-express 插件实现 SSE 支持，代码如下：
const sseExpress = require('sse-express');
const app = express();
app.get('/sse', sseExpress(), (req, res) => {
// TODO: 编写 SSE 事件逻辑
});通过上述代码，我们已经成功地开启了 SSE 的支持。接下来，我们需要编写 SSE 事件逻辑，真正实现在线监控的功能。
- 监听 SSE 事件
为了实现在线监控功能，我们需要在服务器端监听某些事件，并将相关信息推送给客户端。在 SSE 中，服务器端可以使用 res.sse() 方法向客户端发送事件，代码如下：
app.get('/sse', sseExpress(), (req, res) => {
setInterval(() => {
const data = { time: new Date().toLocaleTimeString() };
res.sse(`data: ${JSON.stringify(data)}\n\n`);
}, 1000);
});上述代码中，我们使用 setInterval 函数每秒钟向客户端推送一次时间信息。res.sse() 方法的参数是一个字符串，其中包含了需要向客户端推送的事件数据，同时需要注意字符串的格式需满足 SSE 的规范。
- 接收 SSE 事件
在客户端，我们需要通过 EventSource 对象来接收 SSE 事件。示例代码如下：
const source = new EventSource('/sse');
source.onmessage = e => {
const data = JSON.parse(e.data);
console.log(data);
};上述代码中，我们创建了一个 EventSource 对象，并监听了 onmessage 事件来接收 SSE 事件。在 onmessage 事件的处理函数中，我们可以获取到事件的数据，并对其进行相应的处理。
参考资料
总结
本文介绍了如何使用 SSE 技术实现在线监控功能，并给出了详细的实现步骤和示例代码。SSE 技术具有轻量级、简洁、可靠的特点，在很多场景下都是一种非常好的选择。希望本文对读者能够有所启发，更好地应用 SSE 技术解决实际问题。
来源：JavaScript中文网 ，转载请注明来源 https://www.javascriptcn.com/post/6518ba4e95b1f8cacd107963