Broadcasting messages in NestJS - Mini Project: Build & Apply

Broadcasting messages

📖 Scenario: You are building a simple NestJS application that can send a broadcast message to multiple connected clients using WebSockets.This is useful in real-time apps like chat rooms or live notifications.

🎯 Goal: Create a NestJS WebSocket gateway that can broadcast a message to all connected clients.

📋 What You'll Learn

Create a WebSocket gateway class named AppGateway

Add a method called broadcastMessage that sends a message to all clients

Use the @WebSocketServer() decorator to access the server instance

Broadcast a string message 'Hello everyone!' to all connected clients

💡 Why This Matters

🌍 Real World

Broadcasting messages is essential in real-time applications like chat apps, live notifications, and multiplayer games to keep all users updated instantly.

💼 Career

Understanding WebSocket gateways and broadcasting in NestJS is valuable for backend developers working on scalable real-time systems.

1

Create the WebSocket gateway class

Create a class called AppGateway and decorate it with @WebSocketGateway() from @nestjs/websockets. Import the decorator correctly.

NestJS

import { WebSocketGateway } from '@nestjs/websockets';

// Your code here

Hint

Use @WebSocketGateway() above the class declaration.

2

Add the WebSocket server property

Inside the AppGateway class, add a property called server decorated with @WebSocketServer() imported from @nestjs/websockets. This will hold the WebSocket server instance.

NestJS

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

@WebSocketGateway()
export class AppGateway {
  // Your code here
}

Hint

Import WebSocketServer and add @WebSocketServer() server: Server; inside the class.

3

Add the broadcastMessage method

Add a method called broadcastMessage inside AppGateway that calls this.server.emit with event name 'broadcast' and message 'Hello everyone!'.

NestJS

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

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

  // Your code here
}

Hint

Define broadcastMessage() that uses this.server.emit to send the message.

4

Call broadcastMessage in the constructor

Add a constructor to AppGateway and call this.broadcastMessage() inside it to send the broadcast message when the gateway starts.

NestJS

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

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

  broadcastMessage() {
    this.server.emit('broadcast', 'Hello everyone!');
  }

  // Your code here
}

Hint

Add a constructor() method and call this.broadcastMessage() inside it.

Practice

1. What does broadcasting messages in a NestJS WebSocket gateway do?

easy

A. Sends a message to only one client

B. Saves messages to a database

C. Sends a message to all connected clients at once

D. Blocks messages from being sent

Solution

1. Step 1: Understand broadcasting meaning

   Broadcasting means sending the same message to everyone connected.

2. Step 2: Apply to NestJS WebSocket gateway

   In NestJS, broadcasting sends messages to all clients, not just one.

3. Final Answer:

   Sends a message to all connected clients at once -> Option C

4. Quick Check:

   Broadcasting = send to all clients [OK]

Hint: Broadcast means send to everyone connected [OK]

Common Mistakes:

• Thinking broadcasting sends to one client only
• Confusing broadcasting with saving messages
• Assuming broadcasting blocks messages

2. Which is the correct way to broadcast a message named 'update' with data in a NestJS WebSocket gateway?

easy

A. this.emit.server('update', data);

B. this.server.emit('update', data);

C. server.this.emit('update', data);

D. emit.this.server('update', data);

Solution

1. Step 1: Recall NestJS WebSocket broadcast syntax

   The correct syntax is calling emit on this.server with event and data.

2. Step 2: Check each option's syntax

   Only this.server.emit('update', data); matches the correct method call: this.server.emit('update', data); others have wrong order or method names.

3. Final Answer:

   this.server.emit('update', data); -> Option B

4. Quick Check:

   Correct emit call = this.server.emit(event, data) [OK]

Hint: Use this.server.emit(event, data) to broadcast [OK]

Common Mistakes:

• Swapping order of 'this' and 'server'
• Using emit as a property instead of a method
• Incorrect method call syntax

3. Given this code inside a NestJS WebSocket gateway:

this.server.emit('notify', { message: 'Hello' });

What will happen when this line runs?

medium

A. The server logs the message but does not send it

B. Only the client who sent the last message receives the event

C. An error occurs because emit needs a callback

D. All connected clients receive the 'notify' event with the message

Solution

1. Step 1: Understand this.server.emit behavior

   This method broadcasts the event to all connected clients.

2. Step 2: Analyze the code effect

   The 'notify' event with the message object is sent to everyone connected.

3. Final Answer:

   All connected clients receive the 'notify' event with the message -> Option D

4. Quick Check:

   this.server.emit sends to all clients [OK]

Hint: Emit on server sends to all clients, not just one [OK]

Common Mistakes:

• Thinking only one client receives the event
• Assuming emit logs instead of sending
• Believing emit requires a callback

4. Identify the error in this NestJS WebSocket gateway code snippet:

this.server.emit('chat', message)

where message is undefined.

medium

A. No error; undefined message is sent as is

B. Runtime error because message must be a string

C. Syntax error due to missing semicolon

D. Emit method requires a callback function

Solution

1. Step 1: Check if undefined data causes error

   Emitting undefined data does not cause syntax or runtime errors in NestJS.

2. Step 2: Confirm emit method requirements

   Emit accepts any data type; no callback is required.

3. Final Answer:

   No error; undefined message is sent as is -> Option A

4. Quick Check:

   Emit accepts undefined data without error [OK]

Hint: Undefined data can be emitted without error [OK]

Common Mistakes:

• Assuming undefined causes runtime error
• Thinking emit needs a callback
• Confusing missing semicolon as error

5. You want to broadcast a message only to clients in a specific room named 'chat-room' in NestJS. Which code correctly does this?

hard

A. this.server.to('chat-room').emit('message', data);

B. this.server.emit('chat-room', 'message', data);

C. this.server.broadcast('chat-room').emit('message', data);

D. this.server.emit('message', data).to('chat-room');

Solution

1. Step 1: Understand broadcasting to rooms in NestJS

   To send to a specific room, use this.server.to(roomName).emit(event, data).

2. Step 2: Check each option for correct syntax

   this.server.to('chat-room').emit('message', data); uses correct chaining: to('chat-room').emit('message', data). Others misuse emit or method order.

3. Final Answer:

   this.server.to('chat-room').emit('message', data); -> Option A

4. Quick Check:

   Broadcast to room = this.server.to(room).emit(event, data) [OK]

Hint: Use this.server.to(room).emit(event, data) for room broadcast [OK]

Common Mistakes:

• Calling emit before to()
• Using broadcast() method which doesn't exist
• Passing room name as event name