por ejemplo, cuando me uno a la habitación 1, luego a la habitación 2, luego a la habitación 3 y envío un mensaje en la habitación 3, ese mensaje se emitirá 3 veces, cuando debería enviarse solo una vez. estoy usando vainilla JavaScript en el lado del cliente
lado del servidor
namespaces.forEach(namespace => { // join namespace io.of(namespace.endpoint).on('connection', socket => { console.log(`${socket.id} has joined the ${namespace.endpoint}`) socket.emit('nsRooms', {data: namespace.rooms}) // Join room socket.on('joinRoom', async (payload, cb) => { const room = Array.from(socket.rooms)[1] room && socket.leave(room) socket.join(payload.data.roomName) const numOfMem = await io.of(payload.data.nsp).in(payload.data.roomName).allSockets() cb(Array.from(numOfMem).length) }) socket.on('sendMessage', payload => { const room = Array.from(socket.rooms)[1] const nsp = socket.nsp.name io.of(nsp).to(room).emit('updateMessage', payload) }) }) }) lado del cliente \
Aquí es cuando me uno a las salas y envío mensajes.
function joinRoom(roomName) { form.removeEventListener('submit', e => submitMsg(e)) nsSocket.emit('joinRoom', {data: {nsp: nsSocket.nsp, roomName}}, numberOfMember => { document.getElementById('current-room').innerHTML = `<span class="curr-room-text">${roomName}</span> <span class="curr-room-num-users">Users: ${numberOfMember}<span class="glyphicon glyphicon-user"></span></span>` }) messages.innerHTML = '' nsSocket.on('updateMessage', payload => { messages.innerHTML += ` <li> <div class="user-image"> <img src="https://via.placeholder.com/30" /> </div> <div class="user-message"> <div class="user-name-time">rbunch <span>${new Date(Date.now()).toDateString()}</span></div> <div class="message-text">${payload.data}</div> </div> </li> ` }) } form.addEventListener('submit', e => submitMsg(e)) function submitMsg(e) { e.preventDefault() const msg = userMessage.value msg.length > 0 && nsSocket.emit('sendMessage', {data: msg}) userMessage.value = '' }Esto sucede porque removeEventListener necesita trabajar exactamente con la misma referencia de función que se registró, y (e) => submitMsg(e) crea una lambda nueva todo el tiempo. Lo que significa que cada vez que se una a una sala, se agregará un nuevo controlador de eventos, sin eliminar el anterior.
Creé una aplicación de muestra rápida aquí con el siguiente código que solucionaría su problema. Si hace clic en 'Unirse a alguna sala' tres veces y luego en 'Enviar mensaje', solo aparecerá un archivo console.log (expanda la consola en el lado derecho para ver el resultado).
const testBtn = document.getElementById('joinRoom'); const form = document.getElementById('chatForm'); testBtn.addEventListener('click', () => { form.removeEventListener('submit', submitMsg); // ... some other code form.addEventListener('submit', submitMsg); }); submitMsg = (e) => { e.preventDefault(); console.log('submitMsg() called!'); return false; }