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.

Practice

1. What is a key difference between Server-Sent Events (SSE) and WebSockets in Node.js?

easy

A. SSE only allows server-to-client messages, while WebSockets allow two-way communication.

B. SSE supports two-way communication, but WebSockets only send data from server to client.

C. Both SSE and WebSockets only allow server-to-client communication.

D. WebSockets are slower than SSE for sending messages.

Solution

1. Step 1: Understand SSE communication direction

   Server-Sent Events send updates only from the server to the client, not the other way around.

2. Step 2: Understand WebSocket communication direction

   WebSockets allow full two-way communication between client and server, enabling interactive real-time data exchange.

3. Final Answer:

   SSE only allows server-to-client messages, while WebSockets allow two-way communication. -> Option A

4. Quick Check:

   Communication direction = A [OK]

Hint: Remember: SSE is one-way, WebSocket is two-way [OK]

Common Mistakes:

• Thinking SSE supports two-way communication
• Confusing WebSocket speed with direction
• Assuming both are identical in communication

2. Which of the following is the correct way to create a WebSocket server using the 'ws' library in Node.js?

easy

A. const ws = require('ws'); const server = new ws.Server(8080);

B. const WebSocket = require('ws'); const server = new WebSocket.Server({ port: 8080 });

C. import ws from 'ws'; const server = ws.createServer(8080);

D. const ws = require('ws'); const server = ws.createServer({ port: 8080 });

Solution

1. Step 1: Identify correct import and usage

   The 'ws' library is imported as WebSocket, and the server is created with new WebSocket.Server({ port: 8080 }).

2. Step 2: Check syntax correctness

   The other options contain syntax errors, such as incorrect constructor arguments, non-existent methods like 'createServer', or invalid import styles.

3. Final Answer:

   const WebSocket = require('ws'); const server = new WebSocket.Server({ port: 8080 }); -> Option B

4. Quick Check:

   Correct WebSocket server syntax = C [OK]

Hint: Use 'new WebSocket.Server' with correct import [OK]

Common Mistakes:

• Using wrong class name or method
• Mixing import styles incorrectly
• Calling non-existent createServer method

3. Given this Node.js WebSocket server code snippet, what will be logged when a client sends 'Hello'?

const WebSocket = require('ws');
const server = new WebSocket.Server({ port: 8080 });
server.on('connection', socket => {
  socket.on('message', message => {
    console.log(`Received: ${message}`);
    socket.send(`Echo: ${message}`);
  });
});

medium

A. Echo: Hello

B. Hello

C. Received: Hello

D. Error: message event not handled

Solution

1. Step 1: Analyze message event handler

   When the client sends 'Hello', the server logs 'Received: Hello' to the console.

2. Step 2: Understand socket.send effect

   The server sends back 'Echo: Hello' to the client, but this is not logged on the server console.

3. Final Answer:

   Received: Hello -> Option C

4. Quick Check:

   Server console logs message = B [OK]

Hint: Console logs received message, not sent echo [OK]

Common Mistakes:

• Confusing sent message with logged message
• Expecting client-side output on server console
• Ignoring event handler logic

4. Identify the error in this Node.js WebSocket server code snippet:

const WebSocket = require('ws');
const server = new WebSocket.Server({ port: 8080 });
server.on('connection', socket => {
  socket.on('message', (msg) => {
    socket.send('Received: ' + message);
  });
});

medium

A. The 'message' event handler should be synchronous.

B. The WebSocket server port is missing.

C. The 'connection' event is misspelled.

D. The variable 'message' is undefined inside the message event handler.

Solution

1. Step 1: Check variable names in event handler

   The message event handler uses parameter 'msg' but tries to send 'message', which is undefined.

2. Step 2: Confirm other code parts

   The port is correctly set, 'connection' event is spelled correctly, and async/sync is not an error here.

3. Final Answer:

   The variable 'message' is undefined inside the message event handler. -> Option D

4. Quick Check:

   Variable name mismatch = A [OK]

Hint: Match parameter names exactly inside handlers [OK]

Common Mistakes:

• Using wrong variable name inside callback
• Assuming port or event name errors
• Confusing async requirement for message handler

5. You want to replace Server-Sent Events with WebSockets in a Node.js app to allow clients to send messages back to the server. Which approach best achieves this?

hard

A. Use the 'ws' library to create a WebSocket server that listens for 'message' events from clients and broadcasts updates.

B. Use the 'http' module to send periodic SSE messages and ignore client messages.

C. Use the 'express' module to handle SSE and add a REST API for client messages.

D. Use the 'net' module to create a TCP server for SSE communication.

Solution

1. Step 1: Identify WebSocket capabilities

   WebSockets allow two-way communication, so using the 'ws' library to listen for client messages fits the requirement.

2. Step 2: Evaluate other options

   The 'net', 'http', and 'express' with REST API options do not provide true two-way real-time communication; they rely on polling, REST calls, or low-level TCP unsuitable for replacing SSE with bidirectional messaging.

3. Final Answer:

   Use the 'ws' library to create a WebSocket server that listens for 'message' events from clients and broadcasts updates. -> Option A

4. Quick Check:

   Two-way real-time communication = D [OK]

Hint: Choose WebSocket server for two-way real-time messaging [OK]

Common Mistakes:

• Using SSE for two-way communication
• Confusing HTTP REST with real-time sockets
• Using low-level TCP instead of WebSocket