Socket.io多房间聊天消息跨房发送问题排查求助

Hey there! Let's break down why your multi-room chat is sending messages to every room instead of just the intended one.

The Root Cause: Global roomID Variable #

Your current code uses a global roomID variable that gets overwritten every time a new client connects. Here's exactly what's happening:

1. User 1 joins room test → global roomID becomes test
2. User 2 joins room test → global roomID stays test (no problem yet)
3. User 3 joins room test2 → global roomID gets updated to test2

Now, when User 1 sends a message, your code uses the latest global roomID (test2) instead of the room User 1 actually joined. That's why messages are leaking to all rooms!

The Fix: Store Room ID Per Socket Instance #

Instead of using a global variable, save the room ID directly on the individual socket object. Each client connection gets its own unique socket instance, so this keeps room data isolated per user.

Here's how to modify your code step by step:

1. Replace the global roomID with a socket-specific property, and use a more robust way to parse the URL query:

io.on('connection', function(socket){
  var addedUser = false;
  // Use standard URL parsing to safely get the room parameter
  var refererUrl = new URL(socket.handshake.headers.referer);
  socket.roomID = refererUrl.searchParams.get('room'); // Store room ID on the socket itself
  
  socket.join(socket.roomID);
  console.log("Joining: " + YELLOW + socket.roomID + NC);

  // Update all event handlers to use socket.roomID instead of the global variable
  socket.on('new message', function (data) {
    socket.to(socket.roomID).emit('new message', {
      username: socket.username,
      message: data
    });
    console.log(socket.username + ' said something in \t' + YELLOW + socket.roomID + NC);
  });

  socket.on('add user', function (username) {
    if (addedUser) return;

    socket.username = username;
    ++numUsers;
    addedUser = true;
    socket.emit('login', { numUsers: numUsers });
    
    socket.to(socket.roomID).emit('user joined', {
      username: socket.username,
      numUsers: numUsers
    });
  });

  socket.on('typing', function () {
    console.log(socket.username + ' is typing in \t' + YELLOW + socket.roomID + NC);
    socket.to(socket.roomID).emit('typing', { username: socket.username });
  });

  socket.on('stop typing', function () {
    socket.to(socket.roomID).emit('stop typing', { username: socket.username });
  });

  socket.on('disconnect', function () {
    console.log(socket.username + PURPLE + ' disconnected' + NC + ' from ' + YELLOW + socket.roomID + NC);
    if (addedUser) {
      --numUsers;
      socket.to(socket.roomID).emit('user left', {
        username: socket.username,
        numUsers: numUsers
      });
    }
  });
});

2. Bonus: Fix Query Parsing
   Your original code splits the query string with split("="), which breaks if there are multiple URL parameters (e.g., ?room=test&name=john). Using URLSearchParams (as shown above) is a safer, standard way to extract query parameters without unexpected bugs.

Why This Works #

By attaching roomID to the socket object, each client's connection maintains its own room reference. When events like new message fire, they use the room ID specific to that user's socket, ensuring messages only go to the correct room.

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