Server-Sent Events alternative in Node.js - Step-by-Step Execution

Concept Flow - Server-Sent Events alternative

Client connects to server

↓

Server upgrades connection to WebSocket

↓

Bidirectional communication established

↓

Server sends messages anytime

↓

Client receives and processes messages

↓

Client can also send messages to server

↓

Connection stays open until closed by either side

This flow shows how a WebSocket connection replaces Server-Sent Events by enabling two-way, continuous communication between client and server.

Execution Sample

Node.js

import WebSocket from 'ws';

const wss = new WebSocket.Server({ port: 8080 });

wss.on('connection', ws => {
  ws.send('Hello Client!');
});

This code creates a WebSocket server that sends a greeting message to each client when they connect.

Execution Table

Step	Event	Server Action	Client Action	Message Sent	Connection State
1	Client connects	Accept connection, upgrade to WebSocket	Open WebSocket connection	None	Open
2	Connection established	Send 'Hello Client!'	Receive 'Hello Client!'	'Hello Client!'	Open
3	Server sends message	Send message anytime	Receive message	Message content	Open
4	Client sends message	Receive message	Send message	Message content	Open
5	Connection closed	Close connection	Close connection	None	Closed

💡 Connection closes when either client or server decides to close it.

Variable Tracker

Variable	Start	After Step 1	After Step 2	After Step 3	After Step 4	Final
connectionState	Closed	Open	Open	Open	Open	Closed
lastMessageSent	None	None	'Hello Client!'	Message content	Message content	None

Key Moments - 2 Insights

Why does the server send a message only after the connection is established?

Because the WebSocket connection must be open before messages can be sent, as shown in execution_table step 2 where the connection state changes to Open before sending 'Hello Client!'.

Can the client send messages to the server in this alternative?

Yes, unlike Server-Sent Events, WebSocket allows two-way communication, shown in execution_table step 4 where the client sends messages and the server receives them.

Visual Quiz - 3 Questions

Look at the execution table, what is the connection state after step 3?

A Connecting

B Closed

C Open

D Unknown

💡 Hint

Check the 'Connection State' column at step 3 in the execution_table.

At which step does the server send the first message to the client?

A Step 2

B Step 1

C Step 3

D Step 4

💡 Hint

Look at the 'Message Sent' column to find when 'Hello Client!' is sent.

If the client never sends a message, which step will not occur?

A Step 3

B Step 4

C Step 5

D Step 2

💡 Hint

Step 4 involves client sending a message, check execution_table rows.

Concept Snapshot

WebSocket is a Server-Sent Events alternative.
It creates a persistent, bidirectional connection.
Server and client can send messages anytime.
Connection stays open until closed by either side.
Use WebSocket.Server in Node.js to implement.

Full Transcript

This visual execution shows how WebSocket works as an alternative to Server-Sent Events in Node.js. First, the client connects and the server upgrades the connection to WebSocket. Then, the server sends a greeting message. Both client and server can send messages anytime while the connection is open. Finally, the connection closes when either side decides. Variables like connectionState and lastMessageSent track the connection status and messages sent. Key points include that messages can only be sent after the connection is open and that WebSocket supports two-way communication unlike Server-Sent Events.