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
}

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
}

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
  }
}

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

Hint

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

Practice

1. Why do WebSockets enable real-time features in a NestJS application?

easy

A. Because they create a persistent connection allowing instant two-way communication

B. Because they use HTTP requests to fetch data periodically

C. Because they store data locally on the client device

D. Because they only send data when the user refreshes the page

Solution

1. Step 1: Understand WebSocket connection type

   WebSockets create a persistent connection between client and server, unlike HTTP which is request-response based.

2. Step 2: Recognize real-time communication benefit

   This persistent connection allows instant two-way communication, enabling real-time data exchange without delays.

3. Final Answer:

   Because they create a persistent connection allowing instant two-way communication -> Option A

4. Quick Check:

   Persistent connection = Real-time communication [OK]

Hint: Remember: WebSockets keep connection open for instant data [OK]

Common Mistakes:

• Thinking WebSockets use periodic HTTP requests
• Confusing local storage with real-time data transfer
• Assuming data sends only on page refresh

2. Which of the following is the correct way to create a WebSocket gateway in NestJS?

easy

A. function createGateway() { return new WebSocket(); }

B. @WebSocketGateway() export class MyGateway {}

C. @GatewaySocket() class MyGateway {}

D. class MyGateway extends WebSocket {}

Solution

1. Step 1: Identify NestJS WebSocket decorator

   In NestJS, the correct decorator to create a WebSocket gateway is @WebSocketGateway().

2. Step 2: Confirm class declaration syntax

   The gateway is defined as a class exported with the decorator, matching @WebSocketGateway() export class MyGateway {}.

3. Final Answer:

   @WebSocketGateway() export class MyGateway {} -> Option B

4. Quick Check:

   Use @WebSocketGateway() for gateways [OK]

Hint: Look for @WebSocketGateway() decorator in NestJS [OK]

Common Mistakes:

• Using incorrect decorator names like @GatewaySocket
• Trying to extend WebSocket directly
• Using plain functions instead of classes

3. Given this NestJS WebSocket gateway code snippet, what will be the output when a client sends a message 'hello'?

@WebSocketGateway()
export class ChatGateway {
  @SubscribeMessage('message')
  handleMessage(client: any, payload: string): string {
    return `Received: ${payload}`;
  }
}

medium

A. The server throws an error because of missing return type

B. The server broadcasts 'hello' to all clients

C. The server sends back 'Received: hello' to the client

D. The server ignores the message and sends nothing

Solution

1. Step 1: Analyze the handleMessage method

   The method listens for 'message' events and returns a string with the payload included.

2. Step 2: Understand return behavior in NestJS WebSocket

   Returning a string sends that string back only to the client who sent the message.

3. Final Answer:

   The server sends back 'Received: hello' to the client -> Option C

4. Quick Check:

   Return string = reply to sender [OK]

Hint: Returned string replies only to sender client [OK]

Common Mistakes:

• Assuming message is broadcast to all clients
• Expecting an error due to missing explicit return type
• Thinking server ignores the message

4. Identify the error in this NestJS WebSocket gateway code:

@WebSocketGateway()
export class MyGateway {
  @SubscribeMessage('chat')
  handleChat(client, payload) {
    client.emit('chat', payload);
  }
}

medium

A. Using client.emit instead of this.server.emit for broadcasting

B. Missing type annotations for client and payload parameters

C. handleChat method should return a value to send response

D. The @SubscribeMessage decorator is misspelled

Solution

1. Step 1: Understand client.emit vs server.emit

   Using client.emit sends message only to that client, but this.server.emit broadcasts to all connected clients.

2. Step 2: Identify intended behavior

   Since the event is 'chat', usually the message should broadcast to all clients, so this.server.emit is correct.

3. Final Answer:

   Using client.emit instead of this.server.emit for broadcasting -> Option A

4. Quick Check:

   Broadcast needs this.server.emit, not client.emit [OK]

Hint: Broadcast uses this.server.emit, not client.emit [OK]

Common Mistakes:

• Confusing client.emit with broadcast emit
• Thinking missing types cause runtime error
• Assuming decorator spelling is wrong

5. You want to build a live sports score update feature using NestJS WebSockets. Which approach best ensures all connected clients receive updates instantly and efficiently?

hard

A. Use client-side timers to simulate score changes without server communication

B. Send HTTP requests every 5 seconds from clients to fetch latest scores

C. Store scores in a database and let clients query on page load only

D. Use a WebSocket gateway with this.server.emit to broadcast score updates to all clients

Solution

1. Step 1: Identify real-time update requirement

   Live sports scores need instant updates pushed to all clients without delay.

2. Step 2: Choose efficient communication method

   Using WebSocket gateway with this.server.emit broadcasts updates instantly to all connected clients efficiently.

3. Final Answer:

   Use a WebSocket gateway with this.server.emit to broadcast score updates to all clients -> Option D

4. Quick Check:

   Broadcast via WebSocket = instant updates [OK]

Hint: Broadcast with this.server.emit for instant updates [OK]

Common Mistakes:

• Using periodic HTTP polling instead of WebSockets
• Relying on client-only timers without server data
• Fetching data only on page load, missing live updates