WebSocket server and client in Deno - Performance & Optimization

Performance: WebSocket server and client

MEDIUM IMPACT

This concept affects the real-time communication speed and responsiveness between client and server, impacting interaction latency and network efficiency.

Implementing real-time updates between client and server

Deno

import { serve } from "https://deno.land/std/http/server.ts";

serve(async (req) => {
  if (req.headers.get("upgrade") !== "websocket") {
    return new Response("Expected websocket", { status: 400 });
  }
  const { socket, response } = Deno.upgradeWebSocket(req);
  socket.onmessage = async (e) => {
    // Use async non-blocking processing
    await new Promise((r) => setTimeout(r, 0));
    socket.send(`Echo: ${e.data}`);
  };
  return response;
});

Using async non-blocking code keeps event loop free to handle other messages and tasks, improving responsiveness.

📈 Performance GainNon-blocking message handling improves INP and overall responsiveness

Implementing real-time updates between client and server

Deno

import { serve } from "https://deno.land/std/http/server.ts";

serve(async (req) => {
  if (req.headers.get("upgrade") !== "websocket") {
    return new Response("Expected websocket", { status: 400 });
  }
  // Accept websocket but handle messages inefficiently
  const { socket, response } = Deno.upgradeWebSocket(req);
  socket.onmessage = (e) => {
    // Process message with blocking synchronous code
    for (let i = 0; i < 1e7; i++) {} // heavy loop blocks event loop
    socket.send(`Echo: ${e.data}`);
  };
  return response;
});

Blocking synchronous code inside message handler delays processing other messages and blocks the event loop, causing poor responsiveness.

📉 Performance CostBlocks event loop causing delayed INP and slower message handling

Performance Comparison

Pattern	DOM Operations	Reflows	Paint Cost	Verdict
Blocking synchronous message handler	Minimal	0	Low	[X] Bad
Async non-blocking message handler	Minimal	0	Low	[OK] Good
Sending large data immediately	Minimal	0	Low	[X] Bad
Sending large data in chunks asynchronously	Minimal	0	Low	[OK] Good

Rendering Pipeline

WebSocket communication bypasses traditional HTTP request-response cycles, maintaining an open connection that allows instant data exchange. This reduces the need for repeated DOM updates triggered by full page reloads or heavy polling.

→Network

→JavaScript Execution

→Rendering

⚠️ BottleneckJavaScript Execution when handling messages synchronously

Core Web Vital Affected

INP

This concept affects the real-time communication speed and responsiveness between client and server, impacting interaction latency and network efficiency.

Optimization Tips

1Use asynchronous message handlers to keep the event loop free.

2Avoid sending very large messages in one go; chunk data instead.

3Keep WebSocket connections open to reduce handshake overhead and improve interaction speed.

Performance Quiz - 3 Questions

What is the main performance benefit of using WebSockets over repeated HTTP requests for real-time data?

A Blocks the UI less by using synchronous code

B Automatically compresses all data sent

C Maintains a persistent connection reducing handshake overhead

D Reduces the number of DOM nodes created

DevTools: Performance

How to check: Record a session while interacting with the WebSocket app. Look for long tasks or blocked event loop in the flame chart during message handling.

What to look for: Long blocking tasks indicate synchronous code slowing responsiveness; short, frequent tasks show good async handling.

Practice

1. What is the main purpose of using WebSocket in a Deno application?

easy

A. To keep a live connection open for instant two-way communication

B. To send emails from the server

C. To serve static HTML files

D. To run background tasks without user interaction

Solution

1. Step 1: Understand WebSocket functionality

   WebSocket allows a continuous open connection between client and server for real-time data exchange.

2. Step 2: Compare with other options

   Sending emails, serving static files, or running background tasks are unrelated to WebSocket's purpose.

3. Final Answer:

   To keep a live connection open for instant two-way communication -> Option A

4. Quick Check:

   WebSocket = live two-way connection [OK]

Hint: WebSocket means live chat-like connection [OK]

Common Mistakes:

