HTML5 APIs – Server Sent Events


What is Server-Sent Event?

HTML5 server-sent event enables a new way of communication between the web pages with the web server.

Server-Sent Events are received from web server to webpage client via HTTP connection.

Server-Sent Events can be updates or other information received by the browser.

Server-sent events always comes from server to client.

Server-sent events are called as mono-directional or one-way messaging.

How Server-Sent Event works ?

When we submit a form in the webpage, that event is called as client-side events.

That client-side events are pushed to server and the server send the response back to webpage.

Such events are called as server-sent events.

XMLHttpRequest object helps our JavaScript code make a request to the web server.

Once the web server sends the response the communication is over.

XMLHttpRequest object is the core of all Ajax operations.

Note : Server-sent events feature is supported in all major modern web browsers like Firefox, Chrome, Safari and Opera except Internet Explorer.

Tutorial on html !!!

Click to Learn More about – HTML Tutorial for beginners

1. Checking browser support for Server-Sent Event


We have to check the browser support for server-sent event.

This will check the EventSource object is true or not. If it is true then it supports or else it will not support.

Example :

<!DOCTYPE html>
<html>
<head>
  <title>Checking Browser SSE API</title>
</head>
<body>
<div id="output"></div>
<script type="text/javascript">

   if(typeof(EventSource)!=="undefined"){
       alert("Your browser is supports.");
    }
   else{
    alert("Your browser does not support.");
   }
 </script>
</body>
</html>

Output :

2. Sending Messages with a Server Script

We are creating a new example file “sse_example1.php”.

Example :


<?php
header('Content-Type: text/event-stream');
header('Cache-Control: no-cache');

$time = date('r');
echo "data: The server time is: {$time}\n\n";
flush();
?>

1. “Content-type” is set as “text/event-stream”, its a standard server-side event.

2. “Cache-Control” is set as “no-cache” to turn off the caching else the server updates may be cached.

3. echo “data: The server time is: {$time}\n\n” creates data to send, it starts with data.

4. flush () method, makes sure that data is sent right away to the web page.

3. Processing Messages in a Web Page

EventSource object is used to receive server-sent event messages.

HTML document receives the current time reported by the web server and display it to the user.

Example :

<!DOCTYPE html>
<html lang="en">
<head>
<title>Using Server-Sent Events</title>
<script>
    window.onload = function() {
        var source = new EventSource("get_servertime.php");
        source.onmessage = function(event) {
            document.getElementById("result").innerHTML += "New time received from web server: " + event.data + "<br>";
        };
    };
</script>
</head>
<body>
    <div id="result">
        <!--Server response will be inserted here-->
    </div>
</body>
</html>

Output :