Server-sent Events

Have you ever wondered how live scores update on a sports website, or how your social media feed refreshes without you having to hit the reload button? This is often achieved through a technology called Server-Sent Events (SSE). SSE allows a server to push updates to the web page over a single unidirectional connection. This means that once you open a page, the server continuously sends new data as it becomes available, providing a seamless and interactive user experience. In this topic, you'll learn how to implement SSE, ensuring your applications stay up to the minute with the latest information.

What is Server-Sent Events (SSE)

Server-Sent Events (SSE) is a web technology that enables a server to send updates to clients through a single, persistent HTTP connection. It's particularly handy in building real-time web applications where the server needs to push updates to clients without them constantly checking in with each other. Here are some key characteristics of SSE:

• Unidirectional data flow: SSE facilitates the transmission of data from the server to the client, establishing a one-way flow. This is perfect for apps that need to keep users in the know with live updates.

• Automatic reconnection: SSE has a standard reconnection mechanism, ensuring that in the event of a disconnection, the client will automatically attempt to reconnect to the server after a timeout period.

• Event Identification: SSE lets you tag events with specific names, enabling clients to listen for and handle distinct types of messages. This feature is useful when dealing with different kinds of data or messages transmitted over the same connection.

• Built-in browser support: Most modern web browsers support SSE through the EventSource interface. This built-in support eliminates the need for external libraries, simplifying its usage.

• Efficiency and Low Latency: Compared to traditional polling techniques, SSE offers enhanced efficiency. It eliminates the need for clients to repeatedly initiate new HTTP requests to check for updates. Additionally, SSE provides lower latency since the server sends data as soon as it becomes available.

• HTTP-based: SSE operates seamlessly over traditional HTTP and remains compatible with existing web infrastructure, including proxies and load balancers. This compatibility allows for easy integration into current web applications.

How SSE works

The process initiates when the client requests an event stream from the server using a regular HTTP request. This event stream acts as a unidirectional communication channel that allows the server to send messages, known as events, to the client at any time.

Upon receiving this request, the server responds by setting the Content-Type header of the HTTP response to text/event-stream. This action signals to the client that an SSE connection has been established. Once the connection is open, the server can transmit events as blocks of text, each separated by a pair of newline characters (\n\n).

Within each text block, the server can include various fields:

• data: This field holds the message content that the server wants to send. For multi-line messages, each line should start with data:.

• id: Though optional, the id field assigns a unique identifier to each event. This helps clients track the order of events and resume the event stream from the last known event if the connection drops.

• event: This optional field allows the server to define a custom event type for the client to listen to. Without this field, the event type defaults to message.

• retry: This optional field suggests how long (in milliseconds) the client should wait before trying to reconnect if the connection is lost.

Here is an example of an SSE message:

id: 1
event: message
data: {"sender": "john_doe", "text": "Hello, world!"}

retry: 5000
data: {"info": "This is a heartbeat message to keep the connection alive."}

In this example, the message event carries a chat message from the sender john_doe, and the event has been assigned an id of 1. The last block of text establishes a retry interval of 5000 milliseconds and sends a heartbeat message to maintain the connection, without specifying a particular event type.

SSE connections are meant to be persistent. Once established, the server keeps the connection open, allowing continuous event transmission without requiring the client to make further HTTP requests. This differs significantly from conventional HTTP polling, where the client must periodically request updates.

In the event of a connection loss, clients will automatically attempt to reconnect to the server. The retry field lets the server recommend a wait time before the client attempts to reconnect. In the absence of a retry field, clients will default to a pre-defined retry interval."

Setting up an SSE server

Let's explore how to use Server-Sent Events (SSE) with Node.js through a practical example. Imagine a Node.js server acting as a timekeeper, constantly ticking and sending out the current server time to a client. In this example, your client is a web page that receives these time updates and displays them for the user.

Below is the server.js file for the server-side implementation.

const http = require('http');

const server = http.createServer((req, res) => {
  if (req.url === '/events') {
    // Set the necessary headers for SSE
    res.writeHead(200, {
      'Content-Type': 'text/event-stream',
      'Cache-Control': 'no-cache',
      'Connection': 'keep-alive',
      'Access-Control-Allow-Origin': '*' // Any domain can access this endpoint
    });

    // Send an event every 5 seconds
    const intervalId = setInterval(() => {
      const date = new Date();
      const timeString = date.toLocaleTimeString('en-US', { hour12: true });
      res.write(`retry: 5000\ndata: ${timeString}\n\n`);
    }, 5000);

    // Clear interval on client disconnection
    req.on('close', () => {
      clearInterval(intervalId);
    });
  } else {
    // Respond with a 404 not found for other requests
    res.writeHead(404);
    res.end();
  }
});

// Start the server on port 3000
server.listen(3000, () => {
  console.log('SSE server started on port 3000');
});

In the code above:

• Import the built-in HTTP module from Node.js and create an HTTP server that listens for requests.

• If a request is made to the /events endpoint, the server checks if the request URL is /events. If it is, it proceed to respond by setting the necessary HTTP headers for SSE:

  • Content-Type: text/event-stream tells the client that the server will be sending an event stream.

  • Cache-Control: no-cache ensures that the client does not cache the response, which is important for real-time data.

  • Connection: keep-alive keeps the connection open so the server can send updates.

  • Access-Control-Allow-Origin: '*' allows cross-origin resource sharing (CORS), permitting any domain to connect to the server.

