Emisión de eventos

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

Clase anteriorSiguiente clase

Carlos Alejandro Hernández Mejía

student•

Hoja de emisión

Eventos del servidor

socket.emit(/* .. */) → Emisión básica.
socket.broadcast.emit(/* .. */) → A todos los clientes del espacio de nombres actual, exceptuando al remitente.
socket.to('room1').emit(/* .. */) → A todos los clientes en room1, excepto al remitente.
socket.to(['room1', 'room2']).emit(/* .. */) → A todos los clientes en room1 y/o room2, excepto al remitente.
socket.compress(false).emit(/* .. */) → Sin compresión.
socket.volatile.emit(/* .. */) → ‎Un mensaje que podría eliminarse si el transporte de bajo nivel no se puede escribir‎.
socket.emit("question", (answer) => {*...*}); → Con reconocimiento.

Con timeout cuando el receptor no recibió el evento en el tiempo esperado.

socket.timeout(5000).emit("my-event", (err) => {
  if (err) {
    // the other side did not acknowledge the event in the given delay
  }
});

io.in('room1').emit(/* .. */) → A todos los clientes en room1.
io.to(['room1', 'room2']).except('room3').emit(/* .. */) → A todos los clientes en room1 y/o room2, excepto aquellos en room3.
io.of('myNamespace').emit(/* .. */) → A todos los clientes en el espacio de nombres “myNamespace”.
io.of('myNamespace').to('room1').emit(/* .. */) → A todos los clientes en room1 en el espacio de nombres “myNamespace”.
io.to(socketId).emit(/* .. */) → A un socket en particular por su ID (mensaje privado).
io.local.emit(/* .. */) → A todos los clientes en este nodo (cuando se tienen múltiples nodos).
io.emit(/* .. */) → A todos los clientes conectados.

Eventos del cliente

socket.emit(/* .. */) → Emisión básica.
socket.emit("question", (answer) => {*...*}); → Con reconocimiento.
socket.compress(false).emit(/* .. */) → Sin compresión.
socket.volatile.emit(/* .. */) → ‎Un mensaje que podría eliminarse si el transporte de bajo nivel no se puede escribir‎.
Con timeout cuando el receptor no recibió el evento en el tiempo esperado.

Carlos Antonio Molano Solarte

student•

Emit Cheatsheet

Server-side

io.on("connection", (socket) => {

  // basic emit
  socket.emit(/* ... */);

  // to all clients in the current namespace except the sender
  socket.broadcast.emit(/* ... */);

  // to all clients in room1 except the sender
  socket.to("room1").emit(/* ... */);

  // to all clients in room1 and/or room2 except the sender
  socket.to("room1").to("room2").emit(/* ... */);

  // to all clients in room1
  io.in("room1").emit(/* ... */);

  // to all clients in namespace "myNamespace"
  io.of("myNamespace").emit(/* ... */);

  // to all clients in room1 in namespace "myNamespace"
  io.of("myNamespace").to("room1").emit(/* ... */);

  // to individual socketid (private message)
  io.to(socketId).emit(/* ... */);

  // to all clients on this node (when using multiple nodes)
  io.local.emit(/* ... */);

  // to all connected clients
  io.emit(/* ... */);

  // WARNING: `socket.to(socket.id).emit()` will NOT work, as it will send to everyone in the room
  // named `socket.id` but the sender. Please use the classic `socket.emit()` instead.

  // with acknowledgement
  socket.emit("question", (answer) => {
    // ...
  });

  // without compression
  socket.compress(false).emit(/* ... */);

  // a message that might be dropped if the low-level transport is not writable
  socket.volatile.emit(/* ... */);

});

Fernando Francisco López Mauro

student•

Es buena practica utilizar elementos por un ID sin obtenerlos con document.getElementByid?

Cristian Camilo Cortes Ortiz

student•

EMISIÓN DE EVENTOS

La emisión de eventos en Socket.io es un mecanismo que permite la comunicación bidireccional eficiente entre el cliente y el servidor mediante el envío y la recepción de mensajes personalizados. Tanto el cliente como el servidor pueden emitir eventos utilizando métodos como emit*, que envían datos asociados a un evento específico. Estos eventos pueden ser escuchados por el receptor mediante métodos como* on*, permitiendo la ejecución de funciones de* callback cuando se recibe el evento. Este sistema de eventos facilita la implementación de funcionalidades complejas en tiempo real, como actualizaciones instantáneas, notificaciones y sincronización de datos entre múltiples usuarios y dispositivos.

Irving Juárez

student•

Un mejor ejercicio, creo yo seria tener un contador donde cada cliente se conecta muestra la cantidad total de clientes, entonces cada que haya un cliente nuevo, todos los otros clientes se actualizan. Algo como lo siguiente:

// SERVER
io.on("connection", (_socket) => {
    io.emit("counter", {
        counter: io.engine.clientsCount
    });
});

// CLIENT
socket.on("counter", (payload) => {
    counter.textContent = payload.counter;
});

Irving Juárez

student•

Solo como dato curioso, casi de la misma manera funcionan los microfrontends. Bueno, es una manera en la que podemos comunicar un microfrontend con otro, a traves de eventos que se crean en el navegador

Irving Juárez

student•

io seria el manager de las primeras clases de teoria

Carlos Loaiza

student•

Como se sacan las caritas emoticones en visual estudio code?. Gracias

Oscar Rubio

student•

Windows + .

Henry Corredor

student•

hoyga como ze aze para ezcribir los emoyis? :v

Oscar Rubio

student•

tecla windows + .

Henry Corredor

student•

ahnomamesguey!!! 🫢😨😱⚠️ y funciona en Ubuntu! 🐕

VICTOR MANUEL MURILLO CAMAYO

student•

//enviar a todos io.emit("everyone", "el sockect " + socket.id + " se ha conectado") //enviar a todos excepto al emisor socket.broadcast.emit("everyone", "el sockect " + socket.id + " se ha conectado")

io.on("connection", (socket) => {

  // basic emit
  socket.emit(/* ... */);

  // to all clients in the current namespace except the sender
  socket.broadcast.emit(/* ... */);

  // to all clients in room1 except the sender
  socket.to("room1").emit(/* ... */);

  // to all clients in room1 and/or room2 except the sender
  socket.to("room1").to("room2").emit(/* ... */);

  // to all clients in room1
  io.in("room1").emit(/* ... */);

  // to all clients in namespace "myNamespace"
  io.of("myNamespace").emit(/* ... */);

  // to all clients in room1 in namespace "myNamespace"
  io.of("myNamespace").to("room1").emit(/* ... */);

  // to individual socketid (private message)
  io.to(socketId).emit(/* ... */);

  // to all clients on this node (when using multiple nodes)
  io.local.emit(/* ... */);

  // to all connected clients
  io.emit(/* ... */);

  // WARNING: `socket.to(socket.id).emit()` will NOT work, as it will send to everyone in the room
  // named `socket.id` but the sender. Please use the classic `socket.emit()` instead.

  // with acknowledgement
  socket.emit("question", (answer) => {
    // ...
  });

  // without compression
  socket.compress(false).emit(/* ... */);

  // a message that might be dropped if the low-level transport is not writable
  socket.volatile.emit(/* ... */);

});

// SERVER
io.on("connection", (_socket) => {
    io.emit("counter", {
        counter: io.engine.clientsCount
    });
});

// CLIENT
socket.on("counter", (payload) => {
    counter.textContent = payload.counter;
});

Emisión 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?