Manejo de Middlewares

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

Carlos Alejandro Hernández Mejía

student•

Manejo de middlewares

💡 Middleware → Es un fragmento de código que se ejecuta antes de conectarnos a nuestro servidor de socket io.

Por ejemplo, podríamos ejecutar cierto código para validar si estamos autorizados (o no) a conectarnos al chat de administradores.

Básicamente, en un middleware podríamos aplicar alguna lógica de negocio antes de conectarnos a un socket.

Ejemplo:

io.use((socket, next) => {
  // Tu lógica de negocio
  if (// todo OK) {
    next();
  } else {
    const error = new Error('Un error')
    error.data = { details: 'Info del error' };
    next(error);
  }
});

Henry Corredor

student•

ah que interesante... aquí podemos usar PassportJS y JWT para autenticar! .o.

Iván Roberto Rivas Celeita

student•

este curso aparte del manejo de socket me aterrizó el manejo de express

Irving Juárez

student•

Interesante que lo menciones, ya que no estamos usando express en esta clase.

En el caso de express, el middleware seria de la siguiente manera:

app.use((req, res, next) => {
  
});
```La verdad es que todos los middlewares, ya sea en express, next o en frameworks de python lucen similar, aunque con ciertos cambios en la sintaxis. Websockets no es la excepción

Andrés Esteban Rodríguez Jiménez

student•

Manejo de Middlewares

Un middleware es un fragmento de código que se ejecuta antes que se ejecute una acción, este puede recibir parámetros y manipular la información enviada x o se conecte a un servicio antes de que se envíe o hacer autenticación de datos y validaciones antes de acceder a cierta ruta y etc.

Para entender como usar middlewares con socket io vamos a limpiar nuestro código base.

Supongamos que antes de realizar la conexión desde el código del servidor queremos ejecutar un middleware, para esto lo deberíamos utilizar io.use():

io.use(/* Aquí dentro puedo meter una función que actue como middleware */)

// estructura del middleware
io.use((socket, next)=> {
	// con "socket" recibimos el socket que nos envia la conexión
	// resolvemos el middleware con el callback "next()"
})

Veamos un ejemplo en el código del lado del servidor:

// midleware de autenticación de usuario
io.use((socket, next) => {
  // validamos una autenticación de token con nuestro middleware
  const token = socket.handshake.auth.token
  
  // si el token es válido
  if (token === 'Mr. Michi es muy cool') {
    // podemos ejecutar el resto del código
    next()
  }

  // si el token no es válido
  else {
    // creamos un error
    const error = new Error('No puedes pasar >:(')
    error.data = {
      details: 'No pudiste ser autenticado'
    }

    // como enviamos un error al "next()" no seguirá con la ejecución del código
    next(error)
  }
})

io.on('connection', socket => {
	console.log(socket.id + ' ha ingresado :3');

Para poder ingresar de manera adecuada nuestro socket, el token que nos solicita debe ser correcto, veamos como gestionar esto en el lado del cliente:

// el io puede recibir un objeto de validación
const socket = io({
  auth: {
    // aquí enviamos nuestro token de validación
    token: 'Mr. Michi es muy cool'
  }
})

// En caso de error el middlware...
socket.io('connect_error', (error) => {
  console.log('Error de connexión 🫠');
  console.error(error.message);
  console.error(error.data.details);
})

Si enviamos nuestro token correcto, podremos ingresar de manera normal, pero en caso de que el token no sea válido, lo que va a ocurrir es que nos retornará nuestros mensajes de error y no nos permitirá continuar con lo que se ejecute después del middleware, que en este caso es un console.log() en nuestra terminal de servidor que verifica que hemos ingresado.

Podemos usar cuantos middlewares queramos para realizar las acciones que necesitemos necesitemos, basta con agregar otro io.use().

// middleware 1
io.use((socket, next)=> {/* Code... */})

// middleware 2
io.use((socket, next)=> {/* Code... */})

// middleware 3...
io.use((socket, next)=> {/* Code... */})

De esta forma es como podemos utilizar middlewares con socket io.

Cristian Camilo Cortes Ortiz

student•

MANEJO DE MIDDLEWARES

El manejo de eventos con middleware en Socket.io permite interceptar, modificar, o rechazar eventos antes de que lleguen a su destino final. Los middlewares en Socket.io funcionan de manera similar a los de frameworks como Express.js*, proporcionando una capa adicional de control y seguridad. Utilizando el método use, se pueden registrar funciones middleware que se ejecutan antes de que cualquier evento sea procesado por el servidor o el cliente. Estos middlewares pueden realizar tareas como la validación de datos, autenticación de usuarios, o registro de actividad, mejorando la robustez y la integridad de la aplicación en tiempo real. Esta funcionalidad facilita la implementación de lógica compleja y asegura que los eventos cumplan con ciertos criterios antes de ser aceptados o enviados.*

io.use((socket, next) => {
  // Tu lógica de negocio
  if (// todo OK) {
    next();
  } else {
    const error = new Error('Un error')
    error.data = { details: 'Info del error' };
    next(error);
  }
});

app.use((req, res, next) => {
  
});
```La verdad es que todos los middlewares, ya sea en express, next o en frameworks de python lucen similar, aunque con ciertos cambios en la sintaxis. Websockets no es la excepción

io.use(/* Aquí dentro puedo meter una función que actue como middleware */)

// estructura del middleware
io.use((socket, next)=> {
	// con "socket" recibimos el socket que nos envia la conexión
	// resolvemos el middleware con el callback "next()"
})

// midleware de autenticación de usuario
io.use((socket, next) => {
  // validamos una autenticación de token con nuestro middleware
  const token = socket.handshake.auth.token
  
  // si el token es válido
  if (token === 'Mr. Michi es muy cool') {
    // podemos ejecutar el resto del código
    next()
  }

  // si el token no es válido
  else {
    // creamos un error
    const error = new Error('No puedes pasar >:(')
    error.data = {
      details: 'No pudiste ser autenticado'
    }

    // como enviamos un error al "next()" no seguirá con la ejecución del código
    next(error)
  }
})

io.on('connection', socket => {
	console.log(socket.id + ' ha ingresado :3');

// el io puede recibir un objeto de validación
const socket = io({
  auth: {
    // aquí enviamos nuestro token de validación
    token: 'Mr. Michi es muy cool'
  }
})

// En caso de error el middlware...
socket.io('connect_error', (error) => {
  console.log('Error de connexión 🫠');
  console.error(error.message);
  console.error(error.data.details);
})

Manejo de Middlewares

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?