No tienes acceso a esta clase

隆Contin煤a aprendiendo! 脷nete y comienza a potenciar tu carrera

Broadcast de eventos

11/26
Recursos

Aportes 6

Preguntas 0

Ordenar por:

驴Quieres ver m谩s aportes, preguntas y respuestas de la comunidad?

o inicia sesi贸n.

#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%);
}

codigo funcionar
hombre ser feliz
jajajaja

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

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

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

To all connected clients except the sender

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