WebSocket gateway creation in NestJS - Practice Problems & Coding Challenges

Challenge - 5 Problems

❓ component_behavior

intermediate

What is the output when a client connects to this NestJS WebSocket gateway?

Consider this NestJS WebSocket gateway code. What message will the server send to the client immediately after connection?

NestJS

import { WebSocketGateway, OnGatewayConnection, WebSocketServer } from '@nestjs/websockets';
import { Server, Socket } from 'socket.io';

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

  handleConnection(client: Socket) {
    client.emit('welcome', 'Hello Client!');
  }
}

A The server throws an error because handleConnection is missing a return type.

B The client receives no message until it sends one first.

C The client receives a message 'welcome' but with an empty string.

D The client receives the message 'Hello Client!' immediately after connecting.

💡 Hint

Look at what the handleConnection method does with the client socket.

The handleConnection method is called when a client connects. It sends a 'welcome' event with the message 'Hello Client!' to that client immediately.

📝 Syntax

intermediate

Which option correctly defines a WebSocket gateway listening on port 3001?

You want to create a NestJS WebSocket gateway that listens on port 3001. Which code snippet correctly sets this up?

A

@WebSocketGateway({ port: 3001 })
export class MyGateway {}

B

@WebSocketGateway(3001)
export class MyGateway {}

C

@WebSocketGateway(port=3001)
export class MyGateway {}

D

@WebSocketGateway(port: 3001)
export class MyGateway {}

💡 Hint

Check the decorator syntax for passing options as an object.

The @WebSocketGateway decorator accepts an options object. The correct syntax is @WebSocketGateway({ port: 3001 }).

❓ lifecycle

advanced

What happens if you implement OnGatewayDisconnect but forget to handle the disconnect event?

Given this gateway code, what will be the behavior when a client disconnects?

NestJS

import { WebSocketGateway, OnGatewayDisconnect } from '@nestjs/websockets';
import { Socket } from 'socket.io';

@WebSocketGateway()
export class MyGateway implements OnGatewayDisconnect {
  handleDisconnect(client: Socket) {
    // Intentionally left blank
  }
}

A The client connection remains open because disconnect is not handled properly.

B The server throws a runtime error because handleDisconnect is empty.

C The server logs nothing and silently ignores the disconnect event.

D The server automatically reconnects the client.

💡 Hint

Think about what an empty method implementation means for event handling.

An empty handleDisconnect method means the server does nothing when a client disconnects. No errors occur, and the disconnect event is silently ignored.

🔧 Debug

advanced

Why does this WebSocket gateway fail to emit messages to all clients?

Review this gateway code. Why does calling this.server.emit('msg', 'hello') not send messages to all connected clients?

NestJS

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

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

  sendMessage() {
    this.server.emit('msg', 'hello');
  }
}

A The server property is undefined because @WebSocketServer decorator is missing parentheses.

B The server property is undefined because the gateway is not instantiated by NestJS.

C The server property is undefined because the class lacks the OnGatewayInit interface implementation.

D The server property is undefined because the @WebSocketServer decorator is not imported from the correct package.

💡 Hint

Consider how NestJS creates and manages gateway instances and their properties.

If the gateway class is not instantiated by NestJS (for example, manually created), the @WebSocketServer property will be undefined, so emit calls fail silently.

🧠 Conceptual

expert

How does NestJS WebSocket gateway handle multiple namespaces?

You want to create two WebSocket gateways in NestJS, each listening on a different namespace: '/chat' and '/news'. How should you configure the gateways to achieve this?

A Use @WebSocketGateway({ namespace: '/chat' }) on one class and @WebSocketGateway({ namespace: '/news' }) on the other.

B Use @WebSocketGateway('/chat') on one class and @WebSocketGateway('/news') on the other.

C Use @WebSocketGateway() on both classes and manually filter namespaces inside handleConnection.

D Use a single gateway with @WebSocketGateway() and handle namespaces via client-side events.

💡 Hint

Check how the namespace option is passed in the decorator options object.

NestJS supports namespaces by passing the namespace option as an object to the @WebSocketGateway decorator. This creates separate gateways for each namespace.