Setting up WebSocket server in Express - Visual Walkthrough

Concept Flow - Setting up WebSocket server

Start Express Server

↓

Create HTTP Server

↓

Attach WebSocket Server to HTTP Server

↓

Listen for WebSocket Connections

↓

On Connection: Handle Messages

↓

Send/Receive Messages

↓

Close Connection

↓

Server Running

This flow shows how an Express server is started, then a WebSocket server is attached to it to handle real-time message exchange.

Execution Sample

Express

import express from 'express';
import { createServer } from 'http';
import { WebSocketServer } from 'ws';

const app = express();
const server = createServer(app);
const wss = new WebSocketServer({ server });

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

server.listen(3000);

This code sets up an Express app, creates an HTTP server, attaches a WebSocket server, and echoes back any received messages.

Execution Table

Step	Action	Evaluation	Result
1	Import express, http, ws modules	Modules loaded	Ready to use express, createServer, WebSocketServer
2	Create express app	app = express()	Express app instance created
3	Create HTTP server with express app	server = createServer(app)	HTTP server created wrapping express
4	Create WebSocket server attached to HTTP server	wss = new WebSocketServer({ server })	WebSocket server ready to accept connections
5	Listen for 'connection' event on wss	wss.on('connection', ...)	Handler set for new WebSocket clients
6	Client connects to WebSocket server	connection event triggered	ws object created for client
7	Listen for 'message' event on ws	ws.on('message', ...)	Handler set for incoming messages
8	Client sends message 'Hello'	message event triggered	Server receives 'Hello'
9	Server sends back 'Echo: Hello'	ws.send(...) called	Client receives echo message
10	Server listens on port 3000	server.listen(3000)	Server ready to accept HTTP and WebSocket connections
11	No more steps	N/A	Execution complete, server running

💡 Server runs indefinitely, waiting for WebSocket connections and messages

Variable Tracker

Variable	Start	After Step 2	After Step 3	After Step 4	After Step 6	After Step 8	Final
app	undefined	express app instance	express app instance	express app instance	express app instance	express app instance	express app instance
server	undefined	undefined	HTTP server instance	HTTP server instance	HTTP server instance	HTTP server instance	HTTP server instance
wss	undefined	undefined	undefined	WebSocketServer instance	WebSocketServer instance	WebSocketServer instance	WebSocketServer instance
ws	undefined	undefined	undefined	undefined	WebSocket client connection object	WebSocket client connection object	WebSocket client connection object
message	undefined	undefined	undefined	undefined	undefined	'Hello'	'Hello'

Key Moments - 3 Insights

Why do we create an HTTP server with express app before attaching WebSocket server?

Because WebSocketServer needs a raw HTTP server to attach to, not just the express app. See execution_table step 3 and 4 where HTTP server is created first, then WebSocket server attaches to it.

How does the server know when a client sends a message?

The server listens for the 'message' event on the WebSocket connection object (ws). This is shown in execution_table step 7 and 8 where ws.on('message') triggers when client sends data.

What happens if we don't call server.listen()?

The server won't start listening for any HTTP or WebSocket connections, so no clients can connect. This is shown in execution_table step 10 where server.listen(3000) starts the server.

Visual Quiz - 3 Questions

Look at the execution table, what is the value of 'wss' after step 4?

A Express app instance

B undefined

C WebSocketServer instance attached to HTTP server

D HTTP server instance

💡 Hint

Check the 'wss' row in variable_tracker after step 4

At which step does the server receive a message from the client?

A Step 7

B Step 8

C Step 6

D Step 9

💡 Hint

Look at execution_table rows describing 'message event triggered' and 'Server receives'

If we skip creating the HTTP server and pass express app directly to WebSocketServer, what happens?

A Error because WebSocketServer expects an HTTP server, not express app

B WebSocket server attaches and works fine

C Express app automatically converts to HTTP server

D Server listens on default port 80

💡 Hint

Refer to key_moments about why HTTP server is needed before WebSocketServer

Concept Snapshot

1. Create express app with express().
2. Create HTTP server using createServer(app).
3. Attach WebSocketServer to HTTP server.
4. Listen for 'connection' events to handle clients.
5. On client message, respond or process.
6. Start server with server.listen(port).

WebSocketServer needs raw HTTP server, not just express app.

Full Transcript

This visual execution shows how to set up a WebSocket server using express. First, express app is created. Then an HTTP server is created wrapping the express app. Next, a WebSocketServer is attached to this HTTP server. The server listens for new WebSocket connections. When a client connects, the server listens for messages from that client. Upon receiving a message, the server sends back an echo message. Finally, the server listens on port 3000 for HTTP and WebSocket connections. Variables like app, server, wss, ws, and message change as the code runs. Key points include the need for an HTTP server before WebSocketServer, how message events trigger, and the importance of calling server.listen to start the server. The quizzes test understanding of variable states and event steps.