在现代 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-Type
、Cache-Control
和 Connection
。然后,我们可以在 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 joined
和 user left
事件注册回调函数。当服务器向客户端发送这些事件时,回调函数将被调用,并将包含事件数据的 event
对象作为参数传递给它们。我们可以通过 JSON.parse
方法将事件数据转换为 JavaScript 对象,并从中提取用户的 ID。
现在,当用户加入或离开聊天室时,客户端将收到相应的事件,并在控制台中显示相应的消息。
结论
在本文中,我们介绍了 Server-sent Events 技术,并使用它来实现了在线用户列表。通过 SSE,我们可以在客户端和服务器之间建立单向连接,并实时向客户端推送数据。这使得 SSE 成为实现实时通知、实时数据更新和实时聊天等功能的理想选择。如果您正在开发一个需要实时性的 Web 应用程序,那么 SSE 绝对值得一试。
来源:JavaScript中文网 ,转载请注明来源 https://www.javascriptcn.com/post/675bea88a4d13391d8fbbffa