Node.js Backend Development Bootcamp · Lección

WebSockets con NestJS

Comprenda los fundamentos de WebSockets y cómo NestJS ofrece un sólido soporte para la comunicación bidireccional en tiempo real.

WebSockets con NestJS es una lección gratuita de Node.js Backend Development Bootcamp en CoddyKit. Esta es la lección 2 de 6. Puedes leer la lección completa abajo gratuitamente — luego la practicas en el navegador con un editor de código integrado y un tutor de IA 24/7. Forma parte de la ruta de aprendizaje de Node.js Backend Development Bootcamp, y tu progreso se sincroniza en la web y la app de CoddyKit. El curso de Node.js Backend Development Bootcamp incluye 6 lecciones en total.

Partes de esta lección aún no han sido traducidas y se muestran en inglés.

Unlock Real-time Communication

Ever wondered how chat apps, live sports scores, or multiplayer games update instantly? This is real-time communication!

Traditional web requests are like a quick phone call: you ask, you get an answer, then hang up. For constant updates, we need something more persistent.

WebSockets provide this 'always-on' connection, allowing data to flow freely between server and client without constant re-requests.

HTTP's Limitations vs. WS

Let's compare how HTTP and WebSockets handle communication:

HTTP: A request-response protocol. The client sends a request, the server sends a response, and the connection closes. Inefficient for continuous, bidirectional updates.
WebSockets: A persistent, bidirectional communication protocol. Once connected, both client and server can send data at any time without re-establishing the connection.

Think of HTTP as mailing a letter, and WebSockets as an open phone line.

How a WS Connection Starts

A WebSocket connection doesn't just appear. It begins with a special HTTP request called a handshake:

