Gateway decorator in NestJS - Mini Project: Build & Apply

Using the WebSocketGateway Decorator in NestJS

📖 Scenario: You are building a simple chat server using NestJS. You want to create a WebSocket gateway that listens for client connections and messages.

🎯 Goal: Create a WebSocket gateway using the @WebSocketGateway decorator in NestJS. This gateway will handle client connections and messages.

📋 What You'll Learn

Create a class named ChatGateway

Use the @WebSocketGateway decorator on the ChatGateway class

Add a method named handleMessage that will receive messages

Use the @SubscribeMessage decorator on the handleMessage method

💡 Why This Matters

🌍 Real World

WebSocket gateways are used in real-time applications like chat apps, live notifications, and multiplayer games to handle live communication between clients and servers.

💼 Career

Understanding how to use the WebSocketGateway decorator in NestJS is essential for backend developers working on real-time features and WebSocket-based services.

1

Create the ChatGateway class with the WebSocketGateway decorator

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

NestJS

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

// Your code here

Hint

Remember to import WebSocketGateway from @nestjs/websockets and use it as a decorator above the class.

2

Add the SubscribeMessage decorator import and message handler method

Import SubscribeMessage from @nestjs/websockets and add a method named handleMessage inside ChatGateway.

NestJS

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

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

Hint

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

3

Implement the handleMessage method to return the received payload

Inside the handleMessage method, return the payload parameter.

NestJS

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

@WebSocketGateway()
export class ChatGateway {
  @SubscribeMessage('message')
  handleMessage(client: any, payload: any) {
    // Your code here
  }
}

Hint

Simply return the payload to send it back to the client.

4

Export the ChatGateway class as default export

Add export default ChatGateway; at the end of the file to export the class as default.

NestJS

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

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

// Your code here

Hint

Use export default ChatGateway; to make the class available for import elsewhere.

Practice

1.

What is the main purpose of the @WebSocketGateway() decorator in NestJS?

easy

A. To turn a class into a WebSocket gateway for real-time communication

B. To create a REST API controller

C. To define a database entity

D. To handle HTTP middleware

Solution

1. Step 1: Understand the role of @WebSocketGateway()

   This decorator marks a class as a WebSocket gateway, enabling real-time communication between server and clients.

2. Step 2: Compare with other options

   Options B, C, and D relate to REST controllers, database entities, and middleware, which are unrelated to WebSocket gateways.

3. Final Answer:

   To turn a class into a WebSocket gateway for real-time communication -> Option A

4. Quick Check:

   @WebSocketGateway() creates WebSocket gateways [OK]

Hint: Remember: Gateway decorator = real-time WebSocket server [OK]

Common Mistakes:

• Confusing WebSocketGateway with REST controllers
• Thinking it creates database entities
• Assuming it handles HTTP middleware

2.

Which of the following is the correct syntax to create a WebSocket gateway with a custom namespace /chat?

?

easy

A. @WebSocketGateway(namespace: '/chat')
export class ChatGateway {}

B. @WebSocketGateway('/chat')
export class ChatGateway {}

C. @WebSocketGateway({ namespace: '/chat' })
export class ChatGateway {}

D. @WebSocketGateway({ path: '/chat' })
export class ChatGateway {}

Solution

1. Step 1: Recall the correct options object syntax

   The @WebSocketGateway() decorator accepts an options object where namespace is a valid key to set the namespace.

2. Step 2: Evaluate each option

   @WebSocketGateway({ namespace: '/chat' }) export class ChatGateway {} correctly uses { namespace: '/chat' }. @WebSocketGateway('/chat') export class ChatGateway {} incorrectly passes a string directly. @WebSocketGateway(namespace: '/chat') export class ChatGateway {} uses invalid syntax. @WebSocketGateway({ path: '/chat' }) export class ChatGateway {} uses path which is not the correct key for namespace.

3. Final Answer:

   @WebSocketGateway({ namespace: '/chat' }) export class ChatGateway {} -> Option C

4. Quick Check:

   Use options object with namespace key [OK]

