Enroll Course

100% Online Study
Web & Video Lectures
Earn Diploma Certificate
Access to Job Openings
Access to CV Builder

Outlines

What Are HTML5 Server-Sent Events

Web Application For SSE

Server Side Script For SSE

Handle Server-Sent Events

ENROLL NOW

HTML5 - Server Sent Events

HTML5 Course. HTML5 Certification, HTML5 Training, HTML5 Tutorials.

What are HTML5 Server-Sent Events

Conventional web applications generate events that are dispatched to the webserver. as an example, a straightforward click on a link requests a brand new page from the server.

These types of events that are flowing from a web browser program to the online server could also be called client-sent events.

Along with HTML5, WHATWG Web Applications 1.0 introduces events that ensue web servers to web browsers and that they are called Server-Sent Events (SSE). Using SSE you'll push DOM events continuously from your webserver to the visitor's browser.

The event streaming approach opens a persistent connection to the server, sending data to the client when new information is out there, eliminating the necessity for continuous polling.

Server-sent events are the default way for how we stream data from the server to the client.

Web Application for SSE

In other to make use of Server-Sent Events in a web application, you need to add an <eventsource> element to the HTML document.

The src attribute of <eventsource> HTML5 element should point to a URL that ought to provide a persistent HTTP connection that sends an information stream containing the events.

The URL should point to a PHP, PERL or any Python script that will take care of transmitting the event data often and consistently. The code below is a simple example of a web application that would expect server time.

<!DOCTYPE HTML>

<html>
   <head>
   
      <script type = "text/javascript">
         /* Define event handling logic here */
      </script>
   </head>
   
   <body>
      <div id = "sse">
         <eventsource src = "/cgi-bin/ticker.cgi" />
      </div>
		
      <div id = "ticker">
         <TIME>
      </div>
   </body>
</html>

Server Side Script for SSE

A script that is meant for SSE should send Content-type header that is specifying the type text/event-stream like below:

print "Content-Type: text/event-stream\n\n";

After setting Content-Type, the server-side script would send an Event: tag followed by event name. The following example would send Server-Time as event name terminated by a new line character.

print "Event: server-time\n";

The final step is to send event data using Data: a tag which would be followed by an integer or string value terminated by a newline character as follows −

$time = localtime();
print "Data: $time\n";

Finally, the following is a complete ticker.CGI is written in Perl −

#!/usr/bin/perl  
print "Content-Type: text/event-stream\n\n";  

while(true) { 
   print "Event: server-time\n"; 
   $time = localtime(); 
   print "Data: $time\n"; 
   sleep(5); 
}

Handle Server-Sent Events

The code below is the final example that shows our web application now has support for server-sent events.

<!DOCTYPE HTML> 

<html>  
   <head> 
  
      <script type = "text/javascript"> 
         document.getElementsByTagName("eventsource")[0].addEventListener("server-time", 
         eventHandler, false); 
    
         function eventHandler(event) { 
            document.querySelector('#ticker').innerHTML = event.data; 
         } 
      </script> 
   </head> 
  
   <body> 
      <div id = "sse"> 
         <eventsource src = "/cgi-bin/ticker.cgi" /> 
      </div> 
   
      <div id = "ticker" name = "ticker"> 
         [TIME] 
      </div> 
   </body> 
</html>