What is Server-Sent Events in HTML5 ?

Last Updated : 11 Mar, 2024

Server-Sent events (SSE) provide a seamless way to automatically update web pages without requiring user interaction. These events allow servers to push real-time data to clients over HTTP connections.

The updates for any website come via HTTP connections. This way of communication of updating the webpage by a server to the client side is known as one-way messaging or mono-directional. The Server-Sent Events are part of web APIs. In this article, we'll learn about Server-Sent Events, how they work, and examples using HTML5.

Check Browser Support for SSE

Before implementing the SSE, checking the support of the browser is necessary. To check the support, we'll use an if and else statement and run the following code using the EventSource object. The EventSource object is used to receive the events or notifications from the server. Below is the syntax of the object.

Syntax:

if(typeof(EventSource) !== "undefined") {
    var source = new EventSource("gfg-file.php");
    source.onmessage = function(event) {
        document.getElementById("yourResult")
            .innerHTML += event.data + "<br>";
    }
}

Now, that we know about the EventSource object, it's time to check the browser support for SSE. Use a <script> tag of javascript, to run the code of checking the browser support.

Example to Check Browser Support for SSE:

Example: In this example, we will check browser support for SSE. Now, once the if statement runs, if the browser is sporting the EventSource object, the user will see the Output, and if not then it will show the else part of the statement.

HTML

<!DOCTYPE html>
<html>
<body>
    <h1>GeeksforGeeks</h1>
    <div id="gfg"></div>
    <script type="text/javascript">
        if (typeof EventSource !== "undefined") {
            alert("Congrats Geek! The browser is supporting SSE.");
        } else {
            alert("Sorry Geek! The browser is not supporting SSE.");
        }
    </script>
</body>
</html>

Output:

Sending Automatic events from Server:

Now, to send the notification or events from the server, there is a need for a server that is capable of sending the events to the clients. For the demo, we'll create an ASP file for the purpose.

Below is the ASP file for the example:

// gfg_demo.asp

// code starts from here
<%
Response.ContentType = "text/event-stream"
Response.Expires = -1
Response.Write("data: Current Server time: " & now())
Response.Flush()
%>

In the above ASP code, as per the SSE standard, the ContentType response is set to "text/event-stream" and the output of data will be sent starting always with data. The Flush() method of response will send the data event to the user webpage.

Example to Send Automatic events from Server:

Example: In this example, we will send automatic events from the server.

HTML

<!DOCTYPE html>
<html>
<body>
    <h2>GFG getting Server-Sent Events </h2>
    <div id="output"></div>
    <script>
        // Started if statement
        if (typeof EventSource !== "undefined") {
            // Created event source
            var gfgSource = new EventSource("gfg_demo.asp");
            gfgSource.onmessage = function (event) {
                // Output is shown here
                document.getElementById("output")
                    .innerHTML += event.data + "<br>";
            };
        } else {
            document.getElementById("result").innerHTML =
                // If browser does not support SSE
                "Sorry Geek, The browser does not support SSE";
        }
    </script>
</body>
</html>