No mancheeeeees, que chidooo, jajajaja me siento super feliz:D
ya somos 2 xD
Broadcast de eventos
Se da cuando se envía un evento a todos los sockets conectados, exceptuando al remitente → socket.broadcast.emit(/* .. */)
Broadcast de eventos
El Broadcast de eventos es la capacidad de enviarle un evento a todos los usuarios que estén conectados de la madera que nosotros queramos:
Veamos un ejemplo de como hacer esto:
Vamos a empezar de cero y a borrar toda la lógica de los sockets y solo dejar nuestra lógica inicial:
Luego vamos a crear un div en nuestro html y le vamos a dar forma de circulo con la siguiente hoja de estilos:
HTML
<!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><h2>Funciona Uwu</h2><divid="circle"></div><scriptsrc="/socket.io/socket.io.js"></script><scriptsrc="./js/index.js"></script></body></html>
Con el código anterior, deberíamos tener un circulito azul en la mitad de la pantalla, supongamos que queremos manipular este circulito y arrastrarlo cuando lo presionemos:
Ahora vamos a nuestro archivo index.js del lado del cliente y hacemos esto rápidamente:
const socket =io()const circle =document.querySelector('#circle')// mover circuloconstdrag=(e)=>{const clientX = e.clientXconst clientY = e.clientY circle.style.top= clientY +'px' circle.style.left= clientX +'px'}// se mueve cuando el mouse este presionadodocument.addEventListener('mousedown',(e)=>{document.addEventListener('mousemove', drag)})// se deja de mover cuando se levante el mousedocument.addEventListener('mouseup',(e)=>{document.removeEventListener('mousemove', drag)})
Listo, ahora vamos a hacer algo mucho más interesante, VAMOS A MOVER EL CIRCULITO EN TIEMPO REAL. Chan chan chan…
Para esto vamos a hacer una pequeña modificación del código anterior en el cliente.
const socket =io()const circle =document.querySelector('#circle')// mover circuloconstdrag=(e)=>{const clientX = e.clientXconst clientY = e.clientY// enviamos la posición al servidor socket.emit('circle-position',{top: clientY +'px',left: clientX +'px'})}// se mueve cuando el mouse este presionadodocument.addEventListener('mousedown',(e)=>{document.addEventListener('mousemove', drag)})// se deja de mover cuando se levante el mousedocument.addEventListener('mouseup',(e)=>{document.removeEventListener('mousemove', drag)})// recibimos la posición del servidor y la usamossocket.on('move-circle',position=>{ circle.style.top= position.top circle.style.left= position.left})
Ahora vamos a nuestro servidor y creamos la siguiente lógica:
// recibimos la posición del círculo en el navegador y la enviamos al clienteio.on('connection',socket=>{ socket.on('circle-position',(position)=>{ io.emit('move-circle', position)})})
Y listo, si abrimos dos navegadores e intentamos mover el circulo, veremos que lo podemos hacer em ambos navegadores.
Pero, digamos que queremos hacer un juego en el cual, aunque se caiga el servidor, el usuario pueda mover el circulo dentro de su propio navegador, evidentemente no se haría en tiempo real pero al menos el usuario podría mover su circulo en su navegador, ya que actualmente, si el servidor se cae, no podrá hacerlo debido a que el servidor es el que devuelve la posición del circulo, y si no hay servidor, no hay posición del circulo que nos retorne. Veamos como arreglar esto:
Para esto, lo primero que debemos hacer es que en el cliente no dependamos del servidor para que nos regrese la posición, sino que lo hagamos directamente desde un objeto:
const socket =io()const circle =document.querySelector('#circle')// creamos una función que almacene las posicionesconstdrawCircle=(position)=>{ circle.style.top= position.top circle.style.left= position.left}// mover circuloconstdrag=(e)=>{// guardamos la posición en un objetoconst position ={top: e.clientY+'px',left: e.clientX+'px'}// dibujamos el circulo individualmentedrawCircle(position)// enviamos la posición al servidor socket.emit('circle-position', position)}// se mueve cuando el mouse este presionadodocument.addEventListener('mousedown',(e)=>{document.addEventListener('mousemove', drag)})// se deja de mover cuando se levante el mousedocument.addEventListener('mouseup',(e)=>{document.removeEventListener('mousemove', drag)})// recibimos la posición del servidor y la usamossocket.on('move-circle',(position)=>{drawCircle(position)})
Ahora en el servidor cambiamos el método **emit** por el método socket.broadcast.emit:
// va a emitir el evento a todos los clienetes conectados, menos a mi// con eso no dependo del servidor para usar mi informaciónio.on('connection',socket=>{ socket.on('circle-position',(position)=>{ socket.broadcast.emit('move-circle', position)})})
De acuerdo al broadcast y a la lógica que requiera nuestra aplicación, podemos hacer que envié la emisión a todos incluido a mi, o a todos menos a mi.
Esto nos puede servir para un juego en línea o un chat.
La diferencia entre io.on y socket.broadcast es fundamental en Socket.io. io.on se usa para manejar eventos a nivel de servidor y se activa cuando un cliente se conecta, permitiendo gestionar eventos generales. Por otro lado, socket.broadcast se utiliza para enviar mensajes a todos los demás sockets conectados, excluyendo al socket que envía el mensaje. Esto es útil para notificaciones que no deben ser recibidas por el emisor.
BROADCAST DE EVENTOS
La difusión (broadcast) de eventos enSocket.iopermite enviarmensajes a todos los clientesconectados, excepto al emisor. Utilizando el métodobroadcast, los eventos pueden ser emitidos a múltiplesclientessimultáneamente. Por ejemplo, al emitir un eventodesde el servidor consocket.broadcast.emit('event', data), el mensaje se enviará a todos los clientesconectados, excepto al que originó la emisión. Esta funcionalidad es especialmenteútil en aplicaciones que requieren la actualizaciónsimultánea de variosusuarios, como en chats grupales, juegos multijugador y aplicaciones de colaboración en tiempo real, asegurando que todos los usuariosrecibaninformaciónconsistente y actualizadasinafectar al emisor.
Waoo, me encanto muchisimo esta clase. Aprendí algo muy útil y se me ocurren muchas posibilidades con websocket ahora. Antes pensaba que Websocket solo tenia sentido para redes sociales pero ahora veo que incluso por ejemplo un trello puede usar websocket.
Notion usa sockets, también Asana, Google Calendar... es muy probable que los usemos en nuestro trabajo en cierto momento
