WebSocket gateway creation in NestJS - Mini Project: Build & Apply

WebSocket Gateway Creation with NestJS

📖 Scenario: You are building a simple chat server using NestJS. The server will use WebSocket to allow real-time communication between clients.

🎯 Goal: Create a WebSocket gateway in NestJS that listens for client connections and messages, then broadcasts received messages to all connected clients.

📋 What You'll Learn

Create a WebSocket gateway class named ChatGateway

Use the @WebSocketGateway() decorator on the ChatGateway class

Add a method named handleMessage that listens for message events

Broadcast received messages to all connected clients using this.server.emit

💡 Why This Matters

🌍 Real World

Real-time chat applications, live notifications, and collaborative tools use WebSocket gateways to enable instant communication between clients and servers.

💼 Career

Understanding WebSocket gateways in NestJS is essential for backend developers building scalable real-time applications and services.

1

Create the WebSocket Gateway Class

Create a class named ChatGateway and decorate it with @WebSocketGateway() from @nestjs/websockets.

NestJS

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

// Create the ChatGateway class and add the @WebSocketGateway() decorator
// Your code here

Hint

Use @WebSocketGateway() decorator above the class declaration.

2

Add a Server Property

Inside the ChatGateway class, add a public property named server with the type any and decorate it with @WebSocketServer() from @nestjs/websockets.

NestJS

import { WebSocketServer } from '@nestjs/websockets';

@WebSocketGateway()
export class ChatGateway {
  // Add the server property with @WebSocketServer() decorator
  // Your code here
}

Hint

The @WebSocketServer() decorator injects the WebSocket server instance.

3

Add a Message Handler Method

Add a method named handleMessage inside ChatGateway that listens for message events using the @SubscribeMessage('message') decorator. The method should accept a parameter named payload of type string.

NestJS

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

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

  // Add handleMessage method with @SubscribeMessage('message') decorator
  // Your code here
}

Hint

Use @SubscribeMessage('message') above the method to listen for messages.

4

Broadcast Received Messages

Inside the handleMessage method, use this.server.emit to broadcast the received payload to all connected clients with the event name message.

NestJS

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

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

  @SubscribeMessage('message')
  handleMessage(payload: string): void {
    // Broadcast the payload to all clients
    // Your code here
  }
}

Hint

Use this.server.emit('message', payload) to send the message to all clients.

Practice

1. What is the main purpose of a WebSocket gateway in a NestJS application?

easy

A. To serve static files like images and CSS

B. To handle real-time communication between server and clients

C. To manage database connections

D. To handle HTTP request routing

Solution

1. Step 1: Understand WebSocket gateway role

   A WebSocket gateway is designed to manage real-time, two-way communication between the server and clients.

2. Step 2: Compare with other server roles

   Managing database connections, serving static files, or HTTP routing are handled by other parts of NestJS, not WebSocket gateways.

3. Final Answer:

   To handle real-time communication between server and clients -> Option B

4. Quick Check:

   WebSocket gateway = real-time communication [OK]

Hint: WebSocket gateways are for live message exchange [OK]

Common Mistakes:

• Confusing WebSocket gateway with HTTP routing
• Thinking it manages database connections
• Assuming it serves static files

2. Which decorator is used to define a WebSocket gateway class in NestJS?

easy

A. @Gateway()

B. @SocketGateway()

C. @WebSocketGateway()

D. @WebSocketServer()

Solution

1. Step 1: Identify the correct decorator for gateway class

   The official NestJS decorator to create a WebSocket gateway class is @WebSocketGateway().

2. Step 2: Differentiate from other decorators

   @WebSocketServer() is used inside the class to inject the server instance, not to define the class itself. The others are incorrect or do not exist.

3. Final Answer:

   @WebSocketGateway() -> Option C

4. Quick Check:

   Gateway class decorator = @WebSocketGateway() [OK]

Hint: Gateway class always uses @WebSocketGateway() [OK]

Common Mistakes:

• Using @WebSocketServer() to decorate the class
• Confusing with non-existent decorators
• Omitting parentheses on the decorator

3. Given this NestJS WebSocket gateway code, what will be logged when a client sends a 'message' event with payload 'Hello'?

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

@WebSocketGateway()
export class ChatGateway {
  @SubscribeMessage('message')
  handleMessage(@MessageBody() data: string): string {
    console.log('Received:', data);
    return `Echo: ${data}`;
  }
}

medium

A. Received: Hello

B. Echo: Hello

C. message event received

D. No output logged

Solution

1. Step 1: Analyze the handleMessage method

   The method logs the string 'Received:' followed by the data payload, which is 'Hello'.

2. Step 2: Understand what is returned vs logged

   The return value is 'Echo: Hello', but only the console.log outputs to the server console. The client receives the return value, but the question asks about what is logged.

3. Final Answer:

   Received: Hello -> Option A

4. Quick Check:

   Console logs 'Received: Hello' [OK]

Hint: Look for console.log to find logged output [OK]

Common Mistakes:

• Confusing returned value with logged output
• Assuming client message is logged
• Ignoring the console.log statement

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

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

@WebSocketGateway()
export class MyGateway {
  @SubscribeMessage('chat')
  onChat(data: string) {
    return `Message: ${data}`;
  }
}

medium

A. Method onChat must be async

B. Incorrect event name in @SubscribeMessage decorator

C. WebSocketGateway decorator requires a port number

D. Missing @MessageBody() decorator on the method parameter

Solution

1. Step 1: Check method parameter decorators

   In NestJS WebSocket gateways, to receive the message payload, the parameter must be decorated with @MessageBody().

2. Step 2: Verify other parts

   The event name 'chat' is valid, @WebSocketGateway() can be used without a port, and the method does not need to be async unless awaiting something.

3. Final Answer:

   Missing @MessageBody() decorator on the method parameter -> Option D

4. Quick Check:

   Parameter needs @MessageBody() [OK]

Hint: Always decorate message parameters with @MessageBody() [OK]

Common Mistakes:

• Omitting @MessageBody() on parameters
• Thinking port number is mandatory
• Assuming method must be async

5. How can you broadcast a message to all connected clients from within a NestJS WebSocket gateway?

hard

A. Use the injected server instance with this.server.emit('event', data)

B. Return the message string from the event handler method

C. Call client.send(data) on a single client only

D. Use @SubscribeMessage('broadcast') decorator on the method

Solution

1. Step 1: Understand broadcasting in NestJS gateways

   To send a message to all clients, you use the server instance injected with @WebSocketServer() and call emit on it.

2. Step 2: Differentiate from other options

   Returning a string sends a response only to the sender. Calling client.send() targets one client. The decorator @SubscribeMessage() only listens for events, it does not broadcast.

3. Final Answer:

   Use the injected server instance with this.server.emit('event', data) -> Option A

4. Quick Check:

   Broadcast = this.server.emit() [OK]

Hint: Broadcast with this.server.emit() inside gateway [OK]

Common Mistakes:

• Returning message instead of emitting
• Sending to one client only
• Misusing decorators for broadcasting