Gateway decorator in NestJS - Cheat Sheet & Quick Revision

Recall & Review

beginner

What is the purpose of the @WebSocketGateway decorator in NestJS?

The <code>@WebSocketGateway</code> decorator marks a class as a WebSocket gateway, enabling it to handle real-time communication using WebSockets in a NestJS application.

intermediate

How do you specify the WebSocket server options using the @WebSocketGateway decorator?

You pass an options object to the @WebSocketGateway decorator, for example: @WebSocketGateway({ namespace: '/chat', transports: ['websocket'] }) to configure namespace and transport methods.

beginner

Which NestJS module must be imported to use the @WebSocketGateway decorator?

You must import <code>@WebSocketGateway</code> from <code>@nestjs/websockets</code> to use the <code>@WebSocketGateway</code> decorator in your class.

intermediate

Can a class decorated with <code>@WebSocketGateway</code> handle multiple WebSocket events? How?

Yes, by adding methods decorated with @SubscribeMessage('eventName') inside the gateway class, you can handle multiple WebSocket events.

advanced

What is the difference between @Gateway and @WebSocketGateway decorators in NestJS?

In NestJS, @WebSocketGateway is the correct decorator to create a WebSocket gateway. @Gateway is not a standard decorator; the official one is @WebSocketGateway. Sometimes @Gateway is used informally to refer to it.

Which decorator do you use to create a WebSocket gateway in NestJS?

A @WebSocketGateway

B @Gateway

C @SocketServer

D @SubscribeMessage

The correct decorator to create a WebSocket gateway is @WebSocketGateway.

How do you listen to a WebSocket event named 'message' inside a gateway class?

A Use @Listen('message') on a method

B Use @OnEvent('message') on a method

C Use @SubscribeMessage('message') on a method

D Use @WebSocketListener('message') on a method

You use @SubscribeMessage('message') to listen to WebSocket events named 'message'.

Where do you import the @WebSocketGateway decorator from?

A @nestjs/common

B @nestjs/websockets

C socket.io

D @nestjs/core

The @WebSocketGateway decorator is imported from @nestjs/websockets.

Which option can you set in the @WebSocketGateway decorator?

A namespace

B database

C template

D middleware

You can set the 'namespace' option to define the WebSocket namespace.

What does the @SocketServer decorator do inside a gateway class?

A Configures transport options

B Marks a method as an event handler

C Defines the gateway namespace

D Injects the WebSocket server instance

@SocketServer injects the WebSocket server instance to use inside the gateway.

Explain how to create a WebSocket gateway in NestJS and handle a custom event.

Think about the decorator for the class and the decorator for event methods.

Describe how to configure a WebSocket gateway namespace and access the server instance.

Focus on decorator options and property decorators inside the class.

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