前言
对于一个网站，用户的在线状态是非常关键的，可以让用户更加了解对方的在线状况，这在社交网站中尤为重要。本文介绍如何使用 Server-sent Events（SSE）实现用户的在线状态的显示。
什么是 SSE？
SSE（Server-sent Events）是一种在 Web 端发送实时事件的技术。它允许服务器端向客户端实时推送数据，并以 DOM 事件的形式接收到数据。
使用 SSE 可以让我们轻松地实现 Web 服务器和客户端之间的实时通信，而无需利用传统的轮询技术。
实现过程
前端代码
我们首先需要在前端代码中引入 SSE，这可以通过以下代码实现：
const sse = new EventSource('/sse');这里我们定义了一个名为 sse 的 EventSource 对象，并将其源设置为 /sse。接下来，我们需要给这个 sse 对象添加一个 message 的监听器，来处理从服务器端发送的数据。
sse.onmessage = (event) => {
const data = JSON.parse(event.data);
// 在页面中显示用户在线状态
document.getElementById(data.id).innerText = data.status;
}这段代码中我们定义了一个 message 事件的监听器，并在该监听器中读取从服务器发送的数据。对于每个接收到的数据，我们使用其 ID 属性查找对应的元素，并将其在线状态更新为收到的数据。
后端代码
我们需要在服务器端将 SSE 用于向客户端发送实时事件。服务器端代码如下：
-- -------------------- ---- -------
----- ---- - ----------------
----- --- - ---------------
----------------------- ---- -- -
----- ---- - ----------------------------
-- ----- --- ------- -
------------------ -
--------------- --------------------
---------------- -----------
------------- ------------
---
----------------
-- ----
-------------- -- -
-------------- ------
---------------- ------ ---- --------- ----------------
-- ------
-
----------------这段代码使用 Node.js 的 http 模块创建了一个 HTTP 服务器，并将其运行在 8080 端口上。首先，我们对访问路径为 /sse 的请求使用了响应头设置 Content-Type 为 text/event-stream，以及设置 Cache-Control 为 no-cache 和 Connection 为 keep-alive，以保证服务器端与客户端之间的持久性连接。
接下来，我们在这个请求上使用了一个setInterval 计时器，以每秒钟向客户端发送一条数据。这里我们定义了一个 ID 为 1 的用户，并将其在线状态设置为在线。
总结
SSE 可以让我们轻松地实现 Web 服务器与客户端之间的实时通信。在本文中，我们介绍了如何使用 SSE 来实现用户的在线状态的显示，并提供了一份完整的前端和后端示例代码。希望这篇文章对你有所帮助！
来源：JavaScript中文网 ，转载请注明来源 https://www.javascriptcn.com/post/66486f13d3423812e470eaf0