Why WebSockets enable real-time features in NestJS - Visual Breakdown

Concept Flow - Why WebSockets enable real-time features

Client sends HTTP request

↓

Server upgrades connection

↓

WebSocket connection established

↓

Bidirectional communication

↓

Real-time data exchange

↓

Client and Server stay connected

The client starts with an HTTP request, then the server upgrades it to a WebSocket connection, enabling continuous two-way communication for real-time updates.

Execution Sample

NestJS

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

@WebSocketGateway()
export class EventsGateway {
  @SubscribeMessage('message')
  handleMessage(@MessageBody() data: string): string {
    return `Received: ${data}`;
  }
}

This NestJS WebSocket gateway listens for 'message' events and responds immediately, enabling real-time interaction.

Execution Table

Step	Action	Data Sent	Server Response	Connection State
1	Client sends HTTP request to server	N/A	HTTP 101 Switching Protocols	Upgrading
2	Server upgrades to WebSocket	N/A	Connection established	Open
3	Client sends 'message' event with 'Hello'	Hello	N/A	Open
4	Server receives 'message' event	Hello	Processes data	Open
5	Server sends response 'Received: Hello'	N/A	Received: Hello	Open
6	Client receives response	N/A	Received: Hello	Open
7	Connection remains open for more messages	N/A	N/A	Open
8	Client or server closes connection	N/A	Connection closed	Closed

💡 Connection closes when client or server decides to end communication.

Variable Tracker

Variable	Start	After Step 3	After Step 5	Final
connectionState	Closed	Open	Open	Closed
dataSent	N/A	Hello	N/A	N/A
serverResponse	N/A	N/A	Received: Hello	N/A

Key Moments - 3 Insights

Why does the connection upgrade from HTTP to WebSocket?

Because WebSockets require a persistent connection, the server responds with HTTP 101 to switch protocols, allowing continuous two-way communication as shown in step 2 of the execution_table.

How does the server send data back to the client instantly?

Once the WebSocket connection is open (step 2), the server can push messages anytime without waiting for client requests, demonstrated in step 5 where the server sends 'Received: Hello' immediately.

Why does the connection stay open after messages are exchanged?

WebSockets keep the connection open (step 7) to allow real-time data flow both ways, unlike HTTP which closes after each request.

Visual Quiz - 3 Questions

Look at the execution_table, what is the connectionState after step 3?

A Closed

B Open

C Upgrading

D Unknown

💡 Hint

Check the 'connectionState' column in the variable_tracker after step 3.

At which step does the server send the response 'Received: Hello'?

A Step 3

B Step 2

C Step 5

D Step 6

💡 Hint

Look at the 'Server Response' column in the execution_table.

If the client never closes the connection, what happens to connectionState in the final step?

A It stays Open

B It changes to Closed

C It becomes Upgrading

D It resets to N/A

💡 Hint

Refer to the 'connectionState' variable in variable_tracker and the exit_note.

Concept Snapshot

WebSockets start with an HTTP request that upgrades to a persistent connection.
This allows two-way, real-time communication between client and server.
Unlike HTTP, the connection stays open for instant data exchange.
NestJS uses decorators like @WebSocketGateway and @SubscribeMessage to handle events.
This enables features like chat apps, live notifications, and real-time updates.

Full Transcript

WebSockets enable real-time features by upgrading a normal HTTP connection to a persistent, two-way communication channel. Initially, the client sends an HTTP request. The server responds with a status code 101 to switch protocols, establishing a WebSocket connection. This connection remains open, allowing both client and server to send messages anytime without waiting for a response. In NestJS, this is handled by WebSocket gateways and message handlers. The example code shows a server listening for 'message' events and responding immediately. The execution table traces each step: connection upgrade, message sent by client, server processing, and response sent back. Variables like connection state and data sent change accordingly. This persistent connection is why WebSockets are ideal for real-time apps like chats or live feeds. The connection only closes when either side decides to end it, keeping communication fast and continuous.

Practice

1. Why do WebSockets enable real-time features in a NestJS application?

easy

A. Because they create a persistent connection allowing instant two-way communication

B. Because they use HTTP requests to fetch data periodically

C. Because they store data locally on the client device

D. Because they only send data when the user refreshes the page

Solution

1. Step 1: Understand WebSocket connection type

   WebSockets create a persistent connection between client and server, unlike HTTP which is request-response based.

2. Step 2: Recognize real-time communication benefit

   This persistent connection allows instant two-way communication, enabling real-time data exchange without delays.

