Lógica de envio de mensajes

¡Hola! Adjunto mi implementación de esta clase:

• src/index.js

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);
}

• js/index.js

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,
    });
  }
}

• index.html

<h1>
     <span id="namespace"></span>
     Chat
</h1>
<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.

🫶🏻 Buenisima explicación. Muchas gracias !

Estoy amando este curso:D