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.

Practice

1. What is the main purpose of setting up a WebSocket server with Express?

easy

A. To enable real-time two-way communication between client and server

B. To serve static files like images and CSS

C. To handle database queries asynchronously

D. To render HTML templates on the server

Solution

1. Step 1: Understand WebSocket functionality

   WebSocket allows instant two-way communication between client and server, unlike HTTP which is one-way per request.

2. Step 2: Identify Express role

   Express is used to create the HTTP server, but WebSocket adds real-time messaging capability on top.

3. Final Answer:

   To enable real-time two-way communication between client and server -> Option A

4. Quick Check:

   WebSocket = real-time two-way communication [OK]

Hint: WebSocket means instant two-way chat between client and server [OK]

Common Mistakes:

• Confusing WebSocket with static file serving
• Thinking WebSocket handles database queries
• Assuming WebSocket renders HTML

2. Which code snippet correctly creates an HTTP server to use with WebSocket in Express?

easy

A. const server = http.createServer(app);

B. const server = express();

C. const server = new WebSocket.Server(app);

D. const server = express.createServer();

Solution

1. Step 1: Recognize Express app and HTTP server creation

   Express app is created by calling express(), but to use WebSocket, you need an HTTP server wrapping the app.

2. Step 2: Identify correct server creation method

   http.createServer(app) creates an HTTP server that can be shared with WebSocket.

3. Final Answer:

   const server = http.createServer(app); -> Option A

4. Quick Check:

   Use http.createServer(app) for WebSocket [OK]

Hint: Use http.createServer(app) to share server with WebSocket [OK]

Common Mistakes:

• Using express.createServer() which does not exist
• Creating WebSocket.Server with app directly
• Assigning express() to server without HTTP wrapper

3. Given this code snippet, what will be logged when a client sends the message 'Hello'?

const WebSocket = require('ws');
const http = require('http');
const express = require('express');
const app = express();
const server = http.createServer(app);
const wss = new WebSocket.Server({ server });
wss.on('connection', ws => {
  ws.on('message', message => {
    console.log(`Received: ${message}`);
  });
});
server.listen(3000);

medium

A. No output

B. message

C. Error: ws.on is not a function

D. Received: Hello

Solution

1. Step 1: Understand event listeners setup

   The server listens for 'connection' events, then for each connection listens for 'message' events.

2. Step 2: Analyze message event handler

   When a message arrives, it logs 'Received: ' plus the message content.

3. Final Answer:

   Received: Hello -> Option D

4. Quick Check:

   Message event logs 'Received: message' [OK]

Hint: Message event logs 'Received: ' plus message text [OK]

Common Mistakes:

• Expecting raw 'message' string without prefix
• Confusing event names or handlers
• Thinking ws.on is undefined

4. Identify the error in this WebSocket server setup code:

const WebSocket = require('ws');
const express = require('express');
const app = express();
const server = http.createServer();
const wss = new WebSocket.Server({ server });
server.listen(3000);

medium

A. WebSocket.Server should not receive server option

B. http module is not imported

C. express() should be passed to WebSocket.Server

D. server.listen should be called before creating WebSocket.Server

Solution

1. Step 1: Check module imports

   The code uses http.createServer() but does not import the 'http' module, causing a ReferenceError.

2. Step 2: Verify server creation and usage

   http.createServer() requires the http module; without import, server is undefined.

3. Final Answer:

   http module is not imported -> Option B

4. Quick Check:

   Missing http import causes error [OK]

Hint: Always import http before using http.createServer() [OK]

Common Mistakes:

• Forgetting to import http module
• Passing express app directly to WebSocket.Server
• Calling listen before server creation

5. You want to broadcast a message to all connected WebSocket clients when one client sends a message. Which code snippet correctly implements this inside the 'connection' event handler?

wss.on('connection', ws => {
  ws.on('message', message => {
    // Broadcast message to all clients
    ???
  });
});

hard

A. ws.clients.forEach(client => client.send(message));

B. wss.broadcast(message);

C. wss.clients.forEach(client => { if(client.readyState === WebSocket.OPEN) client.send(message); });

D. server.clients.forEach(client => client.send(message));

Solution

1. Step 1: Identify how to access all clients

   The WebSocket.Server instance 'wss' has a 'clients' set containing all connected clients.

2. Step 2: Filter clients by open connection and send message

   Only clients with readyState === WebSocket.OPEN can receive messages safely.

3. Final Answer:

   wss.clients.forEach(client => { if(client.readyState === WebSocket.OPEN) client.send(message); }); -> Option C

4. Quick Check:

   Broadcast uses wss.clients with readyState check [OK]

Hint: Use wss.clients and check readyState before sending [OK]

Common Mistakes:

• Using ws.clients which does not exist
• Calling non-existent broadcast method
• Accessing server.clients which is undefined