Server-Sent Events alternative in Node.js - Interactive Code Practice

Practice - 5 Tasks

1fill in blank

easy

Complete the code to create a WebSocket server using the 'ws' library.

Node.js

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

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

Aserver

Bhost

Cpath

Dport

Attempts:

3 left

💡 Hint

Common Mistakes

Using 'host' instead of 'port' will not start the server on the correct port.

The 'port' option specifies the port number the WebSocket server listens on.

2fill in blank

medium

Complete the code to send a message to all connected WebSocket clients.

Node.js

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

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

AWebSocket.OPEN

BWebSocket.CONNECTING

CWebSocket.CLOSED

DWebSocket.CLOSING

Attempts:

3 left

💡 Hint

Common Mistakes

Using 'CLOSED' or 'CLOSING' will cause errors because the connection is not open.

Only clients with the 'OPEN' readyState can receive messages.

3fill in blank

hard

Fix the error in the WebSocket client connection code.

Node.js

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

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

A8080

B3000

C80

D443

Attempts:

3 left

💡 Hint

Common Mistakes

Using port 80 or 443 will fail if the server is not listening there.

The server listens on port 8080, so the client must connect to that port.

4fill in blank

hard

Fill both blanks to broadcast a JSON message to all clients except the sender.

Node.js

wss.on('connection', ws => {
  ws.on('message', message => {
    wss.clients.forEach(client => {
      if (client !== ws && client.readyState === [1]) {
        client.send(JSON.[2](message));
      }
    });
  });
});

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

AWebSocket.OPEN

Bparse

Cstringify

Dclose

Attempts:

3 left

💡 Hint

Common Mistakes

Using JSON.parse to send messages will cause errors.

Clients must be open to receive messages, and messages must be stringified JSON to send.

5fill in blank

hard

Fill all three blanks to set up a WebSocket server that logs connection and message events.

Node.js

import WebSocket from 'ws';
const server = new WebSocket.Server({ [1]: 9090 });
server.on('[2]', ws => {
  console.log('Client connected');
  ws.on('[3]', message => {
    console.log('Received:', message);
  });
});

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

Aport

Bconnection

Cmessage

Dopen

Attempts:

3 left

💡 Hint

Common Mistakes

Using 'open' instead of 'connection' will not work for server events.

The server listens on port 9090, listens for 'connection' events, and listens for 'message' events on each client.

Practice

1. What is a key difference between Server-Sent Events (SSE) and WebSockets in Node.js?

easy

A. SSE only allows server-to-client messages, while WebSockets allow two-way communication.

B. SSE supports two-way communication, but WebSockets only send data from server to client.

C. Both SSE and WebSockets only allow server-to-client communication.

D. WebSockets are slower than SSE for sending messages.

Solution

1. Step 1: Understand SSE communication direction

   Server-Sent Events send updates only from the server to the client, not the other way around.

2. Step 2: Understand WebSocket communication direction

   WebSockets allow full two-way communication between client and server, enabling interactive real-time data exchange.

3. Final Answer:

   SSE only allows server-to-client messages, while WebSockets allow two-way communication. -> Option A

4. Quick Check:

   Communication direction = A [OK]

Hint: Remember: SSE is one-way, WebSocket is two-way [OK]

Common Mistakes:

• Thinking SSE supports two-way communication
• Confusing WebSocket speed with direction
• Assuming both are identical in communication

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

easy

A. const ws = require('ws'); const server = new ws.Server(8080);

B. const WebSocket = require('ws'); const server = new WebSocket.Server({ port: 8080 });

C. import ws from 'ws'; const server = ws.createServer(8080);

D. const ws = require('ws'); const server = ws.createServer({ port: 8080 });

Solution

1. Step 1: Identify correct import and usage

   The 'ws' library is imported as WebSocket, and the server is created with new WebSocket.Server({ port: 8080 }).

2. Step 2: Check syntax correctness

   The other options contain syntax errors, such as incorrect constructor arguments, non-existent methods like 'createServer', or invalid import styles.

3. Final Answer:

   const WebSocket = require('ws'); const server = new WebSocket.Server({ port: 8080 }); -> Option B

4. Quick Check:

   Correct WebSocket server syntax = C [OK]

Hint: Use 'new WebSocket.Server' with correct import [OK]

Common Mistakes:

• Using wrong class name or method
• Mixing import styles incorrectly
• Calling non-existent createServer method

3. Given this Node.js WebSocket server code snippet, what will be logged when a client sends 'Hello'?

const WebSocket = require('ws');
const server = new WebSocket.Server({ port: 8080 });
server.on('connection', socket => {
  socket.on('message', message => {
    console.log(`Received: ${message}`);
    socket.send(`Echo: ${message}`);
  });
});

medium

A. Echo: Hello

B. Hello

C. Received: Hello

D. Error: message event not handled

Solution

1. Step 1: Analyze message event handler

   When the client sends 'Hello', the server logs 'Received: Hello' to the console.

2. Step 2: Understand socket.send effect

   The server sends back 'Echo: Hello' to the client, but this is not logged on the server console.

3. Final Answer:

   Received: Hello -> Option C

4. Quick Check:

   Server console logs message = B [OK]

Hint: Console logs received message, not sent echo [OK]

Common Mistakes:

• Confusing sent message with logged message
• Expecting client-side output on server console
• Ignoring event handler logic

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

const WebSocket = require('ws');
const server = new WebSocket.Server({ port: 8080 });
server.on('connection', socket => {
  socket.on('message', (msg) => {
    socket.send('Received: ' + message);
  });
});

medium

A. The 'message' event handler should be synchronous.

B. The WebSocket server port is missing.

C. The 'connection' event is misspelled.

D. The variable 'message' is undefined inside the message event handler.

Solution

1. Step 1: Check variable names in event handler

   The message event handler uses parameter 'msg' but tries to send 'message', which is undefined.

2. Step 2: Confirm other code parts

   The port is correctly set, 'connection' event is spelled correctly, and async/sync is not an error here.

3. Final Answer:

   The variable 'message' is undefined inside the message event handler. -> Option D

4. Quick Check:

   Variable name mismatch = A [OK]

Hint: Match parameter names exactly inside handlers [OK]

Common Mistakes:

• Using wrong variable name inside callback
• Assuming port or event name errors
• Confusing async requirement for message handler

5. You want to replace Server-Sent Events with WebSockets in a Node.js app to allow clients to send messages back to the server. Which approach best achieves this?

hard

A. Use the 'ws' library to create a WebSocket server that listens for 'message' events from clients and broadcasts updates.

B. Use the 'http' module to send periodic SSE messages and ignore client messages.

C. Use the 'express' module to handle SSE and add a REST API for client messages.

D. Use the 'net' module to create a TCP server for SSE communication.

Solution

1. Step 1: Identify WebSocket capabilities

   WebSockets allow two-way communication, so using the 'ws' library to listen for client messages fits the requirement.

2. Step 2: Evaluate other options

   The 'net', 'http', and 'express' with REST API options do not provide true two-way real-time communication; they rely on polling, REST calls, or low-level TCP unsuitable for replacing SSE with bidirectional messaging.

3. Final Answer:

   Use the 'ws' library to create a WebSocket server that listens for 'message' events from clients and broadcasts updates. -> Option A

4. Quick Check:

   Two-way real-time communication = D [OK]

Hint: Choose WebSocket server for two-way real-time messaging [OK]

Common Mistakes:

• Using SSE for two-way communication
• Confusing HTTP REST with real-time sockets
• Using low-level TCP instead of WebSocket