Hasta el momento, hemos visto cómo mandar eventos. Desde la emisión básica uno a uno, hasta la emisión a todos los sockets conectados por medio de broadcast, e incluso, hasta el envío de eventos a un socket en particular.
Pero también, se pueden agrupar sockets por medio de salas y enviarles eventos solo aquellos que pertenezcan a una sala en particular.
💡 Por ejemplo, esto se podría usar en un chat grupal, donde solo recibirán los mensaje los miembros que pertenezcan a dicho grupo.
Así implementé esta clase para que el código fuera más dinámico:
no acabo de entender por qué lo del punto y coma es una buena práctica y no una preferencia personal :/
A veces el no porner ; genera algunos errores inesperados :)
Mmmm no, no genera errores inesperados. Podrían ser casos muy específicos y pues, editores modernos con TypeScript y/o ESLint te avisarán si algo está mal
Creación de salas
Ya vimos como usar los broadcast para la manipulación de eventos en tiempo real sin que afecte nuestra lógica de cliente y se comparta en tiempo real con el resto de usuarios.
Ahora, vamos a ver como podemos crear salas individuales donde mandemos eventos únicamente a la sala donde estemos participando.
Supongamos que deseamos crear un chat grupal dividido por salas, como discord pero no tan complejo XD.
Para esto vamos a volver a vaciar todo nuestro contenido del código y haremos lo siguiente:
En nuestro archivo HTML agregaremos lo siguiente:
<!DOCTYPEhtml><htmllang="en"><head><metacharset="UTF-8"><metahttp-equiv="X-UA-Compatible"content="IE=edge"><metaname="viewport"content="width=device-width, initial-scale=1.0"><linkrel="stylesheet"href="css/style.css"><title>Servidor con Express y Socket.io</title></head><body><ulclass="room"id="room-1"></ul><ulclass="room"id="room-2"></ul><ulclass="room"id="room-3"></ul><buttonid="connect-room-one">Room 1</button><buttonid="connect-room-two">Room 2</button><buttonid="connect-room-three">Room 3</button><br><buttonid="send-message">Enviar mensaje</button><scriptsrc="/socket.io/socket.io.js"></script><scriptsrc="js/index.js"></script></body></html>
En nuestro CSS vamos a hacerlo un poco más sencillo:
Bien, ya tenemos la estructura básica de nuestro mini proyecto, ahora, vamos a ver como sería la lógica de nuestro cliente:
const socket =io()// seleciono mis 3 botonesconst connectRoom1 =document.querySelector('#connect-room-one')const connectRoom2 =document.querySelector('#connect-room-two')const connectRoom3 =document.querySelector('#connect-room-three')// 1. eventos para conectarme a una sala específicaconnectRoom1.addEventListener('click',()=>{ socket.emit('connect-to-room','room-1')})connectRoom2.addEventListener('click',()=>{ socket.emit('connect-to-room','room-2')})connectRoom3.addEventListener('click',()=>{ socket.emit('connect-to-room','room-3')})// 1. enviar mensajeconst sendMessageButton =document.querySelector('#send-message')sendMessageButton.addEventListener('click',()=>{// enviamos nuestro mensaje al servidorconst message =prompt('Escribe tu mensaje') socket.emit('message', message)})// 2. recibimos el evento del mensajesocket.on('send-message',data=>{const{ room, message }= data
const li =document.createElement('li') li.textContent= message
document.querySelector(`#${room}`).append(li)})
Y ahora veamos como sería la lógica de nuestro servidor
io.on('connection',socket=>{ socket.on('connect-to-room',room=>{// creamos una propiedad personalizada en nuestro socket que será igual a la sala donde estamos conectados socket.connectedRoom=''// antes de que el usuario entre a una sala, lo sacamos de la sala donde estaba socket.leave(socket.connectedRoom)// 1. el método join() nos permite ingresar nuestro socket a una sala que si existe nos mete y si no la crea switch(room){case'room-1': socket.join('room-1') socket.connectedRoom='room-1'break;case'room-2': socket.join('room-2') socket.connectedRoom='room-2'break;case'room-3': socket.join('room-3') socket.connectedRoom='room-3'break;default:break;}})// 2. recibimos el mensaje en el servidor socket.on('message',(message)=>{// recibimos la sala donde estamos conectadosconst room = socket.connectedRoom// aquí mandamos al mensaje a la sala deseada con el método de io.to()// en nuestro emit mandamos el mensaje y la sala io.to(room).emit('send-message',{ message, room
})})})
Y listo, así hemos creado distintas salas donde podemos enviar información en tiempo real!
Increíble! Desarrollé un pequeño clon de Discord con Firebase como ejercicio. Creo que al finalizar el curso probaré con Socket io.
quiero compartir mi código :)
le puse un select para escoger el chat en el que se va a mandar el mensaje y unos checkbox para suscribirse a las salas. Espero les sea utlil.
