¡Hola! Adjunto mi implementación de esta clase:
const adminsIo = io.of('/admins'); const usersIo = io.of('/users'); adminsIo.on('connection', (socket) => { socket.on('sendMessage', (data) => { shareNewMessage(data, adminsIo); }); }); usersIo.on('connection', (socket) => { socket.on('sendMessage', (data) => { shareNewMessage(data, usersIo); }); }); function shareNewMessage(data, namespace) { namespace.emit('newMessage', data); }
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); }); function receiveMessage({ sender, message }) { const liElement = document.createElement('li'); liElement.innerHTML += `<p><strong>${sender}</strong>: ${message}</p>`; chatElement.appendChild(liElement); } function sendMessage() { const messageElement = document.getElementById('message'); const message = messageElement.value; if (message) { socketNameSpace.emit('sendMessage', { message, sender: user, }); } }
<h2> <span id="namespace"></span> Chat </h2> <ul id="chat"></ul> <form id="chatForm" action="none"> <input type="text" id="message" placeholder="Type a message..."> <input type="button" value="Send" onclick="sendMessage()"> </form> <script src="/socket.io/socket.io.js"></script> <script src="/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 usuario const 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 mensaje socketNamespace.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.
Emilio Sala
un refactor para no duplicar código aunque no se si queda menos claro (fácil de leer)
function setupNamespace(path, messageHandler) { const namespace = io.of(path); namespace.on("connection", (socket) => { socket.on("sendMessage", (data) => { messageHandler(data, namespace); }); }); return namespace; } function shareNewMessage(data, namespace) { namespace.emit("newMessage", data); } setupNamespace("/admins", shareNewMessage); setupNamespace("/users", shareNewMessage);
Erne Giar
No me funciona, cuando cargo el promp y pongo aceptar, me desaparece el boton send Message
Erne Giar
o me funciona, cuando cargo el promp y pongo aceptar, me desaparece el boton send Message
Fernando Francisco López Mauro
Estoy amando este curso:D
