WebSocket server and client in Deno - Interactive Code Practice

Practice - 5 Tasks

1fill in blank

easy

Complete the code to create a WebSocket server that listens on port 8080.

Deno

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

serve(async (req) => {
  const { socket, response } = Deno.upgradeWebSocket(req);
  socket.onopen = () => console.log("[1] connected");
  return response;
}, { port: 8080 });

Drag options to blanks, or click blank then click option'

ABrowser

BServer

CClient

DSocket

Attempts:

3 left

💡 Hint

Common Mistakes

Writing 'Server connected' instead of 'Client connected'.

Using an undefined variable in the message.

The onopen event triggers when a client connects to the WebSocket server. So, the message should say "Client connected".

2fill in blank

medium

Complete the code to send a message back to the client when a message is received.

Deno

socket.onmessage = (event) => {
  console.log("Message received:", event.data);
  socket.[1]("Echo: " + event.data);
};

Drag options to blanks, or click blank then click option'

Asend

BpostMessage

Cemit

Dwrite

Attempts:

3 left

💡 Hint

Common Mistakes

Using postMessage which is for Web Workers, not WebSocket.

Using emit which is from other libraries like Socket.IO.

The send method is used to send data back to the client over the WebSocket connection.

3fill in blank

hard

Fix the error in the client code to correctly open a WebSocket connection to ws://localhost:8080.

Deno

const socket = new WebSocket("[1]");
socket.onopen = () => console.log("Connected to server");

Drag options to blanks, or click blank then click option'

Ahttp://localhost:8080

Bws://localhost:8080

Cftp://localhost:8080

Dwss://localhost:8080

Attempts:

3 left

💡 Hint

Common Mistakes

Using http:// instead of ws://.

Using ftp:// which is unrelated.

The WebSocket URL must start with ws:// for an unencrypted connection. Using http:// or other protocols will cause errors.

4fill in blank

hard

Fill both blanks to handle WebSocket errors and close events on the client side.

Deno

socket.[1] = (event) => {
  console.error("WebSocket error:", event);
};
socket.[2] = () => {
  console.log("WebSocket connection closed");
};

Drag options to blanks, or click blank then click option'

Aonerror

Bonmessage

Conclose

Donopen

Attempts:

3 left

💡 Hint

Common Mistakes

Confusing onmessage with error or close events.

Using onopen for error handling.

onerror handles errors, and onclose handles when the connection closes.

5fill in blank

hard

Fill all three blanks to create a Deno WebSocket server that broadcasts received messages to all connected clients.

Deno

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

const clients = new Set();

serve(async (req) => {
  const { socket, response } = Deno.upgradeWebSocket(req);
  clients.add(socket);

  socket.onmessage = (event) => {
    for (const client of clients) {
      if (client !== socket && client.readyState === [1]) {
        client.[2](event.data);
      }
    }
  };

  socket.onclose = () => {
    clients.[3](socket);
  };

  return response;
}, { port: 8080 });

Drag options to blanks, or click blank then click option'

AWebSocket.OPEN

Bsend

Cdelete

Dclose

Attempts:

3 left

💡 Hint

Common Mistakes

Using close instead of delete to remove clients.

Using wrong constants for readyState check.

WebSocket.OPEN checks if the connection is open, send sends the message, and delete removes the socket from the set when closed.

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