Node.js Backend Development Bootcamp · Lesson

WebSockets with NestJS

Understand the basics of WebSockets and how NestJS provides robust support for real-time, bidirectional communication.

WebSockets with NestJS is a free Node.js Backend Development Bootcamp lesson on CoddyKit — lesson 2 of 6. You can read the complete lesson below for free — then practise it hands-on in the browser with a built-in code editor and a 24/7 AI tutor. It is part of the Node.js Backend Development Bootcamp learning path, one of 6 lessons in the course, and your progress syncs across the web and the CoddyKit app.

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.

Frequently asked questions

Is the “WebSockets with NestJS” lesson free?

Yes — the full text of “WebSockets with NestJS” is free to read here on the web, and the Node.js Backend Development Bootcamp course includes 6 lessons in total. To practise it interactively (a built-in code editor and a 24/7 AI tutor) and unlock the rest of the Node.js Backend Development Bootcamp course, upgrade to CoddyKit PRO.

What will I learn in “WebSockets with NestJS”?

Understand the basics of WebSockets and how NestJS provides robust support for real-time, bidirectional communication. You practise Node.js Backend Development Bootcamp with hands-on code you run directly in the browser, and a 24/7 AI tutor answers your questions as you work through the lesson.

Do I need any experience to start Node.js Backend Development Bootcamp?

No prior experience is required. Node.js Backend Development Bootcamp on CoddyKit is structured for beginners through advanced learners; this is — lesson 2 of 6, so you can start here or from the beginning and move at your own pace.

How long does the “WebSockets with NestJS” lesson take?

Most CoddyKit lessons take about 5–10 minutes. Each one is bite-sized and interactive, so you make steady progress and pick up exactly where you left off across the web and the app.

Can I write and run code in this Node.js Backend Development Bootcamp lesson?

Yes. Every Node.js Backend Development Bootcamp lesson includes a built-in code editor, so you write and run real code right in your browser and get instant AI feedback — no local setup required.

All lessons in this course

← Back to Node.js Backend Development Bootcamp