Hint: Use options object with namespace key for custom namespace [OK]

Common Mistakes:

• Passing namespace as a direct string argument
• Using invalid syntax inside decorator
• Confusing 'path' with 'namespace'

3.

Given the following code, what will be the output when a client connects?

@WebSocketGateway()
export class MyGateway {
  handleConnection(client: any) {
    console.log('Client connected');
  }
}

medium

A. Nothing happens because handleConnection is not called automatically

B. The server crashes due to missing WebSocket server initialization

C. An error occurs because handleConnection is missing a decorator

D. The message 'Client connected' is logged to the console when a client connects

Solution

1. Step 1: Understand handleConnection behavior

   In NestJS WebSocket gateways, handleConnection is a lifecycle method called automatically when a client connects.

2. Step 2: Analyze the code output

   The method logs 'Client connected' to the console, so this message appears on each client connection.

3. Final Answer:

   The message 'Client connected' is logged to the console when a client connects -> Option D

4. Quick Check:

   handleConnection logs message on client connect [OK]

Hint: handleConnection runs automatically on client connect [OK]

Common Mistakes:

• Thinking handleConnection needs a decorator
• Assuming no output without explicit event listener
• Believing server crashes without manual init

4.

Identify the error in this WebSocket gateway code:

@WebSocketGateway()
export class AppGateway {
  @SubscribeMessage('message')
  handleMessage(client, payload) {
    client.emit('message', payload);
  }
}

medium

A. The client object does not have an emit method; it should use client.send

B. The method handleMessage should return the payload instead of emitting

C. The @SubscribeMessage decorator is missing parentheses

D. The method handleMessage must be async

Solution

1. Step 1: Understand @SubscribeMessage handler behavior

   In NestJS, message handlers should return the response payload, not emit directly on the client.

2. Step 2: Analyze the code's client.emit usage

   Calling client.emit is incorrect; the framework handles sending the return value automatically.

3. Final Answer:

   The method handleMessage should return the payload instead of emitting -> Option B

4. Quick Check:

   Return payload in handler, don't emit manually [OK]

Hint: Return data in handler; don't call client.emit manually [OK]

Common Mistakes:

• Calling client.emit instead of returning data
• Thinking @SubscribeMessage needs parentheses
• Assuming handler must be async always

5.

You want to create a WebSocket gateway that listens on port 8081 and uses the namespace /notifications. Which of the following is the correct way to define this gateway?

hard

A. @WebSocketGateway({ port: 8081, namespace: '/notifications' })
export class NotificationGateway {}

B. @WebSocketGateway('/notifications', 8081)
export class NotificationGateway {}

C. @WebSocketGateway({ port: 8081 })
@WebSocketGateway({ namespace: '/notifications' })
export class NotificationGateway {}

D. @WebSocketGateway(8081, { namespace: '/notifications' })
export class NotificationGateway {}

Solution

1. Step 1: Recall the correct options object usage

   The @WebSocketGateway() decorator accepts a single options object where you can specify both port and namespace.

2. Step 2: Evaluate each option

   @WebSocketGateway({ port: 8081, namespace: '/notifications' }) export class NotificationGateway {} correctly passes an object with both port and namespace. @WebSocketGateway(8081, { namespace: '/notifications' }) export class NotificationGateway {} incorrectly uses positional arguments mixing number and object. @WebSocketGateway({ port: 8081 }) @WebSocketGateway({ namespace: '/notifications' }) export class NotificationGateway {} uses two decorators which is invalid. @WebSocketGateway('/notifications', 8081) export class NotificationGateway {} uses positional arguments in wrong order and types.

3. Final Answer:

   @WebSocketGateway({ port: 8081, namespace: '/notifications' }) export class NotificationGateway {} -> Option A

4. Quick Check:

   Use single options object for port and namespace [OK]

Hint: Use one options object with port and namespace keys [OK]

Common Mistakes:

• Passing port and namespace as separate arguments
• Using multiple @WebSocketGateway decorators
• Mixing argument types and order incorrectly