WebSocket gateway creation in NestJS - Interactive Code Practice

Practice - 5 Tasks

1fill in blank

easy

Complete the code to import the WebSocket gateway decorator.

NestJS

import { [1] } from '@nestjs/websockets';

Drag options to blanks, or click blank then click option'

AWebSocketGateway

BHttpGateway

CSocketGateway

DGatewaySocket

Attempts:

3 left

💡 Hint

Common Mistakes

Using incorrect decorator names like HttpGateway or SocketGateway.

Forgetting to import from '@nestjs/websockets'.

The @WebSocketGateway decorator is used to create a WebSocket gateway in NestJS.

2fill in blank

medium

Complete the code to create a basic WebSocket gateway class.

NestJS

@WebSocketGateway()
export class [1] {
}

Drag options to blanks, or click blank then click option'

AWebSocketServer

BAppGateway

CGatewayClass

DSocketServer

Attempts:

3 left

💡 Hint

Common Mistakes

Using decorator names as class names.

Using property names like WebSocketServer as class names.

The class name can be any valid name, but AppGateway is a common choice for the main gateway.

3fill in blank

hard

Fix the error in the code to correctly inject the WebSocket server instance.

NestJS

import { WebSocketGateway, [1] } from '@nestjs/websockets';
import { Server } from 'socket.io';

@WebSocketGateway()
export class AppGateway {
  @[1]()
  server: Server;
}

Drag options to blanks, or click blank then click option'

AWebSocketServer

BSocketServer

CServerSocket

DGatewayServer

Attempts:

3 left

💡 Hint

Common Mistakes

Using incorrect decorator names like SocketServer or ServerSocket.

Not importing the decorator from '@nestjs/websockets'.

The @WebSocketServer decorator injects the Socket.IO server instance into the gateway.

4fill in blank

hard

Fill both blanks to create a message handler method that listens for 'message' events.

NestJS

import { WebSocketGateway, [1], MessageBody } from '@nestjs/websockets';

@WebSocketGateway()
export class AppGateway {
  @[2]('message')
  handleMessage(@MessageBody() data: string): string {
    return data;
  }
}

Drag options to blanks, or click blank then click option'

ASubscribeMessage

BWebSocketServer

COnMessage

DMessageHandler

Attempts:

3 left

💡 Hint

Common Mistakes

Using incorrect decorators like OnMessage or MessageHandler.

Not matching the decorator name in import and usage.

The @SubscribeMessage('message') decorator marks the method as a listener for 'message' events.

5fill in blank

hard

Fill all three blanks to create a gateway that listens on port 3001 and handles 'chat' events.

NestJS

import { WebSocketGateway, [1], MessageBody } from '@nestjs/websockets';

@WebSocketGateway({ port: [2] })
export class ChatGateway {
  @[3]('chat')
  handleChat(@MessageBody() message: string): string {
    return message;
  }
}

Drag options to blanks, or click blank then click option'

ASubscribeMessage

B3001

DWebSocketServer

Attempts:

3 left

💡 Hint

Common Mistakes

Using wrong decorators for event listening.

Forgetting to specify the port number correctly.

Use @SubscribeMessage to listen for 'chat' events, and set the port to 3001 in the gateway options.

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