如何使用Socket.IO实现消息仅推送至当前页面对应房间？

现有代码核心错误 #

• socket.join(room) 是服务端专属API，写在客户端无法执行，所有房间加入操作必须在服务端完成
• 客户端未定义room标识，也未将当前页面对应的房间ID传递给服务端，服务端无法识别用户所属房间
• 客户端不存在socket.to(room).emit()的房间推送能力，定向房间广播逻辑必须在服务端实现
• 原有io.emit()为全局广播逻辑，会向所有连接的客户端推送消息，无法做房间隔离
• 客户端监听connection事件写法错误，客户端连接成功的事件名为connect，connection是服务端专属监听事件

正确实现步骤 #

1. 确定房间唯一标识 #

直接使用当前页面路径作为房间唯一ID，同一路径下的用户会进入同一个房间，不同路径用户自动隔离：

// 客户端获取当前页面房间ID，也可替换为自定义业务标识（如页面ID、直播间ID等）
const roomId = window.location.pathname;

2. 修改服务端App.js代码 #

服务端负责处理用户入房、房间内消息广播逻辑：

const io = require('socket.io')(server, { cors: { origin: "*"}});

io.on('connection', (socket) => {
    // 接收客户端入房请求，将当前连接加入对应房间
    socket.on('join room', (roomId) => {
        socket.join(roomId);
        // 可选：向房间内其他用户发送入房提示
        socket.to(roomId).emit('chat message', `[系统提示] 用户${socket.id.slice(-5)}进入房间`);
    });

    // 接收聊天消息，仅向对应房间内的所有用户推送
    socket.on('chat message', ({roomId, content}) => {
        // io.to(roomId).emit 会向房间内所有用户（包括发送者）推送消息
        io.to(roomId).emit('chat message', content);
        
        // 如果要排除发送者（配合客户端本地渲染消息降低延迟），替换为下面这行
        // socket.to(roomId).emit('chat message', content);
    });
});

3. 修改客户端SocketIo.js代码 #

客户端连接成功后主动发起入房请求，发消息时携带所属房间ID：

const roomId = window.location.pathname;
const socket = io();
const messages = document.getElementById('messages');
const form = document.getElementById('form');
const input = document.getElementById('input');

// 连接成功后触发入房请求
socket.on('connect', () => {
    socket.emit('join room', roomId);
});

form.addEventListener('submit', function (e) {
    e.preventDefault();
    if (input.value) {
        const alias = socket.id.slice(-5);
        const msgContent = alias + ": " + input.value;
        
        // 如果服务端用了排除发送者的推送逻辑，在这里先把自己发的消息渲染到页面
        // const item = document.createElement('li');
        // item.textContent = msgContent;
        // messages.appendChild(item);
        
        // 发送消息时携带房间ID和消息内容
        socket.emit('chat message', {
            roomId: roomId,
            content: msgContent
        });
        input.value = '';
        window.scrollTo(0, document.body.scrollHeight);
    }
});

socket.on('chat message', function (msg) {
    const item = document.createElement('li');
    item.textContent = msg;
    messages.appendChild(item);
    window.scrollTo(0, document.body.scrollHeight);
});

注：原有客户端代码中创建消息节点用了<ul>标签是错误写法，<ul>是无序列表容器，消息子项应该用<li>标签，已在上述代码中修正。

内容的提问来源于stack exchange，提问作者econobro