HTML Server-Sent Event

HTML Server-Sent Event with html tutorial, tags, anchor, img, div, entity, textarea, marquee, p tag, heading tag, h1, h2, table, formatting, attribute, elements, ol, ul, Input Types, block element tag, inline element tag, html tags, phrase tag, head, body, form, lists, symbols etc.

<< Back to HTML

next → ← prev

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

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

Browser Support:

API	Chrome	IE	Firefox	Opera	Safari
SSE	6.0	Not Supported	6.0	11.5	5.0

Next TopicHTML Color Names

← prev next →

.Net

.NET Array Dictionary List String 2D Async DataTable Dates DateTime Enum File For Foreach Format IEnumerable If IndexOf Lambda LINQ Parse Path Process Property Regex Replace Sort Split Static StringBuilder Substring Switch Tuple

Java

Core Array ArrayList HashMap String 2D Cast Character Console Deque Duplicates File For Format HashSet If IndexOf Lambda Math ParseInt Process Random Regex Replace Sort Split StringBuilder Substring Switch Vector While

TheDeveloperBlog.com

HTML Server-Sent Event

HTML5 Server-Sent Event

What are the Server-Sent Events?

Receiving events from the server

Example:

Code Explanation:

Check browser support for Server-sent Event

Example:

Sending events from the server:

Example:

Code Explanation:

Complete Example:

Example:

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

Browser Support:

Related Links:

.Net

Java

Related Links