在现代 Web 应用中，聊天室已经成为了一个常见的功能。在聊天室中，我们通常需要显示在线人数，这对于用户来说是一个很有用的指标。在本文中，我们将介绍如何使用 Socket.io 实现聊天室在线人数显示的示例。
Socket.io 简介
Socket.io 是一个基于 Node.js 的实时网络库，它可以让服务器和客户端之间实现实时双向通信。Socket.io 封装了 WebSocket，同时支持轮询和长轮询等传输方式，可以兼容各种浏览器和设备。
实现聊天室在线人数显示的步骤
1. 安装 Socket.io
我们需要先安装 Socket.io，可以使用 npm 安装：
$ npm install socket.io
2. 创建服务器
使用 Node.js 创建一个服务器，然后启动 Socket.io：
-- -------------------- ---- ------- ----- ------- - ------------------- ----- --- - ---------- ----- ---- - ---------------------------- ----- -- - --------------------------- ------------ ----- ---- -- - ---------------------- - --------------- --- ------------------- -------- -- - -------------- ---- ------------ --- ----------------- -- -- - ---------------------- -- --------- ---
在这段代码中，我们创建了一个 Express 应用，并使用 http 模块创建了一个服务器。然后，我们使用 Socket.io 启动了服务器，并监听了连接事件。
3. 监听用户连接和断开事件
在 Socket.io 中，我们可以监听 connection 事件来处理用户连接。当有用户连接到服务器时，我们需要将在线人数加 1，并通知所有用户：
-- -------------------- ---- -------
--- -------- - --
------------------- -------- -- -
-----------
-------------- ---- ------------
------------- ------- ----------
----------------------- -- -- -
-----------
----------------- ---------------
------------- ------- ----------
---
---在这段代码中，我们使用一个变量 numUsers 来记录在线人数。当有用户连接时，我们将 numUsers 加 1，然后使用 io.emit() 方法向所有用户发送一个 user count 事件，该事件包含当前在线人数。当有用户断开连接时，我们将 numUsers 减 1，并再次向所有用户发送一个 user count 事件。
4. 在客户端显示在线人数
现在，我们已经可以在服务器端记录在线人数，并向所有用户发送在线人数。接下来，我们需要在客户端显示在线人数。我们可以在客户端使用 Socket.io 来监听 user count 事件，并更新页面上的在线人数：
-- -------------------- ---- -------
--------- -----
------
------
---------------- ---------------
------- ---------------------------------------
--------
----- ------ - -----
--------------- ------- ---------- -- -
------------------------------------------------ - ---------
---
---------
-------
------
------------- ------------
--------- ------ ----- ---------------------------
-------
-------在这段代码中，我们使用 Socket.io 客户端库连接到服务器，并监听 user count 事件。当该事件被触发时，我们将在线人数更新到页面上。
示例代码
完整的示例代码如下：
-- -------------------- ---- -------
----- ------- - -------------------
----- --- - ----------
----- ---- - ----------------------------
----- -- - ---------------------------
------------ ----- ---- -- -
---------------------- - ---------------
---
--- -------- - --
------------------- -------- -- -
-----------
-------------- ---- ------------
------------- ------- ----------
----------------------- -- -- -
-----------
----------------- ---------------
------------- ------- ----------
---
---
----------------- -- -- -
---------------------- -- ---------
----- -------------------- ---- -------
--------- -----
------
------
---------------- ---------------
------- ---------------------------------------
--------
----- ------ - -----
--------------- ------- ---------- -- -
------------------------------------------------ - ---------
---
---------
-------
------
------------- ------------
--------- ------ ----- ---------------------------
-------
-------总结
在本文中，我们介绍了如何使用 Socket.io 实现聊天室在线人数显示的示例。我们首先介绍了 Socket.io 的基本概念和用法，然后详细讲解了如何在服务器端记录在线人数，并向所有用户发送在线人数。最后，我们在客户端使用 Socket.io 监听在线人数事件，并将在线人数更新到页面上。
Socket.io 不仅可以用于聊天室，还可以用于实时游戏、实时投票、实时通知等场景。掌握 Socket.io 的使用，对于前端工程师来说是一个很有用的技能。
来源：JavaScript中文网 ，转载请注明来源 https://www.javascriptcn.com/post/657816d7d2f5e1655d1f0943