Broadcast de eventos

Curso de Aplicaciones en Tiempo Real con Socket.io

Contenido del curso

Fundamentos de Socket.io

Socket.io en la práctica

Herramientas extra

Proyecto WebChat

Cierre

26
¿Quieres un Curso Práctico de Socket.io?
01:58 min

Tomar examen

Cursos Empresas Blog Live Conf Eventos Precios

0:0021:19

Broadcast de eventos

Curso de Aplicaciones en Tiempo Real con Socket.io

Clase 11 de 26

Clase 11 / 26

Andrés Esteban Rodríguez Jiménez

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

Comentarios (12)12 comentarios

Diego Andres Valderruten Vargas

Hace 4 años

Fernando Francisco López Mauro

Jesus rafael Vasquez ramirez

Hace un año

Carlos Alejandro Hernández Mejía

Felipe Escalona

Jose Ever Muñoz Muñoz

Hace 2 años

Carlos Antonio Molano Solarte

Emilio Sala

Juan Camilo Zúñiga Sandoval

Jhon Jairo Castiblanco Mojica

Cristian Camilo Cortes Ortiz

Miguel Negron Garcia

Diego Reyes Cabrera

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?

Broadcast de eventos

Progreso del curso

Fundamentos de Socket.io

Socket.io en la práctica

Herramientas extra

Proyecto WebChat

Cierre

Recursos

Recursos