Broadcast de eventos

Clase 11 de 26 • Curso de Aplicaciones en Tiempo Real con Socket.io

Diego Andres Valderruten Vargas

student•

#circle {
    position: absolute;
    top: 50%;
    left: 50%;
    display: block;
    width: 50px;
    height: 50px;
    background: #67b8ff;
    transform: translateX(-50%) translateY(-50%);
    border-radius: 100%;
    -webkit-border-radius: 100%;
    -moz-border-radius: 100%;
    -ms-border-radius: 100%;
    -o-border-radius: 100%;
    -webkit-transform: translateX(-50%) translateY(-50%);
    -moz-transform: translateX(-50%) translateY(-50%);
    -ms-transform: translateX(-50%) translateY(-50%);
    -o-transform: translateX(-50%) translateY(-50%);
}

Fernando Francisco López Mauro

student•

No mancheeeeees, que chidooo, jajajaja me siento super feliz:D

Jesus rafael Vasquez ramirez

student•

ya somos 2 xD

Carlos Alejandro Hernández Mejía

student•

Broadcast de eventos

Se da cuando se envía un evento a todos los sockets conectados, exceptuando al remitente → socket.broadcast.emit(/* .. */)

Felipe Escalona

student•

Utilizando React.js, tailwind y socketio-client

import { useState, useEffect, useRef } from 'react';
import './App.css';
import { io } from 'socket.io-client';

function App() {
  const [position, setPosition] = useState({ top: '50%', left: '50%' });
  const socketRef = useRef();
  useEffect(() => {
    socketRef.current = io(  "  servidor  " );

    socketRef.current.on("move circle", (newPosition) => {
      setPosition(newPosition);
    });


    return () => {
      socketRef.current.disconnect();
    };
  }, []);


  const startMoving = (e) => {
    const move = (e) => {
      const newPos = { top: `${e.clientY}px`, left: `${e.clientX}px` };
      setPosition(newPos);
      socketRef.current.emit("position", newPos);
    };

    const stopMoving = () => {
      window.removeEventListener('mousemove', move);
      window.removeEventListener('mouseup', stopMoving);
    };

    window.addEventListener('mousemove', move);
    window.addEventListener('mouseup', stopMoving);
  };

  return (
    <>
      <h2>Socket.io a</h2>
      <div
        className="absolute bg-blue-400 w-20 h-20 rounded-full cursor-pointer"
        style={{
          top: position.top,
          left: position.left,
          transform: 'translate(-50%, -50%)'
        }}
        onMouseDown={startMoving}
      ></div>
    </>
  );
}

export default App;

Servidor :

import express from "express";
import { createServer } from "http";
import { Server } from "socket.io";

const app = express();
const httpServer = createServer(app);

const io = new Server(httpServer, {
  cors: {
    origin: "*",
    methods: ["GET", "POST"],
  },
});

app.get("/", (req, res) => {
  console.log("hello");
  res.send("hello");
});

io.on("connection", (socket) => {
  socket.on("position", (position) => {
    console.log(position);

    socket.broadcast.emit("move circle", position);
  });
});

httpServer.listen(3000, () => {
  console.log("listening on localhost:3000");
});

Carlos Antonio Molano Solarte

student•

To all connected clients except the sender

io.on("connection", (socket) => {
  socket.broadcast.emit("hello", "world");
});

Andrés Esteban Rodríguez Jiménez

student•

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

<!DOCTYPE html>
<html lang="en">
<head>
  <meta charset="UTF-8">
  <meta http-equiv="X-UA-Compatible" content="IE=edge">
  <meta name="viewport" content="width=device-width, initial-scale=1.0">
  <link rel="stylesheet" href="css/style.css">
  <title>Servidor con Express y Socket.io</title>
</head>
<body>
  <h2>Funciona Uwu</h2>

  <div id="circle"></div>
  
  <script src="/socket.io/socket.io.js"></script>
  <script src="./js/index.js"></script>
</body>
</html>

CSS

#circle {
    position: absolute;
    top: 50%;
    left: 50%;
    display: block;
    width: 50px;
    height: 50px;
    background: #67b8ff;
    transform: translateX(-50%) translateY(-50%);
    border-radius: 100%;
    -webkit-border-radius: 100%;
    -moz-border-radius: 100%;
    -ms-border-radius: 100%;
    -o-border-radius: 100%;
    -webkit-transform: translateX(-50%) translateY(-50%);
    -moz-transform: translateX(-50%) translateY(-50%);
    -ms-transform: translateX(-50%) translateY(-50%);
    -o-transform: translateX(-50%) translateY(-50%);
}

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 circulo
const drag = (e) => {
  const clientX = e.clientX
  const clientY = e.clientY

  circle.style.top = clientY + 'px'
  circle.style.left = clientX + 'px'
}

// se mueve cuando el mouse este presionado
document.addEventListener('mousedown', (e) => {
  document.addEventListener('mousemove', drag)
})

