什么是 SSE？
SSE（Server-Sent Events）是一种基于 HTTP 协议的实时数据推送技术，它允许服务器实时向客户端推送数据。与 WebSocket 相比，SSE 更加简单，仅需要浏览器原生支持即可，无需像 WebSocket 那样需要建立全双工的连接。
SSE通过一个长连接维持和服务器的通信，当服务器有新的数据需要推送时，直接在这个连接上发送数据，浏览器通过监听这个连接就能够实时获得新的数据。
在线状态监测的需求
在开发前端项目中，有时需要实现在线状态监测的功能，比如企业内部的即时通讯工具，需要知道用户是否在线。
我们可以通过使用 SSE 技术来实现在线状态监测，将服务器上的 Ping 命令的结果通过 SSE 推送给客户端，通过监听这个连接就能够实时获得用户的在线状态。
服务器端的实现
使用 Node.js 来实现服务器端的代码，首先需要安装 sse 和 ping 两个 npm 包。
const http = require('http');
const sse = require('sse');
const ping = require('ping');
const server = http.createServer((req, res) => {
// SSE 路由
if (req.url === '/sse') {
const client = new sse(req, res);
// 建立长连接
setInterval(() => {
// 使用 ping 命令获取本地 IP 的状态
ping.promise.probe('localhost').then((result) => {
// 发送 ping 命令的结果
client.send(result.alive);
});
}, 1000);
} else {
res.writeHead(404);
res.end();
}
});
server.listen(8080, () => {
console.log('Server started');
});在这个代码中，我们创建了一个 HTTP 服务器，监听在 8080 端口。当客户端请求 /sse 路由时，我们使用 sse 库的 sse 函数来创建一个 SSE 对象，同时在这个对象上注册 send 事件，每隔 1 秒钟就使用 ping 命令来获取本地 IP 的状态，并将结果通过 send 事件推送给客户端。
客户端的实现
在客户端代码中，我们需要使用 JavaScript 来监听 SSE 的事件，并获取到服务器推送的数据。
<html>
<head>
<title>SSE Ping Demo</title>
</head>
<body>
<p id="status">未知</p>
<script>
if (typeof(EventSource) !== "undefined") {
const source = new EventSource("/sse");
source.addEventListener("message", (event) => {
const status = event.data === "true" ? "在线" : "离线";
document.getElementById("status").innerHTML = status;
});
} else {
document.getElementById("status").innerHTML = "您的浏览器不支持 SSE";
}
</script>
</body>
</html>在这个代码中，我们先判断浏览器是否支持 SSE，如果支持就创建一个 SSE 对象，并监听 message 事件，当服务器推送新的数据时，就执行回调函数来更新页面上的状态。
总结
使用 SSE 技术可以很好地实现在线状态监测的功能，通过这个项目的实现，我们了解了 SSE 的基本原理和用法，也学习了如何借助 Node.js 来快速开发服务器端的代码，同时也学习了如何使用 JavaScript 来监听 SSE 事件，处理服务器推送的数据。
这个项目的源代码托管在 GitHub 上，有兴趣的读者可以前往查看：https://github.com/username/sse-ping-demo。
来源：JavaScript中文网 ，转载请注明来源 本文地址：https://www.javascriptcn.com/post/65a843a9add4f0e0ff166ad5