3

Mi intención es buscar una manera de poder manejar los eventos on, emit, etc. de socket, dentro de un endpoint.

Mi archivo index tiene esto:

Index.ts

import express, { Application } from 'express'
import morgan from 'morgan'
import HTTP from 'http'
import { Server } from 'socket.io'
import cors from 'cors'
import helmet from 'helmet'
import compression from 'compression'
import passport from 'passport'
import { config } from 'dotenv'
import './database/connect'
import passportAuth from './auth/passport'

//routers
import Authentication from './routers/authentication.routes'

class Backend {
  private app: Application
  private HTTP: HTTP.Server
  private io: Server

  constructor(){
    this.app = express()
    this.HTTP = HTTP.createServer(this.app)
    this.io = new Server(this.http)
    this._Config()
    this._Routers()
    config()
  }

  private _Config(): void {
    // Settings
    this.app.set('port', process.env.PORT || 8080);
    // middlewares
    this.app.use(morgan('dev'));
    this.app.use(cors());
    this.app.use(express.json());
    this.app.use(express.urlencoded({ extended: true }));
    this.app.use(passport.initialize());
    this.app.use(helmet());
    this.app.use(compression());
  }

  private _Routers(): void {
    //ruta estatica
    this.app.use("/uploads", express.static('./uploads'))
    //end-points y controladores
    this.app.use("/api", Authentication)
  }

  public _Start(): void {
    this.http.listen(this.app.get('port'), () => {
      console.log('Servidor escuchando en el puerto', this.app.get('port'))
    })

    this.io.on('connection', (socket)=>{
      console.log(socket.id)
    })
  }
}

const server = new Backend()
server._Start()

Como pueden ver, estoy escuchando la conexión al socket en el método _Start(). Lo que yo quiero hacer es poder manipular el parámetro que recibo (socket) de la función del on que es donde escucho la conexión al servidor.

Dentro de una carpeta routers manejo las rutas de la siguiente manera:

routers/authentication.routes.ts

import { Router } from 'express'
const route = Router()

//controllers
import { Iniciar_Sesion, Registrar } from './../controllers/authentication.controllers'

route.post('/iniciar', Iniciar_Sesion)
route.post('/registrar', Registrar)

export default route

Y como es obvio, dentro de otra carpeta contengo los controladores para tener mas ordenado mi código. Simplificando la pregunta, necesito poder emitir y escuchar eventos de los sockets dentro de cada endpoint.

PD: Necesito que la conexión del socket no se reinicie cada vez que el usuario realice una petición, ya que guardo el id del socket dentro de la bbdd cada vez que el usuario inicia sesión y no es buena idea estar ingresando un nuevo id a la bbdd cuando el usuario haga una consulta al servidor, es por eso que hago la escucha connection dentro del _Start()

3
  • Lo que quieres hacer es poder tener acceso al objeto socket (creado previamente en _Start()) dentro de la función Iniciar_Sesion de tu archivo routers/authentication.routes.ts?
    – ben
    Commented el 13 ene. 2021 a las 3:10
  • mi idea es poder extender el objeto req de los controladores para poder utilizar desde alli el objeto socket, algo como req.socket.emit() o req.socket.on(), me explico?
    – Enzo
    Commented el 13 ene. 2021 a las 3:14
  • en la pregunta agregue las rutas de auth para que tengan un ejemplo mas o menos de como esta estructurado el backend
    – Enzo
    Commented el 13 ene. 2021 a las 3:16

1 respuesta 1

3
+100

Disclaimer

Supongo que no hay algo nativo ya implementado porque es un poco raro el caso que planteas, lo normal sería utilizar namespaces o rooms. Sin embargo, supongo que podrían existir casos remotos donde sea necesario hacer algo como lo que quieres.

Antes de utilizar la siguiente solución, o alguna similar, contemple la opción de utilizar namespaces o rooms, pues es la forma más fácil (e integrada en la librería) de separar la lógica de la aplicación de WebSockets, así como separamos la lógica en la aplicación HTTP.

En palabras cortas el disclaimer es preferir utilizar namespaces o rooms a utilizar esta solución (es más sencillo)

Solución

Dado que el protocolo HTTP es un protocolo stateless, es un poco dificil hacer lo que se plantea, aunado a ello, se desea mantener un estado entre la aplicación que usa HTTP y la que usa websockets. En fin, después de entender el problema y analizarlo llegué a una posible solución que consiste en:

Colocar el ID del socket en un header HTTP para que desde la ruta HTTP que quieras puedas acceder al objeto socket creado previemente (supuestamente).

Para ello hice el siguiente ejemplo

Código del server

app.js

const express = require("express");
const app = express();

app.use("/", express.static("../web")); // ignorar esto

const io = require("socket.io")(3000); // poner el servidor de socket.io en el puerto 3000

const authRouter = require("./routers/auth.routers");

/**
 * Utilizar esta función como middleware para inyectar en el objeto req
 * el socket (de socket.io) correspondiente al header que exista en el objeto req
 * Si no se encuentra el socket, i. e. el cliente está haciendo una petición sin haber
 * iniciado una conexión con socket.io
 * entonces se inyectará un valor falsy en la propiedad {@code socketIO},
 * de lo contrario se inyectara el socket encontrado
 */
