Why WebSockets enable real-time features in NestJS - See It in Action

Why WebSockets Enable Real-Time Features

📖 Scenario: You are building a simple chat server using NestJS. The goal is to understand how WebSockets help send and receive messages instantly between users without refreshing the page.

🎯 Goal: Create a basic NestJS WebSocket gateway that can receive a message from a client and broadcast it to all connected clients in real-time.

📋 What You'll Learn

Create a WebSocket gateway class named ChatGateway

Add a message handler method named handleMessage that receives a message string

Broadcast the received message to all connected clients using this.server.emit

Use the SubscribeMessage decorator for the message handler

Initialize the WebSocket server using the WebSocketGateway decorator

💡 Why This Matters

🌍 Real World

Real-time chat apps, live notifications, multiplayer games, and collaborative tools use WebSockets to instantly send and receive data between users.

💼 Career

Understanding WebSockets and how to implement them in NestJS is valuable for backend developers building interactive, real-time web applications.

1

Set up the WebSocket gateway class

Create a class called ChatGateway and decorate it with @WebSocketGateway() to initialize a WebSocket server.

NestJS

@WebSocketGateway()
export class ChatGateway {
  // Your code here
}

Need a hint?

Use @WebSocketGateway() above the class to create a WebSocket server.

2

Add a message handler method

Inside the ChatGateway class, add a method called handleMessage that takes a single parameter message of type string. Decorate this method with @SubscribeMessage('message').

NestJS

import { WebSocketGateway, SubscribeMessage } from '@nestjs/websockets';

@WebSocketGateway()
export class ChatGateway {
  // Add handleMessage method here
}

Need a hint?

Use @SubscribeMessage('message') to listen for messages named 'message'.

3

Broadcast the received message

Inside the handleMessage method, broadcast the received message to all connected clients using this.server.emit('message', message). Also, declare a property server of type Server and decorate it with @WebSocketServer().

NestJS

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

@WebSocketGateway()
export class ChatGateway {
  @WebSocketServer()
  server: Server;

  @SubscribeMessage('message')
  handleMessage(message: string) {
    // Broadcast message here
  }
}

Need a hint?

Use @WebSocketServer() to get the server instance and call emit to send messages to all clients.

4

Complete the gateway for real-time messaging

Ensure the ChatGateway class imports Server from socket.io, uses the decorators @WebSocketGateway(), @WebSocketServer(), and @SubscribeMessage('message'), and that the handleMessage method broadcasts the message to all clients.

NestJS

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

// Finalize the ChatGateway class
// Your code here

Need a hint?

Check all imports and decorators are present and the message is broadcasted correctly.