The client sends an HTTP request with an 'Upgrade' header, asking to switch protocols.
If the server supports WebSockets, it responds with an 'Upgrade' header confirming the switch.
This 'upgrades' the connection from HTTP to the WebSocket protocol (ws:// or wss:// for secure).

After the handshake, the raw TCP connection is used for full-duplex WebSocket messages.

NestJS & WebSockets Module

Building WebSocket servers from scratch can be complex. NestJS simplifies this with its robust WebSocket module.

It provides powerful abstractions like Gateways that integrate seamlessly with its modular architecture, letting you focus on your application logic rather than low-level connection management.

NestJS supports various underlying WebSocket libraries, with @nestjs/platform-ws being a common and easy-to-use choice.

Understanding NestJS Gateways

In NestJS, a Gateway is a class decorated with @WebSocketGateway(). It acts as the primary entry point for WebSocket connections, similar to how a Controller handles HTTP requests.

Gateways listen for incoming WebSocket events (messages from clients) and can also emit events back to connected clients. They are central to managing real-time interactions in your NestJS application.

Basic Node.js WS Server

Let's see a simple WebSocket server using the ws library in Node.js. This demonstrates the core idea of listening for connections and messages, which NestJS abstracts for us.

Run this example and observe the console output when a client connects. (You can connect using new WebSocket('ws://localhost:8080') in a browser's console).

const WebSocket = require('ws');
const wss = new WebSocket.Server({ port: 8080 });

wss.on('connection', ws => {
  console.log('Client connected!');
  ws.on('message', message => {
    console.log(`Received: ${message}`);
    ws.send(`Echo: ${message}`);
  });
  ws.on('close', () => console.log('Client disconnected.'));
});

console.log('WebSocket server started on port 8080');

Building a NestJS Gateway

To create a Gateway in NestJS, you define a class and decorate it with @WebSocketGateway(). This decorator can take an optional port and options for the underlying WebSocket server.

Here's a basic structure for a chat gateway:

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

@WebSocketGateway(8080, { cors: true }) // Listens on port 8080
export class ChatGateway {
  @WebSocketServer()
  server: Server; // Inject the WebSocket server instance

  // Gateway logic will go here
}

Handling Messages with Decorators

NestJS Gateways use decorators to handle specific incoming messages (events) from clients.

@SubscribeMessage('eventName'): Marks a method to handle messages with a specific name.
@MessageBody(): Extracts the data payload from the incoming message.
@ConnectedSocket(): Extracts the connected client's socket instance.

This makes it easy to route and process client messages.

import { SubscribeMessage, MessageBody, ConnectedSocket } from '@nestjs/websockets';
import { Socket } from 'socket.io'; // Or 'ws' Socket type

// ... inside ChatGateway class

@SubscribeMessage('sendMessage')
handleMessage(
  @MessageBody() data: string,
  @ConnectedSocket() client: Socket,
): string {
  console.log(`Client ${client.id} sent: ${data}`);
  client.emit('messageReceived', `You said: ${data}`);
  return data; // Can also return observable or promise
}

Managing Connections Lifecycle

Gateways can also manage connection and disconnection events by implementing lifecycle interfaces:

OnGatewayConnection: For logic when a client connects.
OnGatewayDisconnect: For logic when a client disconnects.
OnGatewayInit: For initialization tasks when the gateway is ready.

These methods give you control over the client's journey.

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

// ... inside ChatGateway class

export class ChatGateway implements OnGatewayInit, OnGatewayConnection, OnGatewayDisconnect {
  afterInit(server: any) {
    console.log('Gateway Initialized!');
  }

  handleConnection(client: Socket, ...args: any[]) {
    console.log(`Client connected: ${client.id}`);
  }

  handleDisconnect(client: Socket) {
    console.log(`Client disconnected: ${client.id}`);
  }
}

Sending Data to Clients

Once you have the server instance (injected with @WebSocketServer()) or a specific client socket, you can send messages:

client.emit('event', data): Sends data to a specific client.
this.server.emit('event', data): Broadcasts data to all connected clients.
this.server.to('roomName').emit('event', data): Sends data to clients in a specific 'room' (useful for group chats).

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

// ... inside ChatGateway class

@SubscribeMessage('joinRoom')
handleJoinRoom(@MessageBody() room: string, @ConnectedSocket() client: Socket) {
  client.join(room);
  client.emit('joinedRoom', `You joined ${room}`);
  this.server.to(room).emit('roomMessage', `${client.id} joined ${room}`);
}

@SubscribeMessage('broadcastMessage')
handleBroadcast(@MessageBody() message: string) {
  this.server.emit('newMessage', `Broadcast: ${message}`);
}

Quick Check: WS Features

Which of the following are key characteristics of WebSocket communication?

Recap: WebSockets with NestJS

In this lesson, we explored the fundamentals of WebSockets and their powerful integration with NestJS.

WebSockets provide persistent, bidirectional communication for real-time applications.
NestJS simplifies WebSocket development through Gateways.
Gateways use decorators like @WebSocketGateway(), @SubscribeMessage(), @MessageBody(), and lifecycle hooks to manage events and connections.
You can send messages to individual clients or broadcast to many using the injected Server instance.

Next, we'll dive deeper into configuring Gateways and handling more complex scenarios.

Preguntas frecuentes

¿La lección «WebSockets con NestJS» es gratis?

Sí — el texto completo de «WebSockets con NestJS» es gratis para leer aquí en la web. Para practicarla de forma interactiva (editor de código integrado y tutor de IA 24/7) y desbloquear el resto del curso de Node.js Backend Development Bootcamp, actualiza a CoddyKit PRO. El curso de Node.js Backend Development Bootcamp incluye 6 lecciones en total.

¿Qué aprenderé en «WebSockets con NestJS»?

Comprenda los fundamentos de WebSockets y cómo NestJS ofrece un sólido soporte para la comunicación bidireccional en tiempo real. Practicas Node.js Backend Development Bootcamp con código real que ejecutas directamente en el navegador, y un tutor de IA 24/7 responde tus preguntas mientras trabajas en la lección.

¿Necesito experiencia previa para empezar Node.js Backend Development Bootcamp?

No se requiere experiencia previa. Node.js Backend Development Bootcamp en CoddyKit está estructurado para principiantes hasta estudiantes avanzados, así que puedes empezar aquí o desde el inicio y avanzar a tu ritmo. Esta es la lección 2 de 6.

¿Cuánto tiempo toma la lección «WebSockets con NestJS»?

La mayoría de las lecciones de CoddyKit toman alrededor de 5–10 minutos. Cada una es compacta e interactiva, así que avanzas constantemente y retomas exactamente por donde dejaste en la web y la app.

¿Puedo escribir y ejecutar código en esta lección de Node.js Backend Development Bootcamp?

Sí. Cada lección de Node.js Backend Development Bootcamp incluye un editor de código integrado, así que escribes y ejecutas código real directamente en tu navegador y obtienes retroalimentación instantánea de IA — sin configuración local necesaria.

Todas las lecciones de este curso

← Volver a Node.js Backend Development Bootcamp