WebSocket protocol concept in Node.js - Performance & Optimization

Performance: WebSocket protocol concept

MEDIUM IMPACT

WebSocket affects the speed and responsiveness of real-time data exchange between client and server.

Sending frequent real-time updates from server to client

Node.js

import { WebSocketServer } from 'ws';
const wss = new WebSocketServer({ port: 8080 });
wss.on('connection', ws => {
  // Persistent connection allows sending updates anytime
  setInterval(() => {
    ws.send('Update data');
  }, 1000);
});

WebSocket keeps connection open, reducing handshake overhead and enabling instant data push.

📈 Performance GainReduces network latency and CPU usage, improving INP and user experience.

Sending frequent real-time updates from server to client

Node.js

const http = require('http');
const server = http.createServer((req, res) => {
  // On each request, server sends data and closes connection
  res.writeHead(200, {'Content-Type': 'text/plain'});
  res.end('Update data');
});
server.listen(8080);

HTTP requires opening and closing a new connection for each update, causing high latency and overhead.

📉 Performance CostTriggers multiple TCP handshakes and TLS negotiations, blocking rendering and increasing INP.

Performance Comparison

Pattern	DOM Operations	Reflows	Paint Cost	Verdict
HTTP polling for updates	Multiple new DOM updates per request	Triggers reflow per update	High paint cost due to frequent changes	[X] Bad
WebSocket persistent connection	DOM updates only on new data	Minimal reflows triggered	Lower paint cost with batched updates	[OK] Good

Rendering Pipeline

WebSocket maintains a persistent TCP connection allowing continuous data flow without repeated handshakes, minimizing delays in data arrival and UI updates.

→Network

→JavaScript Execution

→Paint

⚠️ BottleneckNetwork latency during initial handshake if not reused

Core Web Vital Affected

INP

WebSocket affects the speed and responsiveness of real-time data exchange between client and server.

Optimization Tips

1Use WebSocket to maintain a persistent connection for real-time data to reduce latency.

2Avoid opening new WebSocket connections repeatedly; reuse existing ones to save handshake costs.

3Monitor WebSocket frames in DevTools Network panel to ensure efficient data flow.

Performance Quiz - 3 Questions

How does using WebSocket improve interaction responsiveness compared to HTTP polling?

A By caching all data on the client side

B By sending larger data packets less frequently

C By keeping a persistent connection and reducing handshake overhead

D By compressing data before sending

DevTools: Network

How to check: Open DevTools > Network tab, filter by WS to see WebSocket frames and connection status.

What to look for: Look for a single persistent WebSocket connection with frequent frames instead of many HTTP requests.

Practice

1. What is the main purpose of the WebSocket protocol in Node.js applications?

easy

A. To send HTTP requests from client to server

B. To create a live, two-way communication channel between client and server

C. To serve static files like HTML and CSS

D. To store data permanently on the server

Solution

1. Step 1: Understand WebSocket communication

   WebSocket allows a persistent connection where both client and server can send messages anytime.

2. Step 2: Compare with other options

   HTTP requests are one-way and short-lived, static files serving and data storage are unrelated to WebSocket's main role.

3. Final Answer:

   To create a live, two-way communication channel between client and server -> Option B

4. Quick Check:

   WebSocket = two-way live connection [OK]

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

Common Mistakes:

• Confusing WebSocket with HTTP request-response
• Thinking WebSocket serves static files
• Assuming WebSocket stores data permanently

2. Which of the following is the correct way to create a WebSocket server using the 'ws' library in Node.js?

easy

A. const ws = new WebSocket(8080);

B. const ws = WebSocket.createServer(8080);

C. const ws = new WebSocket.Server({ port: 8080 });

D. const ws = WebSocket.listen(8080);

Solution

1. Step 1: Recall 'ws' library syntax

   The 'ws' library creates a server with new WebSocket.Server and a config object with port.

