Socket.IO动态命名空间多房间隔离异常问题求助

我之前开发实时协作画布应用时也踩过这个命名空间隔离的坑，结合你的描述，大概率是连接或事件广播环节没绑定到对应命名空间导致的，咱们一步步来排查解决：

1. 先检查服务端的命名空间监听逻辑 #

很多时候会不小心把事件绑定到全局的io实例上，而不是对应命名空间的实例，这就会导致事件跨空间传播。正确的做法是动态匹配/webrtc/:id格式的路径，为每个命名空间单独处理事件：

// 服务端代码示例
const express = require('express');
const http = require('http');
const { Server } = require('socket.io');

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

// 用正则匹配所有/webrtc/数字格式的命名空间
io.of(/^\/webrtc\/\d+$/).on('connection', (socket) => {
  // 从命名空间名称里提取ID，比如"/webrtc/1"提取出"1"
  const namespaceId = socket.nsp.name.split('/')[2];
  console.log(`用户接入命名空间: ${namespaceId}`);

  // 处理绘图事件，重点：只在当前命名空间内广播
  socket.on('draw', (data) => {
    // 发给当前命名空间里除自己以外的所有客户端
    socket.broadcast.emit('draw', data);
    // 如果需要发给包括自己在内的所有人，用这个：
    // socket.nsp.emit('draw', data);
  });

  socket.on('disconnect', () => {
    console.log(`用户离开命名空间: ${namespaceId}`);
  });
});

server.listen(3000, () => {
  console.log('服务器跑在localhost:3000啦');
});

这里要特别注意：绝对不能用io.emit来广播事件——这会把事件发给所有命名空间的客户端，直接破坏隔离。必须用socket.broadcast.emit或者socket.nsp.emit来限定在当前命名空间内。

2. 确认客户端连接到了正确的命名空间 #

客户端最容易犯的错是直接连到默认的根路径（/），而不是指定的/webrtc/:id。正确的连接方式应该是动态获取当前页面的路径，然后连接对应的命名空间：

// 客户端代码示例
// 从当前URL里拿到命名空间路径，比如"/webrtc/2"
const currentNamespace = window.location.pathname;
const socket = io(currentNamespace);

// 发送绘图数据到当前命名空间
function sendDrawAction(data) {
  socket.emit('draw', data);
}

// 接收同命名空间内其他用户的绘图事件
socket.on('draw', (data) => {
  // 把数据画到画布上
  renderDrawData(data);
});

// 加个日志确认连接的命名空间对不对
socket.on('connect', () => {
  console.log(`成功连到命名空间: ${currentNamespace}`);
});

要是你手动写死了连接路径（比如硬编码成/webrtc/1），那打开/webrtc/2的页面自然会连错空间，这也是常见的坑。

3. 排查单向连接异常的特殊情况 #

你提到的“单向连接异常”，可以从这几个方向查：

• 其中一个客户端的连接日志显示连到了错误的命名空间（比如默认的/）
• 服务端不小心用了io.emit广播，导致某空间的事件跑到另一个空间
• Express路由配置有问题：虽然路径是/webrtc/:id，但所有路径都返回同一个页面，且客户端没动态获取当前路径的命名空间

通过服务端和客户端的日志，很容易定位到是哪一端的问题。

4. 额外提醒：避免浏览器缓存连接实例 #

同一个浏览器打开多个标签页时，Socket.IO可能会缓存连接实例，不过只要路径不同，通常会自动创建新连接。但如果你在代码里复用了同一个socket实例，就会导致跨空间串连——所以每个页面都要单独创建新的socket连接。

按照上面的步骤调整后，不同/webrtc/:id路径的连接应该就能完全隔离了，每个命名空间内的绘图操作只会在该空间的客户端之间传播。

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