Así que tengo esta sencilla aplicación de chat y estoy buscando adaptarla para que los usuarios puedan usar las 4 salas diferentes que creé. Primero intentaré explicar cómo funciona, y necesito que me guíen, ¿cuáles serían los pasos que debo seguir para que funcione? (considerando que soy un principiante) He intentado muchas cosas pero siempre salió muy mal.
Lado del cliente:
//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(); } }Lado del servidor:
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}`); }); }); });Esta es la etapa en la que me encuentro ahora, y definitivamente no está funcionando como debería. Ya leí muchos artículos sobre socket.io y las habitaciones, pero dado que el inglés no es mi primer idioma, me resulta difícil entender dónde está el problema en mi código.
Creo que la llamada de "mensaje" del lado del servidor podría estar demasiado anidada. Haría algo como esto (teniendo en cuenta que sockets mantiene una colección de habitaciones):
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; }En el lado del cliente, usa algo como esto. De esta manera, solo te unirás a la sala una vez (estoy usando React aquí):
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]);