/    /  HTML SS Event

HTML SS Event(SSE)

 

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

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

 

Receiving events from the server:

 

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

 

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

 

Code Explanation:

 

  • First, provides the new EventSource object, and define the URI of the page which sends server updates. we have taken ServerUpdate.php for sending the updates to the window web browser.
  • Every time when an update occurs from the server-side, then the on message event occurs and prints the message on the web page.
  • Displayed on div using id “output”.

 

Sending events from the server:

 

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

 

Example: ServerUpdate.php:

 

<?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 – set the “Content-type” header to “text/event-stream” and it is required for server-side event standards.
  • The second line provides 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 generates 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.

 

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>

 

OUTPUT:

 

HTML SS Event

 

Note: To execute the above code on your web browser, you need a server installed on your system, and then run this on localhost. we can install any server such as MYSQL, XAMPP, etc.