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.