Server-Sent Events alternative in Node.js - Performance & Optimization

Performance: Server-Sent Events alternative

MEDIUM IMPACT

This affects how quickly and efficiently real-time data updates reach the browser, impacting interaction responsiveness and page load.

Sending real-time updates from server to client

Node.js

import { Server } from 'socket.io';
import http from 'http';
const server = http.createServer();
const io = new Server(server, { cors: { origin: '*' } });
io.on('connection', (socket) => {
  const interval = setInterval(() => {
    socket.emit('time', new Date().toISOString());
  }, 1000);
  socket.on('disconnect', () => clearInterval(interval));
});
server.listen(3000);

WebSocket keeps a single persistent connection with full-duplex communication, reducing overhead and improving scalability.

📈 Performance GainLower server resource usage under many clients; faster interaction updates; better INP.

Sending real-time updates from server to client

Node.js

const http = require('http');
http.createServer((req, res) => {
  res.writeHead(200, {
    'Content-Type': 'text/event-stream',
    'Cache-Control': 'no-cache',
    'Connection': 'keep-alive'
  });
  setInterval(() => {
    res.write(`data: ${new Date().toISOString()}\n\n`);
  }, 1000);
}).listen(3000);

SSE keeps a single HTTP connection open per client, which can cause high memory and CPU usage on the server with many clients.

📉 Performance CostHigh server memory usage and CPU load with many clients; can degrade INP under load.

Performance Comparison

Pattern	DOM Operations	Reflows	Paint Cost	Verdict
Server-Sent Events	Low per update	1 reflow per update	Moderate paint	[!] OK
WebSocket	Low per update	1 reflow per update	Moderate paint	[OK] Good

Rendering Pipeline

Real-time data arrives via network, triggers JavaScript event handlers that update the DOM, causing style recalculation, layout, and paint.

→Network

→JavaScript Execution

→Style Calculation

→Layout

→Paint

⚠️ BottleneckJavaScript Execution and Layout when many DOM updates happen rapidly

Core Web Vital Affected

INP

This affects how quickly and efficiently real-time data updates reach the browser, impacting interaction responsiveness and page load.

Optimization Tips

1Use WebSocket over SSE for better scalability with many clients.

2Avoid frequent DOM updates; batch changes to reduce layout thrashing.

3Monitor scripting and rendering times in DevTools to catch performance bottlenecks.

Performance Quiz - 3 Questions

Which real-time communication method generally uses fewer server resources for many clients?

A Server-Sent Events

B Polling every second

C WebSocket

D Long polling

DevTools: Performance

How to check: Record a session while receiving real-time updates; look for scripting and rendering times during updates.

What to look for: Lower scripting and rendering times indicate better performance; watch for long frames causing input lag.

Practice

1. What is a key difference between Server-Sent Events (SSE) and WebSockets in Node.js?

easy

A. SSE only allows server-to-client messages, while WebSockets allow two-way communication.

B. SSE supports two-way communication, but WebSockets only send data from server to client.

C. Both SSE and WebSockets only allow server-to-client communication.

D. WebSockets are slower than SSE for sending messages.

Solution

1. Step 1: Understand SSE communication direction

   Server-Sent Events send updates only from the server to the client, not the other way around.

2. Step 2: Understand WebSocket communication direction

   WebSockets allow full two-way communication between client and server, enabling interactive real-time data exchange.

3. Final Answer:

   SSE only allows server-to-client messages, while WebSockets allow two-way communication. -> Option A

4. Quick Check:

   Communication direction = A [OK]

Hint: Remember: SSE is one-way, WebSocket is two-way [OK]

Common Mistakes:

• Thinking SSE supports two-way communication
• Confusing WebSocket speed with direction
• Assuming both are identical in communication

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 = require('ws'); const server = new ws.Server(8080);

B. const WebSocket = require('ws'); const server = new WebSocket.Server({ port: 8080 });

C. import ws from 'ws'; const server = ws.createServer(8080);

D. const ws = require('ws'); const server = ws.createServer({ port: 8080 });

Solution

1. Step 1: Identify correct import and usage

   The 'ws' library is imported as WebSocket, and the server is created with new WebSocket.Server({ port: 8080 }).

2. Step 2: Check syntax correctness

   The other options contain syntax errors, such as incorrect constructor arguments, non-existent methods like 'createServer', or invalid import styles.

3. Final Answer:

   const WebSocket = require('ws'); const server = new WebSocket.Server({ port: 8080 }); -> Option B

4. Quick Check:

   Correct WebSocket server syntax = C [OK]

Hint: Use 'new WebSocket.Server' with correct import [OK]

Common Mistakes:

• Using wrong class name or method
• Mixing import styles incorrectly
• Calling non-existent createServer method

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

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

medium

A. Echo: Hello

B. Hello

C. Received: Hello

D. Error: message event not handled

Solution

1. Step 1: Analyze message event handler

   When the client sends 'Hello', the server logs 'Received: Hello' to the console.

2. Step 2: Understand socket.send effect

   The server sends back 'Echo: Hello' to the client, but this is not logged on the server console.

3. Final Answer:

   Received: Hello -> Option C

4. Quick Check:

   Server console logs message = B [OK]

Hint: Console logs received message, not sent echo [OK]

Common Mistakes:

• Confusing sent message with logged message
• Expecting client-side output on server console
• Ignoring event handler logic

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

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

medium

A. The 'message' event handler should be synchronous.

B. The WebSocket server port is missing.

C. The 'connection' event is misspelled.

D. The variable 'message' is undefined inside the message event handler.

Solution

1. Step 1: Check variable names in event handler

   The message event handler uses parameter 'msg' but tries to send 'message', which is undefined.

2. Step 2: Confirm other code parts

   The port is correctly set, 'connection' event is spelled correctly, and async/sync is not an error here.

3. Final Answer:

   The variable 'message' is undefined inside the message event handler. -> Option D

4. Quick Check:

   Variable name mismatch = A [OK]

Hint: Match parameter names exactly inside handlers [OK]

Common Mistakes:

• Using wrong variable name inside callback
• Assuming port or event name errors
• Confusing async requirement for message handler

5. You want to replace Server-Sent Events with WebSockets in a Node.js app to allow clients to send messages back to the server. Which approach best achieves this?

hard

A. Use the 'ws' library to create a WebSocket server that listens for 'message' events from clients and broadcasts updates.

B. Use the 'http' module to send periodic SSE messages and ignore client messages.

C. Use the 'express' module to handle SSE and add a REST API for client messages.

D. Use the 'net' module to create a TCP server for SSE communication.

Solution

1. Step 1: Identify WebSocket capabilities

   WebSockets allow two-way communication, so using the 'ws' library to listen for client messages fits the requirement.

2. Step 2: Evaluate other options

   The 'net', 'http', and 'express' with REST API options do not provide true two-way real-time communication; they rely on polling, REST calls, or low-level TCP unsuitable for replacing SSE with bidirectional messaging.

3. Final Answer:

   Use the 'ws' library to create a WebSocket server that listens for 'message' events from clients and broadcasts updates. -> Option A

4. Quick Check:

   Two-way real-time communication = D [OK]

Hint: Choose WebSocket server for two-way real-time messaging [OK]

Common Mistakes:

• Using SSE for two-way communication
• Confusing HTTP REST with real-time sockets
• Using low-level TCP instead of WebSocket