const injectSocketMiddleWare = (req, res, next) => {
    const socketID = req.header("X-Socket-IO-ID");
    const socketIO = io.of("/").sockets.get(socketID);

    if (!socketIO)
        console.warn("Some client does not have the X-Socket-IO-ID set!");

    req.socketIO = socketIO;

    next();
}

// utilizar el middleware para inyectar el socket en req.socketIO
app.use("/api", injectSocketMiddleWare, authRouter);

app.listen(3030, () => console.log("Server is listening"));

Nótese que hay un servidor a la escucha en el puerto 3030 (para las peticiones a /api) y otro en el puerto 3000 (para socket.io)

routers/auth.routers.js

const Router = require("express").Router;

const router = Router();

router.post("/iniciar", (req, res) => {
    // verificar que el socket existe para que no truene el programa
    // nota: también hay que validar que emit sea una función, solo por si acaso
    if (req.socketIO && req.socketIO.emit)
        req.socketIO.emit("message", "Hola, este es un mensaje enviado desde el server para el cliente: " + req.socketIO.id);

    res.send();
});

module.exports = router;

El código con sus comentarios creo que se explica sólo y no hay necesidad de agregar mayor explicación, salvo por responder la pregunta ¿de dónde sale el header X-Socket-IO-ID?

Bueno, ese header como su nombre lo indica es el ID del socket generado, es el id del que vendría siendo el objeto socket dentro de la función callback para this.io.on('connection', (socket)=>{...}) de la pregunta

Con ese ID podemos obtener el socket, gracias a que socket.io mantiene un hashtable (específicamente un Map) de los sockets conectados en un determinado namespace (con io.of("/").sockets obtenemos dicho Map para el namespace por defecto).

Código del cliente

Con el servidor listo, solamente falta el código del cliente para agregar el header correspondiente, pero eso es más sencillo que lo anterior, el código simplemente es el siguiente.

const socket = io("http://localhost:3000"); // hacer la conexión con el servidor de socket.io

let socketID;

socket.on("connect", () => {
    socketID = socket.id;

    // hacer la petición al servidor de la API
    fetch("http://localhost:3030/api/iniciar", {
        method: "POST",
        headers: {
            "X-Socket-IO-ID": socketID // setear el header con el socket id correcto
    });
});

socket.on("message", (msg) => {
    console.log(msg);
});

Y listo, si se ejecuta el código anterior (backend y frontend) en la consola del frontend se debería ver el mensaje

Hola, este es un mensaje enviado desde el server para el cliente: <id del socket>

Por último, el manejo del ID del socket quizá sea más sencillo si en vez de colocar un nuevo header, aprovechamos la sesión y utilizamos express-session o alguno otro similar.

Aunque a final de cuentas esa forma de hacerlo es muy similar a la que está expuesta pues básicamente las sesiones se envían en los headers HTTP.

Ah, se me olvidaba aclarar que lo hice en javascript y no en typescript debido a que al agregar la propiedad socketIO, el compilador detectaba que algo andaba mal pues la interfaz express.Request no tiene ningún atributo socketIO, lo cual es totalmente cierto. Si se quisiera hacer en typescript habría que hacer una nueva clase o interfaz que incorporara dicho campo. Pero bueno, en general dejé la estructura del código presentado similar a la estructura del código de la pregunta.

3
  • me hablas de namespace o rooms, pero lo que quiero hacer es simplemente hacer las peticiones al backend y si esta todo bien entonces ejecuto los eventos del socket, ejemplo: un usuario comienza a seguir a otro, entonces hago todo el proceso y una vez guarde los datos donde deben ir emito el evento para avisarle al otro usuario que tiene un nuevo seguidor, me explico?
    – Enzo
    Commented el 13 ene. 2021 a las 7:30
  • me hablas de namespace o rooms, pero lo que quiero hacer es simplemente hacer las peticiones al backend y si esta todo bien entonces ejecuto los eventos del socket -> Genial, pero las peticiones son STATELESS, es decir NO GUARDAN INFORMACIÓN DE UNA VEZ PARA OTRA. Cómo pretendes mantener entonces el socket entre llamadas?? Pues exactamente como se indica en esta respuesta, por ejemplo!
    – Benito-B
    Commented el 13 ene. 2021 a las 8:29
  • Exacto, como dijo Benito-B, así se puede "mantener" el estado (el socket) entre petición y petición. Realmente es el servidor el que tiene los sockets, los clientes solo mantienen una "referencia" (el ID) al socket. Lo que deseas hacer @enzo, lo puedes hacer con lo explicado en la respuesta, solo tienes que manejar un mapeo de usuarios, de forma similar a como se maneja el mapeo de sockets. Pero nuevamente, quizá sea mejor idea utilizar namespaces (por ejemplo, un namespace /user donde vayan todos los eventos del usuario, e.g. login, follow, etc... todo lo que quieras).
    – ben
    Commented el 13 ene. 2021 a las 19:40

Tu Respuesta

By clicking “Publica tu respuesta”, you agree to our terms of service and acknowledge you have read our privacy policy.

¿No es la respuesta que buscas? Examina otras preguntas con la etiqueta o formula tu propia pregunta.