WebSocket gateway creation in NestJS - Performance & Optimization

Performance: WebSocket gateway creation

MEDIUM IMPACT

This affects the real-time communication speed and responsiveness between client and server.

Setting up a WebSocket gateway for real-time messaging

NestJS

import { WebSocketGateway, SubscribeMessage, MessageBody } from '@nestjs/websockets';

@WebSocketGateway()
export class ChatGateway {
  @SubscribeMessage('message')
  async handleMessage(client: any, payload: any): Promise<void> {
    // offload heavy work asynchronously
    await someAsyncProcessing(payload);
    client.emit('message', payload);
  }
}

async function someAsyncProcessing(data: any) {
  return new Promise(resolve => setTimeout(resolve, 0));
}

Offloading heavy work asynchronously prevents blocking, keeping the event loop free for other tasks.

📈 Performance GainImproves INP by avoiding event loop blocking

Setting up a WebSocket gateway for real-time messaging

NestJS

import { WebSocketGateway, SubscribeMessage, MessageBody } from '@nestjs/websockets';

@WebSocketGateway()
export class ChatGateway {
  @SubscribeMessage('message')
  handleMessage(client: any, payload: any): void {
    // heavy synchronous processing
    for (let i = 0; i < 1000000000; i++) {}
    client.emit('message', payload);
  }
}

Heavy synchronous processing blocks the event loop, delaying message handling and response.

📉 Performance CostBlocks event loop causing high input latency and poor INP

Performance Comparison

Pattern	DOM Operations	Reflows	Paint Cost	Verdict
Synchronous heavy processing in gateway	0	0	0	[X] Bad
Asynchronous non-blocking message handling	0	0	0	[OK] Good

Rendering Pipeline

WebSocket gateway creation impacts the interaction responsiveness by controlling how quickly messages are processed and sent back to clients.

→Event Loop

→Network I/O

→JavaScript Execution

⚠️ BottleneckBlocking synchronous code in message handlers

Core Web Vital Affected

INP

This affects the real-time communication speed and responsiveness between client and server.

Optimization Tips

1Avoid heavy synchronous processing in WebSocket message handlers.

2Use asynchronous code to keep the event loop free.

3Monitor event loop blocking to maintain low input latency.

Performance Quiz - 3 Questions

What is the main performance risk when handling WebSocket messages with heavy synchronous code?

A Adding large bundle size

B Blocking the event loop and increasing input latency

C Increasing DOM reflows

D Causing layout shifts

DevTools: Performance

How to check: Record a performance profile while sending WebSocket messages and look for long tasks blocking the main thread.

What to look for: Look for long tasks or event loop blocking that delay message handling and increase input latency.

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