Setting up WebSocket server in Express - Performance Optimization Steps

Performance: Setting up WebSocket server

MEDIUM IMPACT

This affects the real-time interaction speed and responsiveness of the web page by enabling persistent, low-latency communication between client and server.

Setting up a WebSocket server for real-time communication in an Express app

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);

Uses a single HTTP server for both Express and WebSocket, avoiding port conflicts and reducing resource usage; improves connection handling efficiency.

📈 Performance GainSingle server reduces memory use; faster connection setup; avoids blocking server startup.

Setting up a WebSocket server for real-time communication in an Express app

Express

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

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

Creates two servers listening on the same port causing conflicts and inefficient resource use; also, the WebSocket server is not integrated with Express HTTP server.

📉 Performance CostBlocks server startup due to port conflict; wastes memory by running two servers; increases latency due to improper server setup.

Performance Comparison

Pattern	DOM Operations	Reflows	Paint Cost	Verdict
Separate WebSocket server on same port	0 (network only)	0	0	[X] Bad
Integrated WebSocket server with Express HTTP server	0 (network only)	0	0	[OK] Good

Rendering Pipeline

WebSocket setup affects the network layer by establishing a persistent connection, reducing repeated HTTP handshakes and enabling faster message exchange, which improves input responsiveness.

→Network

→JavaScript Execution

→Rendering

⚠️ BottleneckNetwork latency and server resource usage during connection setup

Core Web Vital Affected

INP

This affects the real-time interaction speed and responsiveness of the web page by enabling persistent, low-latency communication between client and server.

Optimization Tips

1Always use a single HTTP server instance for both Express and WebSocket to avoid port conflicts.

2Keep WebSocket message handlers lightweight to reduce JavaScript execution delays.

3Monitor WebSocket handshake and message frames in DevTools Network panel to ensure efficient connections.

Performance Quiz - 3 Questions

What is the main performance benefit of integrating WebSocket server with the Express HTTP server?

A Enables WebSocket to cache static files

B Reduces server resource usage by sharing the same port and server instance

C Allows WebSocket to use HTTP/2 automatically

D Improves CSS rendering speed

DevTools: Network

How to check: Open DevTools, go to Network tab, filter by WS (WebSocket), observe the handshake and message frames during connection and communication.

What to look for: Look for a single successful WebSocket handshake without repeated HTTP requests; check message latency and size for responsiveness.

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