Estoy enviando mensajes de mi cliente usando socketIo y me gustaría asignar sockets a ciertas habitaciones. La sala se declara en el lado del cliente (según la URL), pero no puedo obtener la variable roomName para pasar al código del lado del servidor (que sería el primer paso para establecer la conexión).
Los [docs][1] me muestran cómo 'emitir' a una sala una vez que tengo el nombre de la sala, pero soy nuevo en js y tengo problemas con el componente de devolución de llamada como primer paso.
Guión de cliente
const socket = io(); const messages = document.getElementById('messages'); const form = document.getElementById('form'); const roomContainer = document.getElementById('room-container'); const input = document.getElementById('input'); socket.on('connection', (socket) => { socket.join('create', (roomName) => { socket.join(roomName); console.log("hello from the connection function on socketIo.js", roomName) }); }); form.addEventListener('submit', function (e) { console.log(roomName," logged from submit function in socketIo.js"); e.preventDefault(); if (input.value) { const alias = socket.id.slice(-5); socket.emit('chat message', alias + ": " + input.value); input.value = ''; } }); socket.on('chat message', function (msg) { const item = document.createElement('ul'); item.textContent = msg; messages.appendChild(item); window.scrollTo(0, document.body.scrollHeight); });código del servidor
io.sockets.on('connection', (socket) => { socket.on('create', (roomName) => { socket.join(roomName); console.log("roomName function test"); }); socket.on('chat message', (msg) => { io.emit('chat message', msg); console.log("message to terminal from chat message"); }); });En este momento, "mensaje a terminal desde mensaje de chat" se imprime con cada mensaje, pero "prueba de función de nombre de sala" nunca se imprime. De alguna manera me estoy perdiendo toda esa función con la forma en que estructuré el código.
¿Cómo hago para que el cliente pase el nombre de la habitación al servidor? [1]: https://socket.io/docs/v4/rooms/
Lo descubrí usando este video de YouTube, pero el código a continuación para cualquier persona que tropiece con esto en el futuro.
Código del lado del cliente que se ejecuta en script
const socket = io(); const messages = document.getElementById('messages'); const form = document.getElementById('form'); const roomContainer = document.getElementById('room-container'); const input = document.getElementById('input'); joinRoom = () => { socket.emit('join room', roomName); } joinRoom(); form.addEventListener('submit', (event) => { console.log(roomName, " logged from submit function in socketIo.js"); event.preventDefault(); if (input.value) { const alias = socket.id.slice(-5); socket.emit('chat message', alias + ": " + input.value); input.value = ''; } }); socket.on('chat message', (msg) => { const item = document.createElement('ul'); item.textContent = msg; messages.appendChild(item); window.scrollTo(0, document.body.scrollHeight); });Código del servidor que se ejecuta en app.js
io.on('connection', (socket) => { socket.on('join room', (data) => { socket.join(data); console.log(socket.id, " joined room ", data); socket.on('chat message', (msg) => { io.to(data).emit('chat message', msg); console.log("chat message function from server worked"); }) }) socket.on("disconnect", () => { console.log("user ", socket.id, " disconnected from server") }) });