WebSocket server and client in Deno - Practice Problems & Coding Challenges

Challenge - 5 Problems

❓ component_behavior

intermediate

WebSocket Server Message Broadcast Behavior

Consider a Deno WebSocket server that accepts multiple clients. When one client sends a message, the server broadcasts it to all connected clients including the sender.

What will be the output on the clients if client A sends the message 'hello'?

Deno

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

const clients = new Set();

serve(async (req) => {
  if (req.headers.get("upgrade") !== "websocket") {
    return new Response("Not a websocket request", { status: 400 });
  }
  const { socket, response } = Deno.upgradeWebSocket(req);
  clients.add(socket);

  socket.onmessage = (e) => {
    for (const client of clients) {
      client.send(e.data);
    }
  };

  socket.onclose = () => {
    clients.delete(socket);
  };

  return response;
});

A All clients including client A receive 'hello' message.

B Only client A receives 'hello' message back.

C All clients except client A receive 'hello' message.

D No clients receive any message.

💡 Hint

The server sends the received message to every connected client in the set.

The server loops through all connected clients and sends the message to each, including the sender. So client A also receives its own message.

📝 Syntax

intermediate

Correct WebSocket Client Connection Syntax in Deno

Which of the following code snippets correctly creates a WebSocket client connection to ws://localhost:8080 in Deno?

A const ws = new WebSocket('http://localhost:8080');

B const ws = new WebSocket('wss://localhost:8080');

C const ws = new WebSocket('ftp://localhost:8080');

D const ws = new WebSocket('ws://localhost:8080');

💡 Hint

WebSocket URLs start with ws:// for unencrypted connections.

The WebSocket protocol uses ws:// for normal connections and wss:// for secure connections. Using http:// or ftp:// is invalid for WebSocket.

❓ state_output

advanced

WebSocket Client Message State After Receiving Multiple Messages

A Deno WebSocket client connects to a server and listens for messages. It stores all received messages in an array called 'messages'.

Given the code below, what is the value of 'messages' after receiving three messages: 'one', 'two', 'three'?

Deno

const messages = [];
const ws = new WebSocket('ws://localhost:8080');

ws.onmessage = (event) => {
  messages.push(event.data);
};

A ['one', 'two', 'three']

B ['three']

C []

D ['one', 'two']

💡 Hint

Each message triggers the onmessage event and appends to the array.

The onmessage handler pushes every received message data into the 'messages' array, so all three messages are stored in order.

🔧 Debug

advanced

Identify the Error in WebSocket Server Close Handling

A Deno WebSocket server tries to remove a client socket from the clients set when it closes. However, the client never gets removed.

What is the error in the following code snippet?

Deno

const clients = new Set();

socket.onclose = () => {
  clients.delete();
};

A clients is not a Set, so delete method does not exist.

B onclose event is not the right event to remove clients.

C clients.delete() is called without specifying which socket to delete.

D clients.delete() should be clients.remove().

💡 Hint

The delete method requires the item to remove as an argument.

The delete method on a Set requires the specific item to remove. Calling clients.delete() without arguments does nothing.

🧠 Conceptual

expert

WebSocket Server Handling Multiple Clients Concurrently

In a Deno WebSocket server, what is the best way to handle multiple clients sending messages at the same time to avoid race conditions when broadcasting messages?

A Use a global lock to block all clients except one at a time.

B Use a queue to serialize incoming messages and broadcast them one by one.

C Close all client connections and reopen them sequentially.

D Broadcast messages immediately without any synchronization.

💡 Hint

Think about how to keep message order consistent and avoid conflicts.

Using a queue ensures messages are processed in order and broadcasts happen one at a time, preventing race conditions.

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