Setting up WebSocket server in Express - Practice Exercises

Challenge - 5 Problems

❓ component_behavior

intermediate

What does this WebSocket server code output when a client connects?

Consider this Express server setup with WebSocket. What message does the server send to the client upon connection?

Express

import express from 'express';
import { WebSocketServer } from 'ws';

const app = express();
const server = app.listen(3000);
const wss = new WebSocketServer({ server });

wss.on('connection', ws => {
  ws.send('Welcome client!');
});

A The client receives 'Welcome client!' message immediately after connecting.

B The server closes the connection immediately after client connects.

C The server throws an error because WebSocketServer is not properly initialized.

D The client receives no message until it sends one first.

💡 Hint

Look at the ws.send inside the connection event handler.

The server listens for new WebSocket connections. When a client connects, the connection event fires and the server sends the message 'Welcome client!' immediately.

📝 Syntax

intermediate

Which option correctly initializes a WebSocket server with Express?

Choose the correct way to create a WebSocket server that shares the same HTTP server as Express.

A const wss = new WebSocketServer({ server: app.listen(3000) });

B const wss = new WebSocketServer({ port: 3000 });

C const wss = new WebSocketServer({ expressApp: app });

D const wss = new WebSocketServer({ httpServer: app });

💡 Hint

The WebSocket server needs the actual HTTP server instance, not the Express app.

The WebSocketServer constructor requires the HTTP server object. Calling app.listen(3000) returns the HTTP server, which is passed as server option.

🔧 Debug

advanced

Why does this WebSocket server code cause a runtime error?

Identify the cause of the error in this code snippet:

Express

import express from 'express';
import { WebSocketServer } from 'ws';

const app = express();
const wss = new WebSocketServer({ server: app });

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

app.listen(3000);

A The WebSocketServer is missing the port number, so it cannot listen.

B The ws.send method is called before the connection is established.

C The 'connection' event is misspelled, so the handler never runs.

D The WebSocketServer is given the Express app instead of the HTTP server, causing a type error.

💡 Hint

Check what server option expects in WebSocketServer constructor.

The WebSocketServer expects an HTTP server instance, but app is an Express application, not the server. This causes a runtime error.

❓ state_output

advanced

What is the value of 'count' after 3 clients connect to this WebSocket server?

Consider this code that counts connected clients:

Express

import express from 'express';
import { WebSocketServer } from 'ws';

const app = express();
const server = app.listen(3000);
const wss = new WebSocketServer({ server });

let count = 0;

wss.on('connection', ws => {
  count++;
  ws.on('close', () => {
    count--;
  });
});

A 1

B 0

C 3

D Cannot determine without client disconnections

💡 Hint

Each new connection increments count by 1.

When 3 clients connect, the connection event fires 3 times, incrementing count to 3. No clients disconnected yet.

🧠 Conceptual

expert

Which option best explains why WebSocketServer needs the HTTP server instance from Express?

Why must the WebSocket server share the HTTP server instance created by Express?

A Because WebSocketServer only works with HTTPS servers, and Express creates them automatically.

B Because WebSocketServer upgrades HTTP connections to WebSocket using the same server, enabling both protocols on one port.

C Because WebSocketServer requires Express middleware to function properly.

D Because WebSocketServer cannot listen on any port by itself and needs Express to handle routing.

💡 Hint

Think about how WebSocket connections start as HTTP requests.

WebSocket connections begin as HTTP requests that are upgraded to WebSocket protocol. Sharing the HTTP server allows handling both HTTP and WebSocket on the same port seamlessly.