2. Step 2: Check each option

   Only const ws = new WebSocket.Server({ port: 8080 }); uses correct constructor and port option. Others use invalid methods or constructors.

3. Final Answer:

   const ws = new WebSocket.Server({ port: 8080 }); -> Option C

4. Quick Check:

   WebSocket.Server + port config = correct [OK]

Hint: Use new WebSocket.Server({ port }) to create server [OK]

Common Mistakes:

• Using WebSocket constructor instead of WebSocket.Server
• Calling non-existent methods like createServer or listen
• Passing port as a direct argument instead of in an object

3. Given this Node.js WebSocket server code snippet, what will be logged when a client sends the message 'hello'?

const WebSocket = require('ws');
const wss = new WebSocket.Server({ port: 8080 });
wss.on('connection', ws => {
  ws.on('message', message => {
    console.log(`Received: ${message}`);
    ws.send('pong');
  });
});

medium

A. Received: hello

B. pong

C. Received: pong

D. hello

Solution

1. Step 1: Analyze message event handler

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

2. Step 2: Identify logged output

   Client sends 'hello', so console logs 'Received: hello'. The server sends back 'pong' but that is not logged.

3. Final Answer:

   Received: hello -> Option A

4. Quick Check:

   Server logs received message text [OK]

Hint: Server logs 'Received: message' on message event [OK]

Common Mistakes:

• Confusing sent message with logged message
• Thinking server logs the reply it sends
• Mixing up client and server console outputs

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

const WebSocket = require('ws');
const wss = new WebSocket.Server({ port: 8080 });
wss.on('connection', ws => {
  ws.on('message', (msg) => {
    ws.send(msg.toUpperCase);
  });
});

medium

A. The port number must be a string, not a number

B. WebSocket.Server should be WebSocket.createServer

C. The 'message' event handler should be 'onMessage'

D. msg.toUpperCase should be called as a function: msg.toUpperCase()

Solution

1. Step 1: Check usage of toUpperCase

   toUpperCase is a function and must be called with parentheses to get the uppercase string.

2. Step 2: Verify other parts

   WebSocket.Server is correct, 'message' event is correct, port can be a number.

3. Final Answer:

   msg.toUpperCase should be called as a function: msg.toUpperCase() -> Option D

4. Quick Check:

   Call string methods with () [OK]

Hint: String methods need () to execute, not just reference [OK]

Common Mistakes:

• Forgetting parentheses on string methods
• Using wrong event names like 'onMessage'
• Confusing WebSocket server creation syntax

5. You want to build a Node.js WebSocket server that broadcasts any message received from one client to all connected clients except the sender. Which code snippet correctly implements this behavior?

hard

A. wss.on('connection', ws => {
ws.on('message', message => {
wss.clients.forEach(client => {
if (client !== ws && client.readyState === WebSocket.OPEN) {
client.send(message);
}
});
});
});

B. wss.on('connection', ws => {
ws.on('message', message => {
ws.send(message);
});
});

C. wss.on('connection', ws => {
ws.on('message', message => {
wss.send(message);
});
});

D. wss.on('message', message => {
wss.clients.forEach(client => client.send(message));
});

Solution

1. Step 1: Understand broadcasting logic

   Broadcast means sending message to all clients except the sender, checking if client connection is open.

2. Step 2: Analyze each option

   wss.on('connection', ws => { ws.on('message', message => { wss.clients.forEach(client => { if (client !== ws && client.readyState === WebSocket.OPEN) { client.send(message); } }); }); }); loops over all clients, skips sender, checks readyState, and sends message correctly. Others either send only to sender, call invalid methods, or listen on wrong event.

3. Final Answer:

   Option A code snippet correctly broadcasts to all except sender -> Option A

4. Quick Check:

   Broadcast = send to all except sender with readyState check [OK]

Hint: Use wss.clients.forEach and skip sender to broadcast [OK]

Common Mistakes:

• Sending message only back to sender
• Calling send on wss object instead of clients
• Not checking client.readyState before sending