前言
在互联网应用中，实时在线人数统计是一个非常常见的需求。今天我们来介绍如何使用 Socket.io 实现在线人数统计功能。
Socket.io 是一个实时通讯库，它基于 WebSockets、HTTP 长轮询和其他实时通讯技术，可以用来在客户端和服务端之间实现双向通讯。使用 Socket.io，我们可以轻松地实现实时在线人数统计等功能。
在这篇文章中，我们将使用 Node.js 和 Socket.io 来实现一个实时在线人数统计的功能。我们将讲解如何搭建和运行一个简单的 Node.js 服务器，以及如何使用 Socket.io 实现在线人数统计功能。
搭建 Node.js 服务器
在开始之前，我们需要先搭建一个 Node.js 服务器。如果你已经搭建好了，可以跳过这一节。
-- -------------------- ---- ------- - -------- ----- ------------------- - ----- -- ------------------- - --- ------- -- --- ---- -- - -- ------- --- ------- ------- - ---- --------- -- ----- ---------
在 server.js 文件中，我们将编写我们的服务器端代码。这里我们使用 Express 框架来搭建我们的服务器。
-- -------------------- ---- ------- -- -- ------- -- ----- ------- - ------------------- -- -- ------- -- ----- --- - ---------- -- ----- ----- ---- - ----- -- ----- ---------------- -- -- - ------------------- -- ------- -- ---- ---------- ---
接下来，我们可以运行 node server.js 命令来启动我们的服务器。此时，我们在浏览器中访问 http://localhost:3000，应该可以看到一个欢迎页面。
使用 Socket.io 实现在线人数统计功能
现在我们已经搭建好了一个 Node.js 服务器，接下来我们将使用 Socket.io 来实现在线人数统计功能。
首先，我们需要安装 Socket.io：
npm install socket.io
然后，在 server.js 文件中引入 Socket.io 依赖，并创建一个 Socket.io 对象。
// 引入 Socket.io 模块
const socket = require('socket.io');
// 创建 Socket.io 对象
const io = socket(server);server 是我们在 Express 中创建的 HTTP 服务器。现在我们可以在 io 对象上监听客户端连接事件，并在连接建立时更新在线人数。
-- -------------------- ---- -------
-- -------------
--- ----------- - --
------------------- ------ -- -
-- ------
--------------
-- ----------
---------------------- -------------
-- ------
----------------------- -- -- -
--------------
---------------------- -------------
---
---在连接事件处理函数中，我们使用一个变量 onlineCount 来记录在线人数。每当有新的客户端连接时，我们就将在线人数加一，并使用 emit 方法将在线人数发送到所有客户端。当客户端断开连接时，我们将在线人数减一，并再次向所有客户端发送在线人数。
现在我们需要在客户端上监听在线人数事件，并在事件触发时更新界面。为了方便起见，我们在 server.js 中添加一行代码，将静态文件目录设置为当前目录。
// 设置静态文件目录 app.use(express.static(__dirname));
在客户端 html 文件中，我们引入 Socket.io 依赖，并编写如下代码：
-- -------------------- ---- -------
--------- -----
----- ----------
------
----- ----------------
---------------- ------------
------- ---------------------------------------
--------
-- -- --------- --
----- ------ - -----
-- --------
------------------------ ----------- -- -
------------------------------------------------ - ------------
---
---------
-------
------
--------------- -----------------------------
-------
-------在客户端代码中，我们通过 io() 函数创建一个 Socket.io 对象，并监听 onlineCount 事件。每当在线人数变化时，我们就将在线人数更新到界面上。
现在，我们启动 Node.js 服务器并打开浏览器访问 http://localhost:3000，应该可以看到一个在线人数为 0 的界面。如果我们同时打开多个浏览器访问这个界面，就可以看到在线人数实时更新。
结论
通过使用 Socket.io，我们可以轻松地实现在线人数统计等实时功能。在这篇文章中，我们介绍了如何搭建一个 Node.js 服务器，并使用 Socket.io 实现在线人数统计功能。同时，我们也讲解了 Socket.io 的基本用法和原理。
希望本文对你学习 Socket.io 有所帮助。完整的示例代码可以在这里找到。
来源：JavaScript中文网 ，转载请注明来源 https://www.javascriptcn.com/post/66f7f9dcc5c563ced5b6824b