HTML SSE (Server-Sent Events)

Traditionally, a web browser asks the server for a web page, the server responds, and the connection is closed. If the browser wants to know if a new email has arrived, it has to repeatedly ask the server, "Anything new yet?" (a process known as polling).

HTML5 introduced Server-Sent Events (SSE) to solve this. SSE allows the browser to open a persistent connection to the server, and then the server can actively "push" new data to the browser automatically whenever it wants, without the browser having to ask.

Common Use Cases for SSE

Because SSE is a one-way connection (Server → Client), it is absolutely perfect for applications where you just need to listen for live updates:

• Live sports scores or ticker tapes.
• Real-time stock market price feeds.
• Social media status updates (like Twitter/X live feeds).
• Server status monitoring dashboards.

Using the EventSource API

To listen for these automatic updates from your server, you use a JavaScript object called the EventSource.

Receiving Server Data

Here is an example of how you would connect an HTML page to a server script (like a PHP or Node.js file) that continually sends out the current time.

<h1>Live Server Updates</h1>
<div id="feed"></div>

<script>
// 1. Check if the browser supports standard SSE
if (typeof(EventSource) !== "undefined") {
  
  // 2. Open a connection to our backend script
  var source = new EventSource("live_feed.php");
  
  // 3. Listen for the 'onmessage' event to fire automatically!
  source.onmessage = function(event) {
    document.getElementById("feed").innerHTML += event.data + "<br>";
  };
  
} else {
  // Gracefully handle older browsers like Internet Explorer
  document.getElementById("feed").innerHTML = "Sorry, your browser does not support server-sent events...";
}
</script>

How it works behind the scenes

1. new EventSource("live_feed.php") creates an object. The browser reaches out to the server and essentially says, "I am listening, do not hang up."
2. Every time the server decides to push a piece of text through the connection, the onmessage event is automatically triggered inside the browser.
3. The event.data property safely contains whatever text the server just sent.

Error Handling and Connections

The EventSource object also provides built-in ways to monitor the exact status of the connection. This is incredibly useful if the user's internet drops, or if the server crashes.

var source = new EventSource("live_feed.php");

// Triggered when the connection is initially opened
source.onopen = function() {
    console.log("Connection to the server has been established.");
};

// Triggered if the connection drops or fails
source.onerror = function() {
    console.log("Error occurred! The server may be down, or internet was lost.");
    // Fun fact: SSE will automatically try to reconnect by itself!
};