const user =prompt('What is your username?');const adminUsers =['admin','root'];const isAdmin = adminUsers.includes(user);let socketNameSpace, group;const chatElement =document.getElementById('chat');const namespaceElement =document.getElementById('namespace');if(isAdmin){ socketNameSpace =io('/admins'); group ='admins';}else{ socketNameSpace =io('/users'); group ='users';}socketNameSpace.on('connect',()=>{ namespaceElement.textContent= group.toUpperCase();});socketNameSpace.on('newMessage',(data)=>{receiveMessage(data);});functionreceiveMessage({ sender, message }){const liElement =document.createElement('li'); liElement.innerHTML+=`<p><strong>${sender}</strong>: ${message}</p>`; chatElement.appendChild(liElement);}functionsendMessage(){const messageElement =document.getElementById('message');const message = messageElement.value;if(message){ socketNameSpace.emit('sendMessage',{ message,sender: user,});}}
index.html
<h2><spanid="namespace"></span> Chat
</h2><ulid="chat"></ul><formid="chatForm"action="none"><inputtype="text"id="message"placeholder="Type a message..."><inputtype="button"value="Send"onclick="sendMessage()"></form><scriptsrc="/socket.io/socket.io.js"></script><scriptsrc="/js/index.js"></script>
Lógica de envió de mensajes
En este momento ya tenemos unos namespaces divididos, ahora, teniendo como base el código anterior, vamos a crear la lógica de envió de mensajes en nuestros canales de namespaces.
Vamos a nuestra lógica del lado del servidor y hacemos lo siguiente:
// 1. enviamos el mensaje y el usuarioconst sendMessage =document.querySelector('#send-message')sendMessage.addEventListener('click',()=>{const message =prompt('Escribe tu mensaje: ') socketNamespace.emit('send-message',{ message, user
})})// 2. escuchamos el evento en el que el servidor nos envía un mensajesocketNamespace.on('message',(messageData)=>{const{ user, message }= messageData;const li =document.createElement('li') li.textContent=`${user}: ${message}` chat.append(li)})
Ahora vamos a la lógica de nuestro servidor y soportamos estos cambios:
teachers.on('connection',(socket)=>{console.log(socket.id+' se ha conectado a la sala de profes');// 1. enviamos el mensaje a todos los sockets conectados al namespace de teachers socket.on('send-message',(data)=>{ teachers.emit('message', data)})})students.on('connection',(socket)=>{console.log(socket.id+' se ha conectado a la sala de estudiantes');// 1. enviamos el mensaje a todos los sockets conectados al namespace de students socket.on('send-message',(data)=>{ students.emit('message', data)})})
Y listo, ya hemos creado la lógica para recibir nuestros mensaje en nuestros respectivos namespaces.
🫶🏻 Buenisima explicación. Muchas gracias !
un refactor para no duplicar código aunque no se si queda menos claro (fácil de leer)
