Nodejs express在线用户列表功能如何实现

Nodejs express在线用户列表功能如何实现

express 3.x 在线用户列表，实时性有一定要求（差个十秒不是问题- -）有没有伙伴们有这方面的实践，还望赐教呀~

4 回复

Node.js Express 在线用户列表功能实现

在使用 Node.js 和 Express 构建的 Web 应用中，实现一个在线用户列表是一项常见的需求。为了实现实时更新的功能，我们可以借助 WebSocket 技术，例如使用 Socket.IO 库。下面将详细说明如何实现这一功能。

环境准备

首先确保你已经安装了以下依赖：

npm install express socket.io

服务端代码

接下来，我们创建一个简单的 Express 应用，并集成 Socket.IO 来处理实时通信：

const express = require('express');
const http = require('http');
const socketIo = require('socket.io');

const app = express();
const server = http.createServer(app);
const io = socketIo(server);

// 存储在线用户的列表
let onlineUsers = [];

io.on('connection', (socket) => {
    console.log('A user connected:', socket.id);

    // 当用户登录时，添加到在线列表
    socket.on('login', (username) => {
        if (!onlineUsers.some(user => user.username === username)) {
            onlineUsers.push({ id: socket.id, username });
            io.emit('updateOnlineUsers', onlineUsers.map(user => user.username));
        }
    });

    // 当用户退出时，从在线列表中移除
    socket.on('logout', () => {
        onlineUsers = onlineUsers.filter(user => user.id !== socket.id);
        io.emit('updateOnlineUsers', onlineUsers.map(user => user.username));
    });

    // 处理其他可能的事件
    socket.on('disconnect', () => {
        console.log('A user disconnected:', socket.id);
        onlineUsers = onlineUsers.filter(user => user.id !== socket.id);
        io.emit('updateOnlineUsers', onlineUsers.map(user => user.username));
    });
});

server.listen(3000, () => {
    console.log('Server is running on port 3000');
});

客户端代码

客户端需要引入 Socket.IO 的 JavaScript 文件，并连接到服务器。然后监听服务器发送的事件，更新用户界面：

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>Online Users</title>
    <script src="/socket.io/socket.io.js"></script>
</head>
<body>
    <h1>Online Users</h1>
    <ul id="users-list"></ul>

    <script>
        const socket = io();

        function updateOnlineUsers(users) {
            const usersList = document.getElementById('users-list');
            usersList.innerHTML = '';
            users.forEach(username => {
                const li = document.createElement('li');
                li.textContent = username;
                usersList.appendChild(li);
            });
        }

        // 连接成功后发送登录事件
        socket.on('connect', () => {
            const username = prompt("Please enter your username:");
            socket.emit('login', username);
        });

        // 接收在线用户列表更新事件
        socket.on('updateOnlineUsers', (users) => {
            updateOnlineUsers(users);
        });
    </script>
</body>
</html>

总结

通过以上步骤，我们实现了一个基本的在线用户列表功能。每当用户登录或注销时，服务器会更新在线用户列表并通过 Socket.IO 实时广播给所有连接的客户端。这种方式能够提供较好的实时性体验，适用于大多数在线应用的需求。


socketio 结合 EXPRESS

同意socket.io，这里有类似代码 https://github.com/island205/technode-tutorial/blob/master/03-提供不同的房间.md

为了实现一个具有实时性的在线用户列表功能，可以使用Node.js结合Express框架和Socket.IO来实现实时通信。以下是一个简单的示例代码，展示了如何创建一个基本的在线用户列表。

示例代码

首先，确保安装了必要的依赖项：

npm install express socket.io

然后，创建一个服务器文件（例如 server.js）：

const express = require('express');
const http = require('http');
const socketIo = require('socket.io');

const app = express();
const server = http.createServer(app);
const io = socketIo(server);

let onlineUsers = [];

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

io.on('connection', (socket) => {
    console.log('A user connected:', socket.id);

    // 当用户加入时添加到在线用户列表
    socket.on('join', (username) => {
        const user = { id: socket.id, username };
        onlineUsers.push(user);
        io.emit('onlineUsers', onlineUsers); // 发送更新后的在线用户列表给所有连接的客户端
    });

    // 当用户离开时从在线用户列表中移除
    socket.on('disconnect', () => {
        onlineUsers = onlineUsers.filter(user => user.id !== socket.id);
        io.emit('onlineUsers', onlineUsers);
        console.log('A user disconnected:', socket.id);
    });
});

server.listen(3000, () => {
    console.log('Server is running on port 3000');
});

接下来，创建一个简单的HTML页面（例如 index.html），用于展示在线用户列表：

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>Online Users</title>
    <script src="/socket.io/socket.io.js"></script>
    <script>
        const socket = io();

        function join() {
            const username = document.getElementById('username').value;
            if (username) {
                socket.emit('join', username);
            }
        }

        socket.on('onlineUsers', (users) => {
            const usersList = document.getElementById('usersList');
            usersList.innerHTML = '';
            users.forEach(user => {
                const li = document.createElement('li');
                li.textContent = `${user.username} (${user.id})`;
                usersList.appendChild(li);
            });
        });
    </script>
</head>
<body>
    <h1>Join the Chat Room</h1>
    <input type="text" id="username" placeholder="Enter your username">
    <button onclick="join()">Join</button>
    <h2>Online Users:</h2>
    <ul id="usersList"></ul>
</body>
</html>

解释

  1. 服务器端：

    • 使用Express创建了一个基本的HTTP服务器。
    • 使用Socket.IO处理WebSocket连接。
    • 维护一个在线用户的数组，并在用户加入或离开时更新该数组。
    • 使用io.emit广播更新后的在线用户列表给所有连接的客户端。

  2. 客户端：

    • 客户端通过Socket.IO连接到服务器。
    • 用户输入用户名后点击“Join”按钮，触发join函数将用户名发送到服务器。
    • 监听来自服务器的onlineUsers事件，并更新页面上的在线用户列表。

以上就是一个基本的Node.js Express在线用户列表实现。你可以根据具体需求进行扩展，例如增加更多状态信息、用户身份验证等。

回到顶部