前端实时显示当前在线人数的实现

实时显示当前在线人数的实现

本文档提供了在网页上实时显示当前在线人数的多种实现方法，包括使用 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 获取实时用户数量：

html 复制代码

<!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>
        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 定期获取用户数量：

html 复制代码

<!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>
        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 seconds
        setInterval(fetchUserCount, 5000);
        fetchUserCount();
    </script>
</body>
</html>

方法三：使用第三方服务

如果不想自己实现，可以使用以下工具：

Google Analytics（GA）：设置并显示实时用户统计。
Pusher 或 Firebase：提供实时数据库和 WebSocket 功能。

选择适合的方案以满足实际需求。