Why WebSockets enable real-time features in NestJS - Test Your Understanding

Practice - 5 Tasks

1fill in blank

easy

Complete the code to import the WebSocketGateway decorator from NestJS.

NestJS

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

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

AWebSocketGateway

BHttpGateway

CSocketServer

DGateway

Attempts:

3 left

💡 Hint

Common Mistakes

Using HttpGateway instead of WebSocketGateway

Confusing SocketServer with the gateway decorator

The WebSocketGateway decorator is used to create a WebSocket gateway in NestJS, enabling real-time communication.

2fill in blank

medium

Complete the code to create a WebSocket gateway class named 'ChatGateway'.

NestJS

@WebSocketGateway()
export class [1] {}

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

AChatGateway

BSocketGateway

CMessageGateway

DRealTimeGateway

Attempts:

3 left

💡 Hint

Common Mistakes

Using generic names like MessageGateway that don't match the example

Using names unrelated to real-time features

The class name ChatGateway clearly indicates it handles chat-related WebSocket events.

3fill in blank

hard

Fix the error in the method to send a message to all connected clients.

NestJS

import { WebSocketServer } from '@nestjs/websockets';
import { Server } from 'socket.io';

@WebSocketGateway()
export class ChatGateway {
  @WebSocketServer()
  server: Server;

  broadcastMessage(message: string) {
    this.server.[1]('message', message);
  }
}

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

Asend

Bemit

Cbroadcast

DsendMessage

Attempts:

3 left

💡 Hint

Common Mistakes

Using 'send' which is not a Socket.IO server method

Using 'broadcast' which is a client-side method

The emit method sends an event with data to all connected clients in Socket.IO.

4fill in blank

hard

Fill in the blank to handle a client message event and respond back.

NestJS

@SubscribeMessage('[1]')
handleMessage(client: any, payload: string): string {
  return `Received: ${payload}`;
}

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

Aerror

Bconnect

Cmessage

Ddisconnect

Attempts:

3 left

💡 Hint

Common Mistakes

Using lifecycle events like connect or disconnect instead of message

Using error which is for error handling

The message event is the common event name for client messages in WebSocket communication.

5fill in blank

hard

Fill in the blanks to create a WebSocket gateway that logs when a client connects and disconnects.

NestJS

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

@WebSocketGateway()
export class LoggerGateway implements [1], [2] {
  handleConnection(client: any) {
    console.log('Client connected:', client.id);
  }

  handleDisconnect(client: any) {
    console.log('Client disconnected:', client.id);
  }
}

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

AOnGatewayConnection

BOnGatewayDisconnect

COnGatewayInit

DOnGatewayMessage

Attempts:

3 left

💡 Hint

Common Mistakes

Using OnGatewayInit which is for initialization, not connection events

Using OnGatewayMessage which handles messages, not connections

The interfaces OnGatewayConnection and OnGatewayDisconnect allow the gateway to respond to client connect and disconnect events.