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.