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:

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.