Nodejs socket 下线用户 显示

Nodejs socket 下线用户 显示

客户端

socket.emit(“disconnect”,userInfo.name)// 发送要删除的用户名

服务端

socket.on(“disconnect”,function(d){ socket.broadcast.emit(“infos”,infos); console.log(d); })

一直是 undefined

2 回复

好的，让我们来详细探讨如何在 Node.js 中使用 Socket.IO 来处理用户下线并显示相关信息。你当前的代码有一些问题，我将为你提供正确的实现方法，并附上示例代码。

背景知识

Socket.IO 是一个实时通信库，允许你在服务器和客户端之间建立 WebSocket 连接。当用户断开连接时，可以通过监听 disconnect 事件来捕获这一行为。

示例代码

首先，确保你已经在项目中安装了 Socket.IO：

npm install socket.io

服务端代码

服务端需要监听客户端的 disconnect 事件，并向其他客户端广播消息。

const io = require('socket.io')(server);

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

    // 监听客户端发送的用户名
    socket.on('disconnectUser', (username) => {
        console.log('User disconnected:', username);
        
        // 广播消息给其他在线用户
        io.emit('info', `${username} has left the chat.`);
    });

    // 监听客户端断开连接
    socket.on('disconnect', () => {
        console.log('A user disconnected:', socket.id);
        
        // 如果有用户名，可以广播
        if (socket.username) {
            io.emit('info', `${socket.username} has left the chat.`);
        }
    });
});

// 设置用户名
socket.username = 'exampleUser';

客户端代码

客户端需要发送用户名给服务器，并监听服务器的消息。

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

        // 当页面关闭或用户手动断开连接时
        window.addEventListener('beforeunload', function() {
            const username = 'exampleUser'; // 用户名
            socket.emit('disconnectUser', username);
        });

        // 监听服务器发送的消息
        socket.on('info', (message) => {
            console.log(message);
            // 更新UI显示消息
            document.body.innerHTML += `<p>${message}</p>`;
        });
    </script>
</body>
</html>

解释

  1. 服务端：

    • 使用 io.on('connection') 监听新连接。
    • 使用 socket.on('disconnectUser') 监听客户端发送的用户名。
    • 使用 socket.on('disconnect') 监听客户端断开连接。
    • 通过 io.emit('info', message) 向所有客户端广播消息。

  2. 客户端：

    • 在 beforeunload 事件中发送用户名。
    • 监听服务器的 info 消息，并更新UI显示信息。

这样，当用户断开连接时，其他客户端会收到通知并更新界面显示。希望这能解决你的问题！


根据你的描述，你在尝试处理Socket.IO中的用户下线事件，并希望将这些信息广播给其他在线用户。你的问题中提到的undefined可能是因为disconnect事件本身不会传递任何参数，所以当你尝试通过d接收参数时，它会被定义为undefined。

下面是修正后的服务端代码示例，以及客户端如何正确地发送和处理下线事件：

客户端代码：

const socket = io();

// 当用户主动下线或关闭浏览器时触发
window.addEventListener('beforeunload', function() {
    socket.emit('user-disconnect', userInfo.name); // 发送要删除的用户名
});

// 或者在某些操作后触发的下线
document.getElementById('logout-button').addEventListener('click', function() {
    socket.emit('user-disconnect', userInfo.name);
});

服务端代码：

io.on('connection', function(socket) {
    console.log('A user connected');

    socket.on('user-disconnect', function(username) {
        console.log(`${username} has disconnected`);
        socket.broadcast.emit('user-disconnect', username); // 广播用户名给其他所有连接的客户端
    });

    socket.on('disconnect', function() {
        console.log('A user disconnected');
        // 这里可以添加逻辑来通知所有客户端有用户离线
    });
});

在这个例子中，客户端在用户下线时（例如，当用户离开页面或点击退出按钮）发送一个名为user-disconnect的消息，包含用户名。服务端监听到这个消息后，打印出日志并广播给所有其他连接的客户端，告知哪些用户已经下线。

注意，在disconnect事件中通常不需要额外参数，它只是简单地标记了一个连接的断开。如果需要跟踪特定用户的下线状态，应该使用专门的事件如上面的user-disconnect。

回到顶部