ws library for WebSocket server in Node.js - Step-by-Step Execution

Concept Flow - ws library for WebSocket server

Start Node.js Server

↓

Create WebSocket Server

↓

Wait for Client Connection

↓

Client Connects?

No→Wait

Yes↓

Listen for Messages

↓

Receive Message

↓

Process & Respond

↓

Client Disconnects?

No→Listen for Messages

Yes↓

Close Connection

↓

Stop Server or Wait for New Clients

The server starts, creates a WebSocket server, waits for clients, handles messages, and manages connections.

Execution Sample

Node.js

import { WebSocketServer } from 'ws';

const wss = new WebSocketServer({ port: 8080 });

wss.on('connection', ws => {
  ws.on('message', message => {
    ws.send(`Echo: ${message}`);
  });
});

This code creates a WebSocket server on port 8080 that echoes back any message it receives from clients.

Execution Table

Step	Event	Action	Message Content	Server Response
1	Server Start	WebSocket server created on port 8080	-	-
2	Client Connects	Connection event triggered	-	-
3	Client Sends Message	Message event triggered	Hello Server	Echo: Hello Server
4	Client Sends Message	Message event triggered	How are you?	Echo: How are you?
5	Client Disconnects	Close event triggered	-	-
6	No More Clients	Server waits for new connections	-	-

💡 Execution stops when server is closed or no clients remain connected.

Variable Tracker

Variable	Start	After Client Connect	After Message 1	After Message 2	After Disconnect
wss.clients.size	0	1	1	1	0
ws.readyState	N/A	OPEN	OPEN	OPEN	CLOSED
lastMessage	N/A	N/A	"Hello Server"	"How are you?"	N/A

Key Moments - 3 Insights

Why does the server keep running even after a client disconnects?

Because the server listens for new connections continuously as shown in execution_table step 6, it does not stop when one client disconnects.

What happens if the client sends multiple messages quickly?

Each message triggers the 'message' event separately, and the server responds to each as shown in steps 3 and 4.

Why is ws.readyState 'OPEN' after connection but 'CLOSED' after disconnect?

The readyState reflects the connection status: 'OPEN' means connected and able to send/receive, 'CLOSED' means connection ended, as tracked in variable_tracker.

Visual Quiz - 3 Questions

Look at the execution_table, what is the server response when the client sends 'Hello Server'?

A Echo: Hello Server

B Hello Server

C Message received

D No response

💡 Hint

Check execution_table row 3 under 'Server Response'

At which step does the client disconnect from the server?

A Step 2

B Step 3

C Step 5

D Step 6

💡 Hint

Look for 'Client Disconnects' event in execution_table

If a new client connects after step 5, how does wss.clients.size change?

A Remains 0

B Changes to 1

C Changes to 2

D Changes to -1

💡 Hint

Refer to variable_tracker for wss.clients.size changes after client connect

Concept Snapshot

ws library creates a WebSocket server with WebSocketServer({port}).
Listen for 'connection' events to handle clients.
Use ws.on('message') to receive messages.
Respond with ws.send().
Server runs continuously, handling multiple clients.
Close connections with ws.close().

Full Transcript

This visual execution trace shows how to create a WebSocket server using the ws library in Node.js. The server starts and listens on port 8080. When a client connects, the server triggers a connection event and listens for messages from that client. Each message received triggers a message event, and the server responds by sending back an echo of the message. When the client disconnects, the server triggers a close event but continues running to accept new clients. Variables like the number of connected clients and connection state update accordingly. This step-by-step flow helps beginners see how the server handles connections and messages in real time.