Server-Sent Events alternative in Node.js - Practice Problems & Coding Challenges

Challenge - 5 Problems

🧠 Conceptual

intermediate

Understanding WebSocket as an SSE Alternative

Which of the following best describes why WebSocket is often used as an alternative to Server-Sent Events (SSE) in Node.js applications?

A WebSocket allows two-way communication between client and server, unlike SSE which is one-way from server to client.

B WebSocket only supports text data, while SSE supports binary data.

C WebSocket requires less server resources because it uses HTTP/2, while SSE uses HTTP/1.1.

D WebSocket automatically retries connections without any client-side code, unlike SSE.

💡 Hint

Think about the direction of data flow and interaction between client and server.

WebSocket supports full-duplex communication, meaning both client and server can send messages independently. SSE only allows the server to push updates to the client.

❓ component_behavior

intermediate

Behavior of a WebSocket Server in Node.js

Given the following Node.js WebSocket server code snippet, what will happen when a client sends a message to the server?

Node.js

import { WebSocketServer } from 'ws';

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

wss.on('connection', ws => {
  ws.on('message', message => {
    ws.send(`Server received: ${message}`);
  });
});

A The server will broadcast the received message to all connected clients.

B The server will echo back the received message prefixed with 'Server received: ' to the same client.

C The server will close the connection after receiving the message.

D The server will ignore the message and not respond.

💡 Hint

Look at the ws.send call inside the message event handler.

The server listens for messages from a client and sends a response back only to that client with the message prefixed.

📝 Syntax

advanced

Correct WebSocket Client Connection Syntax

Which of the following Node.js client code snippets correctly establishes a WebSocket connection to ws://localhost:8080 and logs messages received from the server?

A

const ws = new WebSocket('ws://localhost:8080');
ws.on('message', function(data) { console.log(data); });

B

const ws = new WebSocket('ws://localhost:8080');
ws.addEventListener('message', event => console.log(event.data));

C

import WebSocket from 'ws';
const ws = new WebSocket('http://localhost:8080');
ws.onmessage = data => console.log(data);

D

import WebSocket from 'ws';
const ws = new WebSocket('ws://localhost:8080');
ws.on('message', data => console.log(`Received: ${data}`));

💡 Hint

Consider the correct import and event listener syntax for Node.js WebSocket client.

Option D correctly imports the WebSocket class from 'ws' and uses the 'on' method with 'message' event and a callback that logs the data.

🔧 Debug

advanced

Debugging WebSocket Server Connection Issue

A developer writes this WebSocket server code but clients cannot connect. What is the most likely cause?

Node.js

import { WebSocketServer } from 'ws';

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

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

A The server is listening on port 3000 but clients are connecting to port 8080.

B The WebSocketServer constructor requires a 'host' option to accept connections.

C The server must call wss.listen() to start listening for connections.

D The ws.send call should be inside a 'message' event handler.

💡 Hint

Check if the client connection URL matches the server port.

The server listens on port 3000 but if clients try to connect to a different port like 8080, connections will fail.

❓ state_output

expert

Output of WebSocket Server Broadcast Implementation

Consider this Node.js WebSocket server code that broadcasts messages to all clients except the sender. What will be logged on the server console after two clients connect and one sends 'Hello'?

Node.js

import { WebSocketServer } from 'ws';

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

wss.on('connection', ws => {
  console.log('Client connected');
  ws.on('message', message => {
    console.log(`Received: ${message}`);
    wss.clients.forEach(client => {
      if (client !== ws && client.readyState === 1) {
        client.send(`Broadcast: ${message}`);
      }
    });
  });
});

A

Client connected
Received: Hello
Client connected

B

Received: Hello
Client connected
Client connected

C

Client connected
Client connected
Received: Hello

D

Client connected
Client connected
Received: Broadcast: Hello

💡 Hint

Consider the order of events when clients connect and send messages.

Each client connection triggers 'Client connected' log. When a message is received, 'Received: Hello' is logged. Broadcast messages are sent to clients but not logged on server.

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