• Confusing WebSocket with HTTP request-response
• Thinking WebSocket sends emails
• Assuming WebSocket serves files

2. Which of the following is the correct way to upgrade an HTTP request to a WebSocket connection in Deno?

easy

A. const { socket, response } = WebSocket.upgrade(request);

B. const socket = new WebSocket(request);

C. const ws = new WebSocketServer(request);

D. const { socket, response } = Deno.upgradeWebSocket(request);

Solution

1. Step 1: Recall Deno WebSocket upgrade syntax

   Deno uses Deno.upgradeWebSocket(request) to upgrade HTTP requests to WebSocket connections.

2. Step 2: Check other options for correctness

   Options B, C, and D use incorrect constructors or methods not available in Deno's standard library.

3. Final Answer:

   const { socket, response } = Deno.upgradeWebSocket(request); -> Option D

4. Quick Check:

   Deno.upgradeWebSocket() = correct upgrade method [OK]

Hint: Use Deno.upgradeWebSocket() to upgrade requests [OK]

Common Mistakes:

• Using new WebSocket() on server side
• Calling non-existent WebSocketServer constructor
• Mixing client WebSocket API with server upgrade

3. Given this Deno WebSocket server snippet, what will the server send back when a client sends 'hello'?

const { socket, response } = Deno.upgradeWebSocket(request);
socket.onmessage = (e) => {
  socket.send(`Received: ${e.data}`);
};

medium

A. "hello"

B. "e.data"

C. "Received: hello"

D. No response sent

Solution

1. Step 1: Analyze the onmessage handler

   When a message arrives, the server sends back a string with 'Received: ' plus the message content.

2. Step 2: Substitute the client message

   Client sends 'hello', so server sends 'Received: hello'.

3. Final Answer:

   "Received: hello" -> Option C

4. Quick Check:

   Server echoes with prefix 'Received:' [OK]

Hint: Server sends back 'Received: ' plus client message [OK]

Common Mistakes:

• Thinking server echoes raw message without prefix
• Confusing e.data as string literal
• Assuming no response is sent

4. What is wrong with this Deno WebSocket server code?

const { socket, response } = Deno.upgradeWebSocket(request);
socket.onmessage = (e) => {
  socket.send(e.data.toUpperCase());
};
return response;

medium

A. No error, code is correct

B. Not returning the response object

C. Missing await before Deno.upgradeWebSocket

D. Not handling socket.onopen event

Solution

1. Step 1: Check upgradeWebSocket usage

   Deno.upgradeWebSocket is synchronous and returns socket and response correctly.

2. Step 2: Verify response return and event handling

   The response is returned properly, and onopen event is optional, not required.

3. Final Answer:

   No error, code is correct -> Option A

4. Quick Check:

   Code follows correct WebSocket server pattern [OK]

Hint: upgradeWebSocket is synchronous; return response is required [OK]

Common Mistakes:

• Adding unnecessary await to upgradeWebSocket
• Forgetting to return response
• Thinking onopen event is mandatory

5. You want to build a Deno WebSocket server that broadcasts any received message to all connected clients. Which approach correctly manages multiple clients?

hard

A. Use a single socket variable and overwrite it on each connection

B. Store all sockets in an array and loop to send messages to each socket

C. Create a new WebSocket server for each client connection

D. Send messages only to the last connected client

Solution

1. Step 1: Understand broadcasting concept

   Broadcasting means sending a message to all connected clients, so all sockets must be stored.

2. Step 2: Evaluate options for managing clients

   Store all sockets in an array and loop to send messages to each socket stores sockets in an array and loops to send messages, which is correct. Options A, B, and D do not support broadcasting properly.

3. Final Answer:

   Store all sockets in an array and loop to send messages to each socket -> Option B

4. Quick Check:

   Broadcast = send to all sockets stored [OK]

Hint: Keep all sockets in a list to broadcast messages [OK]

Common Mistakes:

• Overwriting socket variable losing previous clients
• Creating multiple servers instead of one
• Sending messages only to one client