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.