HTML5 Server-Sent Event

HTML5 Server-Sent Event

To enable a browser to receive automatic updates from a server, the HTML5 server-sent event is used. A server-sent event occurs when a server automatically sends some updates to the browser. It is one way messaging or mono-directional.

Receiving events from the server:

To receive events from a server, the EventSource object is used. The URI of the script is thus specified to generate the events.

Example:

<script>
if(typeof(EventSource) !== "undefined") {
  var source = new EventSource("Example.php");
  source.onmessage = function(event) {
    document.getElementById("sse").innerHTML += event.data + "<br>";
  };
} else {
  document.getElementById("sse").innerHTML = "Server-sent events is not supported by the browser.";
}
</script>

Explanation:

In the above example, the new EventSource object is used to define the URI of the page which sends server updates and the Example.php is used for sending the updates to the web browser. The onmessage event occurs when an update from the server occurs. The message is then printed on the web page.

To check the browser support for Server-sent Event:

The EventSource object is checked to be true or not, to check the browser support for Server-sent event. An alert is displayed for supporting if it is true else it will be displayed alert for not supporting.

Example:

<!DOCTYPE html>  
<html>    
<body>  
<div id="op"></div>  
<script type="text/javascript">  
   if(typeof(EventSource)!=="undefined"){  
       alert("Server-sent events is supported by the browser.");  
    }  
   else{  
    alert("Server-sent events is not supported by the browser.");   
   }  
 </script>  
</body>  
</html>

Output:

Explanation:

In the above example we are checking the browser support for Server-sent Event.

To send events from the server:

A server is needed to send updates to the browser to work with server-sent. Creating a file in ASP, PHP or any dynamic language is required for this.

Example: Example.php:

<?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();
?>

Explanation:

In the above example, the “Content-type” header is set to “text/event-stream” which is needed for server-side event standard. The server is then informed to turn off caching. In otherwise case, the server updates may be cached. The echo “data: The Current Server time is: {$time}\n\n” is used to create the output of data to be sent. The flush () method is used to ensure that the data is sent right away to the web page.

Example: Complete Example.

<!DOCTYPE html>
<html>
<body>
<h1>Retrieving server updates</h1>
<div id="sse"></div>
<script>
if(typeof(EventSource) !== "undefined") {
  var source = new EventSource("Example.php");
  source.onmessage = function(event) {
    document.getElementById("sse").innerHTML += event.data + "<br>";
  };
} else {
  document.getElementById("sse").innerHTML = "Server-sent events is not supported by the browser.";
}
</script>
</body>
</html>

Output:

Supporting Browsers:

Chrome, IE, Firefox, Opera and Safari.

Please Share