Server-Sent Events alternative in Node.js - Mini Project: Build & Apply

Building a Server-Sent Events Alternative with Node.js and WebSockets

📖 Scenario: You want to create a simple real-time notification system for a website. Instead of using Server-Sent Events (SSE), you will use WebSockets, which allow two-way communication between the server and the browser.This project will guide you to build a basic Node.js server that sends messages to connected clients using WebSockets.

🎯 Goal: Build a Node.js server using the ws library that accepts WebSocket connections and sends a welcome message to each client when they connect.

📋 What You'll Learn

Create a WebSocket server using the ws library

Set up a port number variable for the server

Send a welcome message to each client when they connect

Close the connection properly when the client disconnects

💡 Why This Matters

🌍 Real World

WebSockets are widely used for real-time features like chat apps, live notifications, and gaming where the server needs to send updates instantly to the browser.

💼 Career

Understanding WebSocket servers is important for backend developers working on interactive web applications that require live data updates without refreshing the page.

1

Set up the WebSocket server

Create a constant called WebSocketServer by requiring the ws library, and create a new WebSocket server instance called wss without any options yet.

Node.js

// Your code here

Hint

Use require('ws').Server to get the WebSocketServer class.

2

Configure the server port

Create a constant called PORT and set it to 8080 to define the port number where the WebSocket server will listen.

Node.js

const WebSocketServer = require('ws').Server;
const wss = new WebSocketServer({ noServer: true });

// Your code here

Hint

Define PORT as 8080 to use a common port for WebSocket servers.

3

Send a welcome message on client connection

Add an event listener on wss for the 'connection' event with a callback that takes a ws parameter. Inside the callback, send the string 'Welcome to the WebSocket server!' to the connected client using ws.send().

Node.js

const WebSocketServer = require('ws').Server;
const wss = new WebSocketServer({ noServer: true });

const PORT = 8080;

// Your code here

Hint

Use wss.on('connection', (ws) => { ... }) and inside send the welcome message with ws.send().

4

Start the server and handle client disconnect

Create a Node.js HTTP server using require('http').createServer() and listen on PORT. Upgrade HTTP connections to WebSocket connections by listening to the 'upgrade' event on the HTTP server and calling wss.handleUpgrade(). Also, inside the 'connection' event callback, add a listener for the 'close' event on ws that logs 'Client disconnected'.

Node.js

const WebSocketServer = require('ws').Server;
const wss = new WebSocketServer({ noServer: true });

const PORT = 8080;

wss.on('connection', (ws) => {
    ws.send('Welcome to the WebSocket server!');
    // Add close event listener here
});

// Create HTTP server and listen on PORT
// Add upgrade event listener to handle WebSocket connections
// Your code here

Hint

Use http.createServer() to create the server and listen on PORT. Use server.on('upgrade', ...) to upgrade connections. Add ws.on('close', ...) inside the connection callback.

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