ws library for WebSocket server in Node.js - Interactive Code Practice

Practice - 5 Tasks

1fill in blank

easy

Complete the code to import the ws library.

Node.js

const WebSocket = require('[1]');

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

Aws

Bexpress

Chttp

Dsocket.io

Attempts:

3 left

💡 Hint

Common Mistakes

Using 'express' or 'http' instead of 'ws'.

Using 'socket.io' which is a different library.

The ws library is imported using require('ws'). This allows you to create a WebSocket server.

2fill in blank

medium

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

Node.js

const wss = new WebSocket.Server({ [1]: 8080 });

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

Aurl

Bhost

Caddress

Dport

Attempts:

3 left

💡 Hint

Common Mistakes

Using 'host' or 'address' instead of 'port'.

Using 'url' which is not a valid option here.

The WebSocket.Server constructor takes an options object where 'port' specifies the port number to listen on.

3fill in blank

hard

Fix the error in the event listener to correctly handle new connections.

Node.js

wss.on('[1]', function connection(ws) {
  ws.send('Welcome!');
});

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

Amessage

Bconnection

Copen

Dconnect

Attempts:

3 left

💡 Hint

Common Mistakes

Using 'connect' or 'open' which are not valid events for the server.

Confusing 'message' event with connection event.

The 'connection' event is emitted when a new client connects to the WebSocket server.

4fill in blank

hard

Fill both blanks to send a message to all connected clients.

Node.js

wss.clients.forEach(function [1](client) {
  if (client.readyState === [2].OPEN) {
    client.send('Hello all!');
  }
});

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

AforEach

BWebSocket

Cws

Dsend

Attempts:

3 left

💡 Hint

Common Mistakes

Using 'ws' instead of 'WebSocket' for the readyState constant.

Using 'send' as the function name instead of 'forEach'.

Use 'forEach' to loop over clients. The constant 'WebSocket.OPEN' checks if the connection is open.

5fill in blank

hard

Fill all three blanks to handle incoming messages and reply back.

Node.js

wss.on('connection', function(ws) {
  ws.on('[1]', function(message) {
    console.log('Received:', message.toString());
    ws.[2]('Echo: ' + [3]);
  });
});

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

Amessage

Bsend

Dclose

Attempts:

3 left

💡 Hint

Common Mistakes

Using 'close' event instead of 'message'.

Trying to send the wrong variable or forgetting to convert message to string.

The 'message' event listens for incoming messages. Use ws.send() to reply. The received message is passed as the argument.

Practice

1. What is the main purpose of the ws library in Node.js?

easy

A. To connect to SQL databases

B. To create WebSocket servers and clients for real-time communication

C. To handle HTTP requests and routing

D. To manage file uploads in Node.js applications

Solution

1. Step 1: Understand the role of ws

   The ws library is designed specifically for WebSocket communication, enabling real-time data exchange between server and client.

2. Step 2: Compare with other options

   Options A, B, and C relate to other Node.js tasks like file uploads, HTTP routing, and database connections, which are not the focus of ws.

3. Final Answer:

   To create WebSocket servers and clients for real-time communication -> Option B

4. Quick Check:

   WebSocket library = real-time communication [OK]

Hint: Remember: ws = WebSocket server/client library [OK]

Common Mistakes:

• Confusing ws with HTTP or database libraries
• Thinking ws handles file uploads
• Assuming ws manages REST API routing

2. Which of the following is the correct way to create a WebSocket server using the ws library?

easy

A. const server = new WebSocketServer({ port: 8080 });

B. const server = new WebSocket({ port: 8080 });

C. const server = new WebSocketServer.listen(8080);

D. const server = ws.createServer(8080);

Solution

1. Step 1: Recall the correct constructor usage

   The ws library uses WebSocketServer constructor with an options object, including the port number.

2. Step 2: Check each option's syntax

   const server = new WebSocketServer({ port: 8080 }); correctly uses new WebSocketServer({ port: 8080 }). Options B, C, and D use incorrect constructors or methods not defined in ws.

3. Final Answer:

   const server = new WebSocketServer({ port: 8080 }); -> Option A

