实时显示当前在线人数的实现
本文档提供了在网页上实时显示当前在线人数的多种实现方法，包括使用 WebSocket 实现实时更新和轮询方式实现非实时更新。
方法一：使用 WebSocket 实现实时更新
服务器端设置
通过 Node.js 和 WebSocket 库（如 ws）实现服务器端逻辑：
javascript">// server.js
const WebSocket = require('ws');
const server = new WebSocket.Server({ port: 8080 });let activeUsers = 0;server.on('connection', (socket) => {activeUsers++;broadcastActiveUsers();socket.on('close', () => {activeUsers--;broadcastActiveUsers();});
});function broadcastActiveUsers() {server.clients.forEach((client) => {if (client.readyState === WebSocket.OPEN) {client.send(activeUsers);}});
}console.log('WebSocket server is running on ws://localhost:8080');
客户端设置
在前端页面，通过 JavaScript 使用 WebSocket 获取实时用户数量：
<!DOCTYPE html>
<html lang="en">
<head><meta charset="UTF-8"><meta name="viewport" content="width=device-width, initial-scale=1.0"><title>Active Users</title>
</head>
<body><h1>当前在线人数：<span id="user-count">0</span></h1><script>javascript">const userCountElement = document.getElementById('user-count');const socket = new WebSocket('ws://localhost:8080');socket.onmessage = (event) => {userCountElement.textContent = event.data;};</script>
</body>
</html>
方法二：使用后端轮询（非实时）
服务器端逻辑
可以使用 Express.js 来提供一个 RESTful 接口：
javascript">// Example: Express.js server
const express = require('express');
const app = express();let activeUsers = 0;app.get('/active-users', (req, res) => {res.json({ activeUsers });
});// Simulate user activity (for demonstration)
setInterval(() => {activeUsers = Math.floor(Math.random() * 100);
}, 1000);app.listen(3000, () => console.log('Server running on http://localhost:3000'));
客户端逻辑
通过 fetch 定期获取用户数量：
<!DOCTYPE html>
<html lang="en">
<head><meta charset="UTF-8"><meta name="viewport" content="width=device-width, initial-scale=1.0"><title>Active Users</title>
</head>
<body><h1>当前在线人数：<span id="user-count">0</span></h1><script>javascript">const userCountElement = document.getElementById('user-count');async function fetchUserCount() {try {const response = await fetch('http://localhost:3000/active-users');const data = await response.json();userCountElement.textContent = data.activeUsers;} catch (error) {console.error('Failed to fetch user count:', error);}}// Poll every 5 secondssetInterval(fetchUserCount, 5000);fetchUserCount();</script>
</body>
</html>
方法三：使用第三方服务
如果不想自己实现，可以使用以下工具：
- Google Analytics（GA）：设置并显示实时用户统计。
- Pusher 或 Firebase：提供实时数据库和 WebSocket 功能。
选择适合的方案以满足实际需求。
