介绍
在 Web 应用中，实现在线用户列表是一个常见的需求。本文将介绍如何使用 Node.js 和 Socket.io 实现在线用户列表。
Node.js 是一种基于 Chrome V8 引擎的 JavaScript 运行环境，可以在服务器端运行 JavaScript 代码。Socket.io 是一个实时通信库，可以在客户端和服务器之间建立实时、双向的通信。
在本文中，我们将使用 Node.js 和 Socket.io 来实现在线用户列表，用户可以在 Web 应用中看到当前在线的用户。
实现
安装依赖
首先，我们需要安装 Node.js 和 Socket.io。可以在官网上下载 Node.js，并使用以下命令安装 Socket.io：
npm install socket.io
创建服务器
我们需要创建一个 Node.js 服务器来处理客户端连接和消息。以下是一个简单的服务器代码：
-- -------------------- ---- -------
----- --- - -------------------------------
----- -- - --------------------------
----- ---- - -----
------------------- -------- -- -
---------------- ---- ---------- ---------------
----------------------- -- -- -
----------------- ------------- ---------------
---
---
---------------- -- -- -
------------------- --------- -- ---- ----------
---上述代码创建了一个 HTTP 服务器，并使用 Socket.io 包装它。当一个客户端连接到服务器时，会触发 connection 事件。我们可以在事件处理程序中打印客户端的 ID。当客户端断开连接时，会触发 disconnect 事件。
实现在线用户列表
现在，我们可以开始实现在线用户列表。我们需要跟踪每个连接到服务器的客户端，以便在需要时更新在线用户列表。
以下是一个实现在线用户列表的代码：
-- -------------------- ---- -------
----- --- - -------------------------------
----- -- - --------------------------
----- ---- - -----
----- ----- - --- ------
------------------- -------- -- -
---------------- ---- ---------- ---------------
---------------------
---------------- -------------------
----------------------- -- -- -
----------------- ------------- ---------------
------------------------
---------------- -------------------
---
---
---------------- -- -- -
------------------- --------- -- ---- ----------
---上述代码使用了 ES6 的 Set 类型来存储在线用户的 ID。当一个客户端连接到服务器时，我们将其 ID 添加到 Set 中，并使用 io.emit 方法向所有客户端广播在线用户列表。当一个客户端断开连接时，我们将其 ID 从 Set 中删除，并再次使用 io.emit 方法向所有客户端广播在线用户列表。
创建客户端
最后，我们需要创建一个客户端来连接到服务器并显示在线用户列表。以下是一个简单的客户端代码：
-- -------------------- ---- -------
--------- -----
------
------
------------- -------------
------- ---------------------------------------
-------
------
---------- ----------
--- ----------------
--------
----- ------ - -----
----- -------- - ---------------------------------
------------------ ------- -- -
------------------ - ---
-------------------- -- -
----- -- - -----------------------------
------------ - -----
-------------------------
---
---
---------
-------
-------上述代码使用 Socket.io 客户端库连接到服务器，然后监听 users 事件。当客户端收到在线用户列表时，它会清空用户列表并重新创建每个用户的列表项。最后，它将列表项添加到 HTML 中的 ul 元素中。
运行应用
最后，我们需要运行服务器和客户端。可以使用以下命令运行服务器：
node server.js
然后，打开浏览器并访问 http://localhost:3000，即可看到在线用户列表。
结论
本文介绍了如何使用 Node.js 和 Socket.io 实现在线用户列表。我们创建了一个 Node.js 服务器来处理客户端连接和消息，并使用 Socket.io 实现了实时通信。最后，我们创建了一个简单的客户端来连接到服务器并显示在线用户列表。这个例子可以帮助你了解如何使用 Node.js 和 Socket.io 构建实时应用。
来源：JavaScript中文网 ，转载请注明来源 https://www.javascriptcn.com/post/675523f01b963fe9cc522a26