使用 Socket.io 实现聊天室在线人数显示的示例-JavaScript中文网-JavaScript教程资源分享门户

在现代 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：

// javascriptcn.com 代码示例
const express = require('express');
const app = express();
const http = require('http').Server(app);
const io = require('socket.io')(http);

app.get('/', (req, res) => {
  res.sendFile(__dirname + '/index.html');
});

io.on('connection', (socket) => {
  console.log('a user connected');
});

http.listen(3000, () => {
  console.log('listening on *:3000');
});

在这段代码中，我们创建了一个 Express 应用，并使用 http 模块创建了一个服务器。然后，我们使用 Socket.io 启动了服务器，并监听了连接事件。

3. 监听用户连接和断开事件

在 Socket.io 中，我们可以监听 connection 事件来处理用户连接。当有用户连接到服务器时，我们需要将在线人数加 1，并通知所有用户：

// javascriptcn.com 代码示例
let numUsers = 0;

io.on('connection', (socket) => {
  numUsers++;
  console.log('a user connected');
  io.emit('user count', numUsers);

  socket.on('disconnect', () => {
    numUsers--;
    console.log('user disconnected');
    io.emit('user count', numUsers);
  });
});

在这段代码中，我们使用一个变量 numUsers 来记录在线人数。当有用户连接时，我们将 numUsers 加 1，然后使用 io.emit() 方法向所有用户发送一个 user count 事件，该事件包含当前在线人数。当有用户断开连接时，我们将 numUsers 减 1，并再次向所有用户发送一个 user count 事件。

4. 在客户端显示在线人数

现在，我们已经可以在服务器端记录在线人数，并向所有用户发送在线人数。接下来，我们需要在客户端显示在线人数。我们可以在客户端使用 Socket.io 来监听 user count 事件，并更新页面上的在线人数：

// javascriptcn.com 代码示例
<!DOCTYPE html>
<html>
<head>
  <title>Socket.io Example</title>
  <script src="/socket.io/socket.io.js"></script>
  <script>
    const socket = io();
    socket.on('user count', (numUsers) => {
      document.getElementById('num-users').textContent = numUsers;
    });
  </script>
</head>
<body>
  <h1>Socket.io Example</h1>
  <p>Online users: <span id="num-users">0</span></p>
</body>
</html>

在这段代码中，我们使用 Socket.io 客户端库连接到服务器，并监听 user count 事件。当该事件被触发时，我们将在线人数更新到页面上。

示例代码

完整的示例代码如下：

// javascriptcn.com 代码示例
const express = require('express');
const app = express();
const http = require('http').Server(app);
const io = require('socket.io')(http);

app.get('/', (req, res) => {
  res.sendFile(__dirname + '/index.html');
});

let numUsers = 0;

io.on('connection', (socket) => {
  numUsers++;
  console.log('a user connected');
  io.emit('user count', numUsers);

  socket.on('disconnect', () => {
    numUsers--;
    console.log('user disconnected');
    io.emit('user count', numUsers);
  });
});

http.listen(3000, () => {
  console.log('listening on *:3000');
});

// javascriptcn.com 代码示例
<!DOCTYPE html>
<html>
<head>
  <title>Socket.io Example</title>
  <script src="/socket.io/socket.io.js"></script>
  <script>
    const socket = io();
    socket.on('user count', (numUsers) => {
      document.getElementById('num-users').textContent = numUsers;
    });
  </script>
</head>
<body>
  <h1>Socket.io Example</h1>
  <p>Online users: <span id="num-users">0</span></p>
</body>
</html>

总结

在本文中，我们介绍了如何使用 Socket.io 实现聊天室在线人数显示的示例。我们首先介绍了 Socket.io 的基本概念和用法，然后详细讲解了如何在服务器端记录在线人数，并向所有用户发送在线人数。最后，我们在客户端使用 Socket.io 监听在线人数事件，并将在线人数更新到页面上。

Socket.io 不仅可以用于聊天室，还可以用于实时游戏、实时投票、实时通知等场景。掌握 Socket.io 的使用，对于前端工程师来说是一个很有用的技能。

来源：JavaScript中文网，转载请注明来源本文地址：https://www.javascriptcn.com/post/657816d7d2f5e1655d1f0943