使用 Server-sent Events 实现在线用户列表

阅读时长 5 分钟读完

在现代 Web 应用程序中,实时性变得越来越重要,因为用户期望能够看到实时更新的数据。例如,在线聊天应用程序中,用户希望能够看到其他用户的在线状态,并且在其他用户加入或离开聊天室时能够及时通知他们。本文将介绍如何使用 Server-sent Events(SSE)来实现在线用户列表。

什么是 Server-sent Events?

Server-sent Events 是一种 Web 技术,用于在客户端和服务器之间建立单向连接,以便服务器可以向客户端发送事件。这些事件可以是任何类型的数据,例如 JSON、XML、HTML 或纯文本。通常,SSE 用于实现实时通知、实时数据更新和实时聊天等功能。

SSE 基于 HTTP 协议,因此可以与现有的 Web 技术(例如 AJAX、WebSocket 和 RESTful API)一起使用。与 WebSocket 不同,SSE 仅支持单向通信,因此只能从服务器向客户端发送事件。这使得 SSE 更适合用于实现向客户端推送实时数据的应用程序。

实现在线用户列表

现在,我们将使用 SSE 来实现在线用户列表。首先,我们需要在服务器端创建一个 SSE 端点,以便客户端可以连接到它并接收事件。以下是一个示例 SSE 端点的 Node.js 实现:

-- -------------------- ---- -------
----- ---- - ----------------

----- ------ - ----------------------- ---- -- -
  -- -------- --- ---------- -
    ------------------ -
      --------------- --------------------
      ---------------- -----------
      ------------- ------------
    ---

    -- ----- --- ----- -- ---- ------ -- -------
  - ---- -
    -------------------
    ----------
  -
---

--------------------

在上面的代码中,我们创建了一个 HTTP 服务器并监听端口 3000。如果客户端请求的 URL 是 /events,则我们将向客户端发送 SSE 事件。为此,我们需要设置一些 HTTP 响应头,包括 Content-TypeCache-ControlConnection。然后,我们可以在 TODO 注释下方添加逻辑来向客户端发送事件。

现在,我们需要决定什么时候向客户端发送事件。在本例中,我们将在用户加入或离开聊天室时发送事件。为此,我们需要维护一个在线用户列表,并在用户加入或离开聊天室时更新该列表。以下是一个示例实现:

-- -------------------- ---- -------
----- ----- - --- ------

-------- --------------- -
  ------------------
  --------------- -------- - ------ ---
-

-------- ------------------ -
  ---------------------
  --------------- ------ - ------ ---
-

-------- ---------------- ----- -
  ----- ------- - ------- --------------- -----------------------------
  ----------------------------- -- -----------------------
-

在上面的代码中,我们使用一个 Set 来存储在线用户的 ID。当用户加入聊天室时,我们将其 ID 添加到 users 集合中,并向所有客户端发送一个 user joined 事件,其中包含用户的 ID。当用户离开聊天室时,我们将其 ID 从 users 集合中删除,并向所有客户端发送一个 user left 事件,其中包含用户的 ID。

注意,我们在 sendEvent 函数中将事件和数据格式化为 SSE 格式,并使用 server.clients.forEach 循环遍历所有连接到 SSE 端点的客户端,并通过 client.write 方法将事件发送到客户端。

现在,我们已经在服务器端实现了在线用户列表的逻辑,接下来让我们看看如何在客户端中连接到 SSE 端点并接收事件。以下是一个示例实现:

-- -------------------- ---- -------
----- ----------- - --- -----------------------

---------------------------------- -------- ----- -- -
  ----- ---- - -----------------------
  ----------------- -------------- ------ --- -------
---

---------------------------------- ------ ----- -- -
  ----- ---- - -----------------------
  ----------------- -------------- ---- --- -------
---

在上面的代码中,我们创建了一个 EventSource 对象,并将其连接到 SSE 端点的 URL(即 /events)。然后,我们通过 addEventListener 方法为 user joineduser left 事件注册回调函数。当服务器向客户端发送这些事件时,回调函数将被调用,并将包含事件数据的 event 对象作为参数传递给它们。我们可以通过 JSON.parse 方法将事件数据转换为 JavaScript 对象,并从中提取用户的 ID。

现在,当用户加入或离开聊天室时,客户端将收到相应的事件,并在控制台中显示相应的消息。

结论

在本文中,我们介绍了 Server-sent Events 技术,并使用它来实现了在线用户列表。通过 SSE,我们可以在客户端和服务器之间建立单向连接,并实时向客户端推送数据。这使得 SSE 成为实现实时通知、实时数据更新和实时聊天等功能的理想选择。如果您正在开发一个需要实时性的 Web 应用程序,那么 SSE 绝对值得一试。

来源:JavaScript中文网 ,转载请注明来源 https://www.javascriptcn.com/post/675bea88a4d13391d8fbbffa

纠错
反馈