调整我的聊天应用程序以使用套接字 io 中的房间

Question

所以我有这个简单的聊天应用程序，并且我正在寻求对其进行调整，以便用户可以使用我创建的 4 个不同的房间。 我将首先尝试解释它是如何工作的，并且我需要得到指导，我需要采取哪些步骤才能使其工作？（考虑到我是初学者）我已经尝试了很多东西但结果总是很糟糕。

客户端：

//Get the room name out of the URL and send it to the server
function getRoomName() {
        let roomName = window.location.toString();
        if(roomName.includes('#') === true){
            roomName = roomName.split("#");
            roomName.splice(0, 1);
            roomName = roomName.toString();
            // Join room
            socket.emit('joinRoom', roomName);
        }
    }

//Here I am changing the URL when clicking on a room button (I got one of these for each button)
proiectFinalRoom.addEventListener('click', () =>{
        window.location.href='#proiectFinal'; 
        roomNameEdit.innerHTML = "#PROIECT-FINAL";  
    })

 sendBtn.addEventListener('click', () =>{
        sendMessage();
    })

    //Here I am sending the message to the server
    function sendMessage(){
        if(messageInput.value === ""){
            return;
        } else {
                   //Calling the getRoomName function (when sending a message)
            getRoomName();

            const text = messageInput.value;
            socket.emit('message', text);
        displayMessage();
        }
    }

服务器端：

io.on('connection', (socket) => {
    socket.on('joinRoom', function(roomName){
        //Join room
        socket.join(roomName);

        //Send messages
        socket.on('message', (message) => {
            socket.broadcast.to(roomName).emit('message', `${message}`);          
        });
    });
});

这是我现在所处的阶段，它绝对不能正常工作。我已经阅读了很多关于 socket.io 和房间的文章，但是由于英语不是我的第一语言，我发现我很难理解代码中的问题所在。

Answer 1

我认为您的服务器端“消息”调用可能过于嵌套。我会做这样的事情（记住套接字维护着房间的集合）：

io.on('connection', (socket) => {
    socket.on('joinRoom', function(roomName){
        //Join room
        socket.join(roomName);
    });

    //Send messages
    socket.on('message', (message) => {
        var room = getRoom(socket);
        socket.to(room).emit('message', `${message}`);          
    });
});

function getRoom(socket) {
  var room;
  for (let aRoom of socket.rooms) {
    if (aRoom !== socket.id) {
      room = aRoom;
    }
  }
  return room;
}

在客户端你使用这样的东西。这样你只能加入房间一次（我在这里使用 React）：

  const [room, setRoom] = useState<string>();
  ...
  const socket = useContext(SocketContext);

  useEffect(() => {
    if (!room) {
      if (param) {
        var myRoom = param['room'];
        if (!myRoom) {
          socket.emit("ping");
        } else {
          socket.emit('join room', myRoom);
          setRoom(myRoom);
        }
      } else {
        socket.emit("ping");
      }
    }
  }, [room, param, socket]);