Broadcast de eventos

Curso de Aplicaciones en Tiempo Real con Socket.io

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?

No tienes acceso a esta clase

¡Continúa aprendiendo! Únete y comienza a potenciar tu carrera

Si ya tienes una cuenta,

Recursos

Aportes 8

Preguntas 0

Ordenar por:

¿Quieres ver más aportes, preguntas y respuestas de la comunidad?

Diego Andres Valderruten Vargas

hace 2 años

#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

hace 2 años

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

Carlos Alejandro Hernández Mejía

hace 2 años

Broadcast de eventos

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

Felipe Escalona

hace un año

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 (
    <>
      <h1>Socket.io a</h1>
      <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

hace 2 años

To all connected clients except the sender

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

Andrés Esteban Rodríguez Jiménez

hace 2 años

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>
  <h1>Funciona Uwu</h1>

  <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.

Cristian Camilo Cortes Ortiz

hace 4 meses

**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

hace 10 meses

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.