WebSocket gateway creation in NestJS - Cheat Sheet & Quick Revision

Recall & Review

beginner

What is a WebSocket Gateway in NestJS?

A WebSocket Gateway in NestJS is a special class that handles WebSocket connections, allowing real-time communication between the server and clients.

beginner

Which decorator is used to create a WebSocket Gateway in NestJS?

The @WebSocketGateway() decorator is used to mark a class as a WebSocket Gateway in NestJS.

beginner

How do you listen for a specific WebSocket event in a NestJS Gateway?

Use the @SubscribeMessage('eventName') decorator on a method inside the Gateway class to listen for that event.

intermediate

What method signature should a message handler have in a NestJS WebSocket Gateway?

A message handler method should accept two parameters: the client socket and the data sent by the client, e.g., handleMessage(client: Socket, payload: any).

beginner

How can you send a message back to the client from a WebSocket Gateway in NestJS?

You can use the client.emit('eventName', data) method to send a message back to the connected client.

Which decorator marks a class as a WebSocket Gateway in NestJS?

A @Controller()

B @WebSocketGateway()

C @Injectable()

D @Module()

The @WebSocketGateway() decorator is specifically used to create WebSocket Gateways.

How do you listen for a WebSocket event named 'chat' in a NestJS Gateway?

A Use @SubscribeMessage('chat') on a method

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

C Use @Listen('chat') on a method

D Use @WebSocketEvent('chat') on a method

The @SubscribeMessage('eventName') decorator listens for WebSocket events.

What parameters does a WebSocket message handler method usually receive?

A only client socket

B request and response objects

C only payload data

D client socket and payload data

Handlers receive the client socket and the data sent by the client.

Which method sends a message back to the client in a NestJS WebSocket Gateway?

A gateway.emit()

B client.sendMessage()

C client.emit()

D gateway.send()

client.emit() sends an event with data back to the connected client.

What is the main purpose of a WebSocket Gateway in NestJS?

A To handle real-time WebSocket communication

B To serve static files

C To manage database connections

D To handle HTTP requests

WebSocket Gateways manage real-time communication using WebSockets.

Explain how to create a basic WebSocket Gateway in NestJS and listen for a message event.

Think about decorators and message handlers.

Describe how a NestJS WebSocket Gateway handles incoming messages and sends responses.

Focus on the flow of message handling.

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