什么是 SSE？
SSE（Server-Sent Events）是一种基于 HTTP 协议的实时数据推送技术，它允许服务器实时向客户端推送数据。与 WebSocket 相比，SSE 更加简单，仅需要浏览器原生支持即可，无需像 WebSocket 那样需要建立全双工的连接。
SSE通过一个长连接维持和服务器的通信，当服务器有新的数据需要推送时，直接在这个连接上发送数据，浏览器通过监听这个连接就能够实时获得新的数据。
在线状态监测的需求
在开发前端项目中，有时需要实现在线状态监测的功能，比如企业内部的即时通讯工具，需要知道用户是否在线。
我们可以通过使用 SSE 技术来实现在线状态监测，将服务器上的 Ping 命令的结果通过 SSE 推送给客户端，通过监听这个连接就能够实时获得用户的在线状态。
服务器端的实现
使用 Node.js 来实现服务器端的代码，首先需要安装 sse 和 ping 两个 npm 包。
-- -------------------- ---- -------
----- ---- - ----------------
----- --- - ---------------
----- ---- - ----------------
----- ------ - ----------------------- ---- -- -
-- --- --
-- -------- --- ------- -
----- ------ - --- -------- -----
-- -----
-------------- -- -
-- -- ---- ------ -- ---
--------------------------------------------- -- -
-- -- ---- -----
--------------------------
---
-- ------
- ---- -
-------------------
----------
-
---
------------------- -- -- -
------------------- ----------
---在这个代码中，我们创建了一个 HTTP 服务器，监听在 8080 端口。当客户端请求 /sse 路由时，我们使用 sse 库的 sse 函数来创建一个 SSE 对象，同时在这个对象上注册 send 事件，每隔 1 秒钟就使用 ping 命令来获取本地 IP 的状态，并将结果通过 send 事件推送给客户端。
客户端的实现
在客户端代码中，我们需要使用 JavaScript 来监听 SSE 的事件，并获取到服务器推送的数据。
-- -------------------- ---- -------
------
------
---------- ---- ------------
-------
------
-- ------------------
--------
-- -------------------- --- ------------ -
----- ------ - --- --------------------
---------------------------------- ------- -- -
----- ------ - ---------- --- ------ - ---- - -----
------------------------------------------- - -------
---
- ---- -
------------------------------------------- - --------- -----
-
---------
-------
-------在这个代码中，我们先判断浏览器是否支持 SSE，如果支持就创建一个 SSE 对象，并监听 message 事件，当服务器推送新的数据时，就执行回调函数来更新页面上的状态。
总结
使用 SSE 技术可以很好地实现在线状态监测的功能，通过这个项目的实现，我们了解了 SSE 的基本原理和用法，也学习了如何借助 Node.js 来快速开发服务器端的代码，同时也学习了如何使用 JavaScript 来监听 SSE 事件，处理服务器推送的数据。
这个项目的源代码托管在 GitHub 上，有兴趣的读者可以前往查看：https://github.com/username/sse-ping-demo。
来源：JavaScript中文网 ，转载请注明来源 https://www.javascriptcn.com/post/65a843a9add4f0e0ff166ad5