Nestjs WebSockets

¡Hey Coders! Bienvenidos a este tutorial de Nestjs en donde aprenderan a implementar Websockets.

NestJS es un framework de backend de Node.js que ha ganado popularidad gracias a su enfoque modular y escalabilidad. En este artículo, exploraremos la integración de WebSockets en aplicaciones NestJS, aprovechando la capacidad de tiempo real que ofrecen. Los WebSockets son fundamentales para construir aplicaciones interactivas y en tiempo real, y NestJS facilita su implementación mediante su arquitectura basada en módulos y su integración con el ecosistema de JavaScript/TypeScript.

Primero, creemos un proyecto de NestJS

Para comenzar con la implementación de WebSockets en un proyecto NestJS, primero debemos crear un nuevo proyecto. Si aún no tienes instalado el CLI de Nest, puedes hacerlo ejecutando el siguiente comando:

npm install -g @nestjs/cli

Luego, creamos un nuevo proyecto NestJS con el siguiente comando:

nest new nest-websockets-project

Este comando generará la estructura básica del proyecto. Ahora, ingresamos al directorio del proyecto:

cd nest-websockets-project

Con nuestro proyecto de NestJS listo, podemos pasar a la siguiente etapa, que implica configurar y habilitar la funcionalidad de WebSockets en nuestra aplicación.

Configuración de WebSockets en NestJS

NestJS ofrece un módulo integrado para trabajar con WebSockets, lo que simplifica en gran medida su implementación. Comencemos instalando la dependencia necesaria:

npm i --save @nestjs/websockets @nestjs/platform-socket.io

A continuación, crearemos un controlador que manejará las conexiones WebSocket. En el directorio src, creamos un nuevo archivo llamado websockets/websocket.gateway.ts:

import { WebSocketGateway, WebSocketServer } from '@nestjs/websockets';
import { Server } from 'socket.io';

@WebSocketGateway({
  cors: {
    origin: '*',
  },
})
export class WebsocketGateway {
  @WebSocketServer()
  server: Server;
}

Este código define un Gateway de WebSocket básico. Ahora, registremos este gateway en nuestro módulo principal. Crea un archivo websockets/websocket.module.ts con lo siguiente:

import { Module } from '@nestjs/common';
import { WebsocketGateway } from './websocket.gateway';

@Module({
  providers: [WebsocketGateway],
})
export class GatewayModule {}

Abre el archivo app.module.ts y agrégalo a la lista de imports:

import { Module } from '@nestjs/common';
import { AppController } from './app.controller';
import { AppService } from './app.service';
import { GatewayModule } from './websockets/websocket.module';

@Module({
  imports: [GatewayModule],
  controllers: [AppController],
  providers: [AppService],
})
export class AppModule {}

Con esto, hemos configurado la infraestructura básica para trabajar con WebSockets en NestJS. En las secciones siguientes, exploraremos cómo manejar eventos, enviar y recibir mensajes, y aprovechar al máximo la capacidad de tiempo real que ofrecen los WebSockets.

De hecho si ejecutar el comando npm run start:dev veras una salida como la siguiente en terminal: [Nest] 21988 - 01/05/2024, 2:01:53 PM LOG [InstanceLoader] GatewayModule dependencies initialized

Manejo de Eventos y Comunicación en Tiempo Real

Ahora que hemos configurado la base para trabajar con WebSockets en NestJS, exploremos cómo manejar eventos y facilitar la comunicación en tiempo real.

Escuchando Eventos

En nuestro websockets/websocket.gateway.ts, definamos un método para manejar eventos de conexión y desconexión:

import {
  OnGatewayConnection,
  OnGatewayDisconnect,
  WebSocketGateway,
  WebSocketServer,
} from '@nestjs/websockets';
import { Server, Socket } from 'socket.io';

@WebSocketGateway({
  cors: {
    origin: '*',
  },
})
export class WebsocketGateway
  implements OnGatewayConnection, OnGatewayDisconnect
{
  @WebSocketServer()
  server: Server;

  handleConnection(client: Socket) {
    console.log('New client connected', client.id);
  }

  handleDisconnect(client: Socket) {
    console.log('Client disconnected', client.id);
  }
}

Puedes probar la conexion usando Postman, alli puedes probar los eventos de conexion y desconexion

Enviando y Recibiendo Mensajes

Modifiquemos nuestro websockets/websocket.gateway.ts para manejar la recepción y emisión de mensajes:

  @SubscribeMessage('mensaje')
  handleMessage(@MessageBody() data: any) {
    console.log(data);
  }

Luego para enviar un mensaje al resto de clientes puedes usar emit:

  @SubscribeMessage('mensaje')
  handleMessage(@ConnectedSocket() client: Socket, @MessageBody() data: any) {
    console.log(data);
    this.server.emit('mensaje', data);
    // console.log(client.id);
    // client.broadcast.emit('mensaje', data);
  }

Puedes usar postman para enviar un texto y tambien un JSON

En este ejemplo, el método handleMessage escucha eventos llamados 'mensaje' y reenvía el mensaje recibido a todos los clientes conectados.

Con estos pasos, hemos establecido la infraestructura básica para trabajar con WebSockets en un proyecto NestJS. Puedes continuar explorando y personalizando tu aplicación para adaptarla a tus necesidades específicas.

Más Recursos

• https://docs.nestjs.com/websockets/gateways