3. Final Answer:

   Because they create a persistent connection allowing instant two-way communication -> Option A

4. Quick Check:

   Persistent connection = Real-time communication [OK]

Hint: Remember: WebSockets keep connection open for instant data [OK]

Common Mistakes:

• Thinking WebSockets use periodic HTTP requests
• Confusing local storage with real-time data transfer
• Assuming data sends only on page refresh

2. Which of the following is the correct way to create a WebSocket gateway in NestJS?

easy

A. function createGateway() { return new WebSocket(); }

B. @WebSocketGateway() export class MyGateway {}

C. @GatewaySocket() class MyGateway {}

D. class MyGateway extends WebSocket {}

Solution

1. Step 1: Identify NestJS WebSocket decorator

   In NestJS, the correct decorator to create a WebSocket gateway is @WebSocketGateway().

2. Step 2: Confirm class declaration syntax

   The gateway is defined as a class exported with the decorator, matching @WebSocketGateway() export class MyGateway {}.

3. Final Answer:

   @WebSocketGateway() export class MyGateway {} -> Option B

4. Quick Check:

   Use @WebSocketGateway() for gateways [OK]

Hint: Look for @WebSocketGateway() decorator in NestJS [OK]

Common Mistakes:

• Using incorrect decorator names like @GatewaySocket
• Trying to extend WebSocket directly
• Using plain functions instead of classes

3. Given this NestJS WebSocket gateway code snippet, what will be the output when a client sends a message 'hello'?

@WebSocketGateway()
export class ChatGateway {
  @SubscribeMessage('message')
  handleMessage(client: any, payload: string): string {
    return `Received: ${payload}`;
  }
}

medium

A. The server throws an error because of missing return type

B. The server broadcasts 'hello' to all clients

C. The server sends back 'Received: hello' to the client

D. The server ignores the message and sends nothing

Solution

1. Step 1: Analyze the handleMessage method

   The method listens for 'message' events and returns a string with the payload included.

2. Step 2: Understand return behavior in NestJS WebSocket

   Returning a string sends that string back only to the client who sent the message.

3. Final Answer:

   The server sends back 'Received: hello' to the client -> Option C

4. Quick Check:

   Return string = reply to sender [OK]

Hint: Returned string replies only to sender client [OK]

Common Mistakes:

• Assuming message is broadcast to all clients
• Expecting an error due to missing explicit return type
• Thinking server ignores the message

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

@WebSocketGateway()
export class MyGateway {
  @SubscribeMessage('chat')
  handleChat(client, payload) {
    client.emit('chat', payload);
  }
}

medium

A. Using client.emit instead of this.server.emit for broadcasting

B. Missing type annotations for client and payload parameters

C. handleChat method should return a value to send response

D. The @SubscribeMessage decorator is misspelled

Solution

1. Step 1: Understand client.emit vs server.emit

   Using client.emit sends message only to that client, but this.server.emit broadcasts to all connected clients.

2. Step 2: Identify intended behavior

   Since the event is 'chat', usually the message should broadcast to all clients, so this.server.emit is correct.

3. Final Answer:

   Using client.emit instead of this.server.emit for broadcasting -> Option A

4. Quick Check:

   Broadcast needs this.server.emit, not client.emit [OK]

Hint: Broadcast uses this.server.emit, not client.emit [OK]

Common Mistakes:

• Confusing client.emit with broadcast emit
• Thinking missing types cause runtime error
• Assuming decorator spelling is wrong

5. You want to build a live sports score update feature using NestJS WebSockets. Which approach best ensures all connected clients receive updates instantly and efficiently?

hard

A. Use client-side timers to simulate score changes without server communication

B. Send HTTP requests every 5 seconds from clients to fetch latest scores

C. Store scores in a database and let clients query on page load only

D. Use a WebSocket gateway with this.server.emit to broadcast score updates to all clients

Solution

1. Step 1: Identify real-time update requirement

   Live sports scores need instant updates pushed to all clients without delay.

2. Step 2: Choose efficient communication method

   Using WebSocket gateway with this.server.emit broadcasts updates instantly to all connected clients efficiently.

3. Final Answer:

   Use a WebSocket gateway with this.server.emit to broadcast score updates to all clients -> Option D

4. Quick Check:

   Broadcast via WebSocket = instant updates [OK]

Hint: Broadcast with this.server.emit for instant updates [OK]

Common Mistakes:

• Using periodic HTTP polling instead of WebSockets
• Relying on client-only timers without server data
• Fetching data only on page load, missing live updates