• The server starts sending time updates every 5 seconds, following the SSE protocol, and inscribing a formatted string into the response object.

• If the client disconnects, the server stops sending updates by clearing the interval.

• If the request URL is not /events, the server responds with a 404 status code, indicating that the requested resource was not found.

• The server listens on port 3000 and logs a message to the console when it starts.

Building a server-sent events client

A server-sent events client utilizes the EventSource interface to receive messages and respond to each as they arrive. The EventSource interface is a browser-based Web API that enables clients, such as web browsers, to receive updates from a server over an SSE connection.

Here is what the client-side index.html can look like:

<!DOCTYPE html>
<html lang="en">
  <head>
    <meta charset="UTF-8" />
    <meta name="viewport" content="width=device-width, initial-scale=1.0" />
    <title>Server-sent event</title>
    <link rel="stylesheet" href="index.css" />
  </head>
  <body>
    <h1>Time Update</h1>
    <div id="loading">Loading...</div>
    <ul id="times"></ul>

    <script>
      window.onload = function () {
        // Create a new EventSource that connects to the server
        const eventSource = new EventSource("http://localhost:3000/events");

        // Function to handle incoming events
        function addTime(event) {
          // Hide the loading indicator when data is received
          document.getElementById("loading").style.display = "none";

          // Add the event data to the list
          let newElement = document.createElement("li");
          newElement.textContent = "The time is: " + event.data;
          document.getElementById("times").appendChild(newElement);

          // Show the loading indicator again after a short delay
          setTimeout(() => {
            document.getElementById("loading").style.display = "block";
          }, 500); 
        }

        // Listen for messages from the server
        eventSource.onmessage = addTime;

        // Handle errors
        eventSource.onerror = function (error) {
          console.error("EventSource failed:", error);
        };
      };
    </script>
  </body>
</html>

Explanation:

• The client-side consists of a HTML page with an embedded script to open an SSE connection to the server.

• When the page loads, an EventSource is created targeting the server's /events endpoint.

• The client listens for server messages using the onmessage handler.

• A loading indicator on the webpage informs the user that the connection is active and awaiting the next update.

• The addTime function, triggered by new messages, hides the loading indicator, updates the list with the current time, and then briefly displays the loading indicator again handler

• The event.data property contains the data sent by the server.

• The client handles errors using the onerror handler.

Output:

You've successfully created a server-sent events application. To test it, start the server by opening your terminal, navigate to your server file's directory, and run:

node server.js

The console should confirm that the SSE server is running on port 3000:

SSE server started on port 3000

Now, open the index.html file in a web browser. This file contains the client code connecting to your SSE server. Initially, a loading indicator will be displayed, signaling that the client is waiting for server updates.

Every 5 seconds, the page will show the current time from your SSE server. The loading indicator will reappear briefly after each update, indicating the wait for the next message. This cycle provides a continuous flow of real-time updates.

When implementing server-sent events, consider these challenges:

• Connection Limitations: Browsers may limit concurrent connections to a domain, which could hinder SSE if multiple sources are needed or other connections are required.

• Scalability: A server must manage numerous persistent connections, which can be challenging, particularly with a single-threaded Node.js server. Load balancing and a cluster of Node.js processes or a microservices architecture can help mitigate this.

• Proxy and Firewall Issues: Some proxies and firewalls might close what they see as idle connections, disrupting SSE.

• Reconnection Handling: Clients must handle disconnections smoothly and reconnect as needed. The EventSource API provides some support, but additional logic might be necessary.

• Security: Keep the SSE connection secure by using HTTPS and implementing authentication and authorization to ensure users only access permitted data.

Application of server-sent events

Server-Sent Events (SSE) are ideal for scenarios in which the server is the primary source of data generation, based on server-side logic, rather than relying on client requests. It is particularly well-suited for situations where the client rarely needs to send data back to the server.

Some common use cases for SSE include:

1. Real-time notifications: SSE enables servers to instantly send notifications to clients as soon as an event occurs. For instance, social media applications can notify users about new messages or posts without delay.

2. Live feeds: Services such as news sites, sports score platforms, stock tickers, or any application providing live updates can use SSE to deliver continuous data streams to clients as new information becomes available.

3. Real-time analytics and monitoring: Dashboards that monitor systems and display real-time metrics can utilize SSE to push updates to clients the moment new data is received.

4. Multiplayer online games: Games that require real-time updates from the server regarding the game state but don’t require frequent client updates can use SSE.

5. Location-based services: Services tracking the location of assets or individuals can use SSE to update clients about movements or location changes in real-time.

6. IoT device updates: Internet of Things (IoT) devices that send data to a server can use SSE to keep the server informed about their status or any changes as they occur.

Conclusion

Server-Sent Events (SSE) offer an efficient way for servers to push real-time updates to clients via a single, persistent HTTP connection. This technology is crucial for creating interactive web applications that demand live data streams, such as news feeds, stock tickers, or social media updates. With features like built-in reconnection, the ability to identify different event types, and native browser support, SSE simplifies the delivery of a continuous data flow from server to client, enhancing the user experience with minimal latency.

It's important to recognize that SSE may not fit every use case, particularly those requiring bidirectional communication. However, for scenarios where data predominantly flows from server to client, SSE stands out as an excellent choice.