Node.js Backend Development Bootcamp · Lezione

WebSocket con NestJS

Comprenda le nozioni di base dei WebSocket e il modo in cui NestJS offre un supporto solido per la comunicazione bidirezionale in tempo reale.

WebSocket con NestJS è una lezione Node.js Backend Development Bootcamp gratuita su CoddyKit. Questa è la lezione 2 di 6. Puoi leggere la lezione completa qui gratuitamente — poi esercitati direttamente nel browser con un editor di codice integrato e un tutor IA disponibile 24/7. Fa parte del percorso di apprendimento Node.js Backend Development Bootcamp, e i tuoi progressi si sincronizzano tra il web e l'app CoddyKit. Il corso Node.js Backend Development Bootcamp include 6 lezioni in totale.

Parti di questa lezione non sono ancora state tradotte e vengono mostrate in inglese.

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.

Domande Frequenti

La lezione «WebSocket con NestJS» è gratuita?

Sì — il testo completo di «WebSocket con NestJS» è gratuito qui sul web. Per esercitarvi in modo interattivo (un editor di codice integrato e un tutor IA 24/7) e sbloccare il resto del corso Node.js Backend Development Bootcamp, passa a CoddyKit PRO. Il corso Node.js Backend Development Bootcamp include 6 lezioni in totale.

Cosa imparerò in «WebSocket con NestJS»?

Comprenda le nozioni di base dei WebSocket e il modo in cui NestJS offre un supporto solido per la comunicazione bidirezionale in tempo reale. Eserciti Node.js Backend Development Bootcamp con codice pratico che esegui direttamente nel browser, e un tutor IA 24/7 risponde alle tue domande mentre lavori sulla lezione.

Ho bisogno di esperienza per iniziare Node.js Backend Development Bootcamp?

Non è richiesta alcuna esperienza precedente. Node.js Backend Development Bootcamp su CoddyKit è strutturato per principianti e studenti avanzati, quindi puoi iniziare da qui o dall'inizio e procedere al tuo ritmo. Questa è la lezione 2 di 6.

Quanto tempo richiede la lezione «WebSocket con NestJS»?

La maggior parte delle lezioni CoddyKit richiede circa 5–10 minuti. Ogni lezione è breve e interattiva, quindi fai progressi costanti e riprendi esattamente da dove hai lasciato su web e app.

Posso scrivere ed eseguire codice in questa lezione Node.js Backend Development Bootcamp?

Sì. Ogni lezione Node.js Backend Development Bootcamp include un editor di codice integrato, quindi scrivi ed esegui codice reale direttamente nel tuo browser e ricevi feedback istantaneo dall'IA — nessuna configurazione locale necessaria.

Tutte le lezioni di questo corso

← Torna a Node.js Backend Development Bootcamp