WebSocket guards and pipes in NestJS - Interactive Code Practice

Practice - 5 Tasks

1fill in blank

easy

Complete the code to apply a guard to a WebSocket gateway method.

NestJS

import { UseGuards } from '@nestjs/common';
import { WebSocketGateway, SubscribeMessage } from '@nestjs/websockets';
import { AuthGuard } from './auth.guard';

@WebSocketGateway()
export class ChatGateway {
  @[1](AuthGuard)
  @SubscribeMessage('message')
  handleMessage(client: any, payload: any) {
    return payload;
  }
}

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

AUsePipes

BUseFilters

CUseGuards

DUseInterceptors

Attempts:

3 left

💡 Hint

Common Mistakes

Using @UsePipes instead of @UseGuards

Forgetting to import the correct decorator

Applying the decorator to the class instead of the method

The @UseGuards decorator is used to apply guards to WebSocket gateway methods in NestJS.

2fill in blank

medium

Complete the code to create a simple WebSocket pipe that transforms incoming data.

NestJS

import { PipeTransform, Injectable } from '@nestjs/common';

@Injectable()
export class [1] implements PipeTransform {
  transform(value: any) {
    return value.toUpperCase();
  }
}

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

AUppercasePipe

BValidationPipe

CAuthGuard

DLoggingPipe

Attempts:

3 left

💡 Hint

Common Mistakes

Naming the pipe 'AuthGuard' which is for guards

Using 'ValidationPipe' which is a built-in pipe for validation

Not adding 'Pipe' suffix to the class name

The pipe class name should describe its function. Here, UppercasePipe fits because it transforms input to uppercase.

3fill in blank

hard

Fix the error in applying a guard to a WebSocket gateway method.

NestJS

import { UseGuards } from '@nestjs/common';
import { WebSocketGateway, SubscribeMessage } from '@nestjs/websockets';
import { AuthGuard } from './auth.guard';

@WebSocketGateway()
export class NotificationGateway {
  @UseGuards([1])
  @SubscribeMessage('notify')
  handleNotify(client: any, payload: any) {
    return payload;
  }
}

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

AAuthGuard()

BauthGuard

Cnew AuthGuard()

DAuthGuard

Attempts:

3 left

💡 Hint

Common Mistakes

Using parentheses like a function call

Creating a new instance manually

Using a lowercase variable name instead of the class

The @UseGuards decorator expects the guard class, not an instance or a call.

4fill in blank

hard

Fill both blanks to apply a pipe and a guard to a WebSocket gateway method.

NestJS

import { UseGuards, UsePipes } from '@nestjs/common';
import { WebSocketGateway, SubscribeMessage } from '@nestjs/websockets';
import { AuthGuard } from './auth.guard';
import { ValidationPipe } from './validation.pipe';

@WebSocketGateway()
export class MessageGateway {
  @[1](AuthGuard)
  @[2](ValidationPipe)
  @SubscribeMessage('send')
  handleSend(client: any, payload: any) {
    return payload;
  }
}

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

AUseGuards

BUseFilters

CUsePipes

DUseInterceptors

Attempts:

3 left

💡 Hint

Common Mistakes

Mixing up pipes and guards decorators

Using @UseFilters or @UseInterceptors incorrectly

Forgetting to import the decorators

Use @UseGuards to apply guards and @UsePipes to apply pipes on methods.

5fill in blank

hard

Fill all three blanks to create a WebSocket pipe that validates and transforms data, then apply it with a guard.

NestJS

import { PipeTransform, Injectable, ArgumentMetadata } from '@nestjs/common';
import { UseGuards, UsePipes } from '@nestjs/common';
import { WebSocketGateway, SubscribeMessage } from '@nestjs/websockets';
import { AuthGuard } from './auth.guard';

@Injectable()
export class [1] implements PipeTransform {
  transform(value: any, metadata: ArgumentMetadata) {
    if (typeof value !== 'string') {
      throw new Error('Invalid data');
    }
    return value.trim();
  }
}

@WebSocketGateway()
export class DataGateway {
  @UseGuards([2])
  @UsePipes([3])
  @SubscribeMessage('data')
  handleData(client: any, payload: any) {
    return payload;
  }
}

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

ATrimPipe

BAuthGuard

DValidationPipe

Attempts:

3 left

💡 Hint

Common Mistakes

Using the wrong class names for pipe or guard

Passing instances instead of classes to decorators

Not matching the pipe class name with the decorator argument

The pipe class is named TrimPipe and is applied with @UsePipes(TrimPipe). The guard is AuthGuard.