// se deja de mover cuando se levante el mouse
document.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 circulo
const drag = (e) => {
  const clientX = e.clientX
  const 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 presionado
document.addEventListener('mousedown', (e) => {
  document.addEventListener('mousemove', drag)
})

// se deja de mover cuando se levante el mouse
document.addEventListener('mouseup', (e) => {
  document.removeEventListener('mousemove', drag)
})

// recibimos la posición del servidor y la usamos
socket.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 cliente
io.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 posiciones
const drawCircle = (position) => {
  circle.style.top = position.top
  circle.style.left = position.left
}

// mover circulo
const drag = (e) => {
  // guardamos la posición en un objeto
  const position = {
    top: e.clientY + 'px',
    left: e.clientX + 'px'
  }

  // dibujamos el circulo individualmente
  drawCircle(position)

  // enviamos la posición al servidor
  socket.emit('circle-position', position)
}

// se mueve cuando el mouse este presionado
document.addEventListener('mousedown', (e) => {
  document.addEventListener('mousemove', drag)
})

// se deja de mover cuando se levante el mouse
document.addEventListener('mouseup', (e) => {
  document.removeEventListener('mousemove', drag)
})

// recibimos la posición del servidor y la usamos
socket.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ón
io.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.

Emilio Sala

student•

Ventajas de este patrón:

Sin retraso para el usuario local: ve su acción en tiempo real.
Sin desincronización para otros: el servidor sigue siendo la fuente de verdad.
Aísla la lógica: cada cliente sabe qué hacer cuando recibe datos.

Juan Camilo Zúñiga Sandoval

student•

En algunas versiones de node es necesario escuchar el evento mouseup para que no se siga ejecutando el evento mousemove de la siguiente manera:

const stopDrag = () =>{ document.removeEventListener("mousemove",drag); document.addEventListener("mouseup", stopDrag);} document.addEventListener("mousedown", e =>{ document.addEventListener("mousemove", drag); document.addEventListener("mouseup", stopDrag);})

Jose Ever Muñoz Muñoz

student•

Esta clase esta demasiado buena !

Jhon Jairo Castiblanco Mojica

student•

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.

Cristian Camilo Cortes Ortiz

student•

BROADCAST DE EVENTOS

La difusión (broadcast) de eventos en Socket.io permite enviar mensajes a todos los clientes conectados, excepto al emisor. Utilizando el método broadcast, los eventos pueden ser emitidos a múltiples clientes simultáneamente. Por ejemplo, al emitir un evento desde el servidor con socket.broadcast.emit('event', data), el mensaje se enviará a todos los clientes conectados, excepto al que originó la emisión. Esta funcionalidad es especialmente útil en aplicaciones que requieren la actualización simultánea de varios usuarios, como en chats grupales, juegos multijugador y aplicaciones de colaboración en tiempo real, asegurando que todos los usuarios reciban información consistente y actualizada sin afectar al emisor.

Miguel Negron Garcia

student•

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.

Diego Reyes Cabrera

student•

Notion usa sockets, también Asana, Google Calendar... es muy probable que los usemos en nuestro trabajo en cierto momento

#circle {
    position: absolute;
    top: 50%;
    left: 50%;
    display: block;
    width: 50px;
    height: 50px;
    background: #67b8ff;
    transform: translateX(-50%) translateY(-50%);
    border-radius: 100%;
    -webkit-border-radius: 100%;
    -moz-border-radius: 100%;
    -ms-border-radius: 100%;
    -o-border-radius: 100%;
    -webkit-transform: translateX(-50%) translateY(-50%);
    -moz-transform: translateX(-50%) translateY(-50%);
    -ms-transform: translateX(-50%) translateY(-50%);
    -o-transform: translateX(-50%) translateY(-50%);
}

import { useState, useEffect, useRef } from 'react';
import './App.css';
import { io } from 'socket.io-client';

function App() {
  const [position, setPosition] = useState({ top: '50%', left: '50%' });
  const socketRef = useRef();
  useEffect(() => {
    socketRef.current = io(  "  servidor  " );

    socketRef.current.on("move circle", (newPosition) => {
      setPosition(newPosition);
    });


    return () => {
      socketRef.current.disconnect();
    };
  }, []);


  const startMoving = (e) => {
    const move = (e) => {
      const newPos = { top: `${e.clientY}px`, left: `${e.clientX}px` };
      setPosition(newPos);
      socketRef.current.emit("position", newPos);
    };

    const stopMoving = () => {
      window.removeEventListener('mousemove', move);
      window.removeEventListener('mouseup', stopMoving);
    };

    window.addEventListener('mousemove', move);
    window.addEventListener('mouseup', stopMoving);
  };

  return (
    <>
      <h2>Socket.io a</h2>
      <div
        className="absolute bg-blue-400 w-20 h-20 rounded-full cursor-pointer"
        style={{
          top: position.top,
          left: position.left,
          transform: 'translate(-50%, -50%)'
        }}
        onMouseDown={startMoving}
      ></div>
    </>
  );
}

export default App;

import express from "express";
import { createServer } from "http";
import { Server } from "socket.io";

const app = express();
const httpServer = createServer(app);

