HTML5 Server-Sent Event

The HTML5 server-sent event enables a browser to receive automatic updates and data from a server via HTTP connections.

What are the Server-Sent Events?

Whenever we perform some event and send it to the server such as by submitting the form to the server. So such type of event which flows from web browser to web-server are called as a client-side events. But if the server sent some updates or information to the browser, then such events are called server-sent events. Hence A server sent event occurs when the browser automatically updated from the Server.

The Server-sent events are mono-directional (always come from server to client). Or it may be called as one-way messaging.

Receiving events from the server

The Server sent event uses the EventSource object to receive events from the server. It specifies the URI of the script which generates the events.

Example:

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

Code Explanation:

First, create the new EventSource object, and define the URI of the page which sends server updates. Here we have taken ServerUpdate.php for sending the updates to the web browser.
Each time when an update occurs from the server, then the onmessage event occurs and print the message on the web page.
The occurred message can be displayed on div using id "output".

Check browser support for Server-sent Event

First we need to check the browser support for server-sent event. So to check the browser support for Server-sent event we will check the EventSource object is true or not. If it is true then it will give alert for supporting else it will give alert for not supporting.

Example:

<!DOCTYPE html>
<html>
<head>
  <title>HTML5 SSE API</title>
</head>
<body>
<div id="output"></div>
<script type="text/javascript">
   
   if(typeof(EventSource)!=="undefined"){
       alert("Hey! Your browser is supporting.");
    }
   else{
    alert("Sorry! Your browser is not supporting."); 
   }
 </script>
</body>
</html>

Test it Now

Sending events from the server:

To work with server-sent, we need a server which can send data updates to the web browser. For this, we need to create a file in ASP, PHP or any dynamic language.

Following is the example to show the server updates:

ServerUpdate.php:

Example:

 <?php
  header('Content-Type: text/event-stream');
  header('Cache-Control: no-cache');
//Get the current time of server
   $time = date('r');
  echo "data: The Current Server time is: {$time}\n\n";
  flush();
  ?>

Code Explanation:

In the first line of the code, we have set the "Content-type" header to "text/event-stream". It is required for server-side event standard.
The second line informs the server to turn off the caching else the server updates may be cached.
echo "data: The Current Server time is: {$time}\n\n"; It creates the output of data to send, and it must always start with data: .
Then, we have used the flush () method, which makes sure that data is sent right away to the web page.

Complete Example:

Example:

   <!DOCTYPE html>
<html>
<head>
  <style type="text/css">
    div{
      text-align: center;
      background-color: #98f5ff;
    }
  </style>
</head>
<body>

<h1 align="center">Dynamic Server Updates</h1>
<div id="output"></div>
<script>
if(typeof(EventSource) !== "undefined") {
  var source = new EventSource("ServerUpdate.php");
  source.onmessage = function(event) {
    document.getElementById("output").innerHTML += event.data + "<br>";
  }
} else {
  alert("Sorry, your browser does not support the server sent updates");}
</script>
</body>
</html>

Test it Now