4. Quick Check:

   Correct constructor syntax = const server = new WebSocketServer({ port: 8080 }); [OK]

Hint: Use new WebSocketServer({ port }) to create server [OK]

Common Mistakes:

• Using WebSocket instead of WebSocketServer for server creation
• Calling listen() method which does not exist
• Using non-existent ws.createServer() method

3. What will the following code output when a client sends the message 'Hello' to the server?

const { WebSocketServer } = require('ws');
const wss = new WebSocketServer({ port: 8080 });
wss.on('connection', ws => {
  ws.on('message', message => {
    console.log(`Received: ${message}`);
    ws.send('Hi client');
  });
});

medium

A. Nothing happens because no connection event is handled

B. Server logs 'Hi client' and sends 'Received: Hello' back

C. Server throws an error because message event is invalid

D. Server logs 'Received: Hello' and sends 'Hi client' back

Solution

1. Step 1: Understand event handling

   The server listens for 'connection' events, then listens for 'message' events on each connection. When a message arrives, it logs the message and sends a reply.

2. Step 2: Trace the message flow

   When client sends 'Hello', server logs 'Received: Hello' and sends 'Hi client' back to client.

3. Final Answer:

   Server logs 'Received: Hello' and sends 'Hi client' back -> Option D

4. Quick Check:

   Message event logs input and replies = Server logs 'Received: Hello' and sends 'Hi client' back [OK]

Hint: Message event logs input, ws.send replies [OK]

Common Mistakes:

• Confusing message event with connection event
• Thinking server sends back the received message
• Assuming message event is invalid

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

const { WebSocketServer } = require('ws');
const wss = new WebSocketServer({ port: 3000 });
wss.on('connection', function(ws) {
  ws.on('message', function(msg) {
    ws.send(msg.toUpperCase);
  });
});

medium

A. WebSocketServer should be imported from 'websocket' package

B. The 'connection' event should be 'connect'

C. Using msg.toUpperCase without parentheses causes a runtime error

D. ws.send cannot send strings, only buffers

Solution

1. Step 1: Check method usage on message

   The code uses msg.toUpperCase without parentheses, so it passes the function itself instead of calling it.

2. Step 2: Understand the impact

   This causes a runtime error because ws.send expects a string or buffer, not a function reference.

3. Final Answer:

   Using msg.toUpperCase without parentheses causes a runtime error -> Option C

4. Quick Check:

   Method call missing () causes error = Using msg.toUpperCase without parentheses causes a runtime error [OK]

Hint: Always call string methods with () to avoid errors [OK]

Common Mistakes:

• Confusing event names 'connection' vs 'connect'
• Importing WebSocketServer from wrong package
• Thinking ws.send cannot send strings

5. You want to broadcast a message to all connected clients using the ws library. Which code snippet correctly sends 'Hello all!' to every client connected to the server?

const { WebSocketServer } = require('ws');
const wss = new WebSocketServer({ port: 8080 });

// Broadcast function here
function broadcast(message) {
  // ???
}

hard

A. wss.clients.forEach(client => { if (client.readyState === WebSocket.OPEN) client.send(message); });

B. wss.clients.map(client => client.send(message));

C. wss.broadcast(message);

D. wss.send(message);

Solution

1. Step 1: Understand how to access clients

   The wss.clients set contains all connected clients. We must iterate over it to send messages.

2. Step 2: Check client connection state before sending

   Only clients with readyState === WebSocket.OPEN can receive messages safely.

3. Step 3: Verify each option

   wss.clients.forEach(client => { if (client.readyState === WebSocket.OPEN) client.send(message); }); correctly uses forEach and checks readyState. wss.clients.map(client => client.send(message)); uses map which is not appropriate here. Options A and D use non-existent methods.

4. Final Answer:

   wss.clients.forEach(client => { if (client.readyState === WebSocket.OPEN) client.send(message); }); -> Option A

5. Quick Check:

   Broadcast = forEach + readyState check [OK]

Hint: Use forEach and check readyState before sending [OK]

Common Mistakes:

• Using map instead of forEach for side effects
• Calling non-existent broadcast or send on server
• Not checking client readyState before sending