const io = new Server(httpServer, {
  cors: {
    origin: "*",
    methods: ["GET", "POST"],
  },
});

app.get("/", (req, res) => {
  console.log("hello");
  res.send("hello");
});

io.on("connection", (socket) => {
  socket.on("position", (position) => {
    console.log(position);

    socket.broadcast.emit("move circle", position);
  });
});

httpServer.listen(3000, () => {
  console.log("listening on localhost:3000");
});

<!DOCTYPE html>
<html lang="en">
<head>
  <meta charset="UTF-8">
  <meta http-equiv="X-UA-Compatible" content="IE=edge">
  <meta name="viewport" content="width=device-width, initial-scale=1.0">
  <link rel="stylesheet" href="css/style.css">
  <title>Servidor con Express y Socket.io</title>
</head>
<body>
  <h2>Funciona Uwu</h2>

  <div id="circle"></div>
  
  <script src="/socket.io/socket.io.js"></script>
  <script src="./js/index.js"></script>
</body>
</html>

#circle {
    position: absolute;
    top: 50%;
    left: 50%;
    display: block;
    width: 50px;
    height: 50px;
    background: #67b8ff;
    transform: translateX(-50%) translateY(-50%);
    border-radius: 100%;
    -webkit-border-radius: 100%;
    -moz-border-radius: 100%;
    -ms-border-radius: 100%;
    -o-border-radius: 100%;
    -webkit-transform: translateX(-50%) translateY(-50%);
    -moz-transform: translateX(-50%) translateY(-50%);
    -ms-transform: translateX(-50%) translateY(-50%);
    -o-transform: translateX(-50%) translateY(-50%);
}

const socket = io()

const circle = document.querySelector('#circle')

// mover circulo
const drag = (e) => {
  const clientX = e.clientX
  const clientY = e.clientY

  circle.style.top = clientY + 'px'
  circle.style.left = clientX + 'px'
}

// se mueve cuando el mouse este presionado
document.addEventListener('mousedown', (e) => {
  document.addEventListener('mousemove', drag)
})

// se deja de mover cuando se levante el mouse
document.addEventListener('mouseup', (e) => {
  document.removeEventListener('mousemove', drag)
})

const socket = io()

const circle = document.querySelector('#circle')

// mover circulo
const drag = (e) => {
  const clientX = e.clientX
  const 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 presionado
document.addEventListener('mousedown', (e) => {
  document.addEventListener('mousemove', drag)
})

// se deja de mover cuando se levante el mouse
document.addEventListener('mouseup', (e) => {
  document.removeEventListener('mousemove', drag)
})

// recibimos la posición del servidor y la usamos
socket.on('move-circle', position => {
  circle.style.top = position.top
  circle.style.left = position.left
})

// recibimos la posición del círculo en el navegador y la enviamos al cliente
io.on('connection', socket => {
	socket.on('circle-position', (position) => {
    io.emit('move-circle', position)
  })
})

const socket = io()

const circle = document.querySelector('#circle')

// creamos una función que almacene las posiciones
const drawCircle = (position) => {
  circle.style.top = position.top
  circle.style.left = position.left
}

// mover circulo
const drag = (e) => {
  // guardamos la posición en un objeto
  const position = {
    top: e.clientY + 'px',
    left: e.clientX + 'px'
  }

  // dibujamos el circulo individualmente
  drawCircle(position)

  // enviamos la posición al servidor
  socket.emit('circle-position', position)
}

// se mueve cuando el mouse este presionado
document.addEventListener('mousedown', (e) => {
  document.addEventListener('mousemove', drag)
})

// se deja de mover cuando se levante el mouse
document.addEventListener('mouseup', (e) => {
  document.removeEventListener('mousemove', drag)
})

// recibimos la posición del servidor y la usamos
socket.on('move-circle', (position) => {
  drawCircle(position)
})

// va a emitir el evento a todos los clienetes conectados, menos a mi
// con eso no dependo del servidor para usar mi información
io.on('connection', socket => {
	socket.on('circle-position', (position) => {
    socket.broadcast.emit('move-circle', position)
  })
})

Broadcast de eventos

Fundamentos de Socket.io

Cómo hacer aplicaciones en tiempo real

Protocolos de comunicación: HTTP vs. WebSockets

¿Qué es Socket.io?

Socket.io vs. WebSockets

¿Cómo funciona Socket.io?

Ciclo de vida de Socket.io

Socket.io en la práctica

Creando nuestra primera aplicación con Socket.io

Obteniendo información de conexiones en el servidor

Emisión de eventos

On, Once y Off

Broadcast de eventos

Creación de salas con Socket.io

Namespaces en Socket.io

Lógica de envio de mensajes

Manejo offline

Eventos volátiles

Manejo de Middlewares

Herramientas extra

Debugging en Socket.io

Configuración para testing usando la librería jest

Testing con jest

Admin UI

Proyecto WebChat

Estructura inicial del proyecto WebChat

Sistema de autenticación

Programando la lógica del chat

Detalles finales y demostración de chat en tiempo real

Cierre

¿Quieres un Curso Práctico de Socket.io?