DEV Community: Simranjit singh

A Comprehensive Guide to Server-Sent Events (SSE) for Real-Time Web Applications

Simranjit singh — Sun, 22 Sep 2024 18:54:54 +0000

Server-Sent Events (SSE)

Server-Sent Events (SSE) is a standard allowing servers to push real-time updates to clients over a single, long-lived HTTP connection. Unlike WebSockets, which provide full-duplex communication, SSE is unidirectional, meaning data flows from the server to the client only. Here's a brief overview of how it works:

How SSE Works

Client Requests Updates: The client makes an HTTP request to the server, indicating it wants to receive updates.
Server Keeps Connection Open: The server keeps this connection open and sends updates as they become available.
Client Receives Updates: The client listens for incoming messages and processes them as they arrive.

(image credits- geeksforgeeks.org)

Key Features

Unidirectional: Data flows from server to client.
Automatic Reconnection: The client automatically attempts to reconnect if the connection is lost.
Event-Driven: The server can send named events, allowing the client to handle different types of messages.
Long-Lived Connection: It's a long live unidirectional communication.
Single HTTP Connection: Uses a single HTTP connection.
Connection: keep-alive: The connection is kept alive.
Event-Stream Type Data: Data is sent in the event-stream format.
Event Data Structure: The event data structure includes event | data | id, where id is needed when there is a retry connection.

Use Cases

Real-time notifications (e.g., social media updates, news feeds)
Live sports scores
Stock price updates
Monitoring dashboards

Example Implementation

Server-Side (Node.js with Express)

const express = require('express');

const app = express();

app.get('/events', (req, res) => {

    res.setHeader('Content-Type', 'text/event-stream');

    res.setHeader('Cache-Control', 'no-cache');

    res.setHeader('Connection', 'keep-alive');

// Send an initial message
res.write('data: Connected\n\n');

// Send updates every 5 seconds
const intervalId = setInterval(() =&gt; {
    res.write(`data: ${new Date().toISOString()}\n\n`);
}, 5000);

// Clean up when the client disconnects
req.on('close', () =&gt; {
    clearInterval(intervalId);
    res.end();
});



});

app.listen(3000, () => {

    console.log('Server running on http://localhost:3000');

});

Client-Side (HTML + JavaScript)

<!DOCTYPE html>

<html lang="en">

<head>

    <meta charset="UTF-8">

    <title>SSE Example</title>

</head>

<body>

    <h1>Server-Sent Events Example</h1>

    <div id="events"></div>

&lt;script&gt;
    const eventSource = new EventSource('/events');

    eventSource.onmessage = function(event) {
        const newElement = document.createElement("div");
        newElement.textContent = `New event: ${event.data}`;
        document.getElementById("events").appendChild(newElement);
    };

    eventSource.onerror = function() {
        console.error("EventSource failed.");
    };
&lt;/script&gt;



</body>

</html>

Explanation

Server-Side:
- The server sets the appropriate headers to indicate an SSE connection.
- It sends an initial message and then periodically sends updates.
- It handles client disconnection by cleaning up resources.
Client-Side:
- The client creates an EventSource object to listen for updates from the server.
- It handles incoming messages by appending them to the DOM.
- It handles errors, such as connection failures.

Challenges

Browser Compatibility: Not all browsers support SSE, which can limit its use.
Connection Limit: Browsers and servers may limit the number of open connections.
Connection Timeout: Long-lived connections can time out, requiring reconnection.
Background Tab Behavior: Browsers may throttle or suspend connections in background tabs.
Resource Utilization: Keeping many connections open can consume server resources.
Load Balancer: Load balancers need to support long-lived connections.
Sticky Connection: Ensuring the same client connects to the same server instance.
Proxy/Firewall: Proxies and firewalls may interfere with long-lived connections.
Testing: Simulating and testing long-lived connections can be challenging.
Broadcasting: Efficiently broadcasting messages to many clients can be complex.

In short, SSE is a simple and efficient way to implement real-time updates in web applications where only the server needs to push data to the client.

Understanding Short Polling: A Simple Approach to Client-Server Communication

Simranjit singh — Sun, 22 Sep 2024 16:17:03 +0000

What is a short polling?

Short polling is a technique used in client-server communication where a client repeatedly sends requests to a server at regular short intervals to check for updates or new data. It's called "short polling" because of the relatively brief delay between each request.

Use case - It is commonly used in scenarios where real-time updates are not critical, such as periodic data updates or system health checks.

How short polling works?

Request Initiation: The client sends a request to the server.
Immediate Response: The server processes the request and responds immediately, even if there is no new data.
Repeat Requests: The client waits for a predetermined interval before sending another request.

Advantages

Easy to Implement: Simple logic for sending requests.
Independent Requests: Each request is independent, which can reduce server memory usage.

Disadvantages

Inefficient for Real-Time Needs: High frequency of requests can lead to unnecessary network traffic and server load if updates are infrequent, as the client is constantly polling the server regardless of whether new data is available.
Latency: The client may not receive updates immediately, as it relies on the polling interval.
Problem with scale: As the number of users grows, the number of network requests will get increased leading to the point number 1.

Below is an example of how you can implement short polling using JavaScript on the client side and Node.js with Express on the server side.

Server-Side (Node.js with Express)

First, set up a simple Express server that responds to client requests.

// server.js
const express = require('express');
const app = express();
const port = 3000;

let data = { message: "Hello, World!" };

app.get('/poll', (req, res) => {
    res.json(data);
});

app.listen(port, () => {
    console.log(`Server running at http://localhost:${port}`);
});

Client-Side (HTML + JavaScript)

Next, create an HTML file with JavaScript to repeatedly send requests to the server at regular intervals.

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>Short Polling Example</title>
</head>
<body>
    <h1>Short Polling Example</h1>
    <div id="data"></div>

    <script>
        function fetchData() {
            fetch('http://localhost:3000/poll')
                .then(response => response.json())
                .then(data => {
                    document.getElementById('data').innerText = data.message;
                })
                .catch(error => console.error('Error fetching data:', error));
        }

        // Poll the server every 5 seconds
        setInterval(fetchData, 5000);

        // Initial fetch
        fetchData();
    </script>
</body>
</html>

Explanation

Server-Side:
- The server listens on port 3000 and responds to GET requests at the /poll endpoint with a JSON object containing a message.
Client-Side:
- The client uses the fetch API to send a GET request to the server every 5 seconds using setInterval.
- The response is parsed as JSON and the message is displayed in a div with the ID data.
- An initial fetch is performed to display data immediately when the page loads.

Running the Example

Start the Server:

Save the server code in a file named server.js.
Run npm init -y to create a package.json file.
Run npm install express to install Express.
Start the server with node server.js.

Open the Client:

Save the client code in an HTML file (e.g., index.html).
Open the HTML file in a web browser.

You should see the message "Hello, World!" displayed on the web page, and it will be updated every 5 seconds as the client polls the server. You can modify the server code to change the data and see how the client updates in real-time.

In summary, while short polling is a useful technique for real-time updates when you don’t need to handle a high volume of users or need immediate real-time data, it is generally less efficient compared to long polling, WebSockets, or Server-Sent Events (SSE), which are more preferred for the scalable solutions.