HTML5 - SPLessons

HTML5 Server-Sent Events

Chapter 22

SPLessons 5 Steps, 3 Clicks
5 Steps - 3 Clicks

HTML5 Server-Sent Events

HTML5 Server-Sent Events

shape Introduction

HTML5 Server Sent Events are used to generate the events from web applications to the web browsers. Following are the concepts are covered.

  • What are Server Sent Events
  • SSE Web application
  • Server Side Script
  • Browser Support

What are Server Sent Events

shape Description

The events that are flowing from web browser to the web server are known as the Server Sent Events.For example, user clicking a link to generate the next page. In order to push the DOM events continuously from web server to the browser use SSE.

SSE creates a persistent connection to the server when the new data is available then sends the data to the clients. Server Sent Events are flown from server to the client in the form of stream data.

SSE Web application

shape Description

In order to use the Server Sent Events add the <eventsource> element to the document. After adding the element to the document, source attribute points to the URL provided, then HTTP connection sends the data with events.The URL points on a server side script that should be the PHP, PERL, or Python then it will send the data continuously. The code below demonstrates the web application.

<!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

shape Description

For server side script, use PHP, ASP, PERL or Python. Then Server side script should sent Content-Type header as follows

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

Once the Content-Type setting is completed then set the event tag which contains event name as shown below.

print "Event: server – time\n";

Finally sending the data by using the Data tag and integer value of a string which is terminated by new line as shown below.

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

The code below is used to demonstrate the sever side script 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);
}

The code below is used to demonstrate the sever side script written in PHP.

<?php
header('Content-Type: text/event-stream');
header('Cache-Control: no-cache');

$time = date('r');
echo "data: The server time is: {$time}\n\n";
flush();
?>

The code below is used to demonstrate the sever side script written in ASP.

<%
Response.ContentType = "text/event-stream"
Response.Expires = -1
Response.Write("data: The server time is: " & now())
Response.Flush()
%>

shape Examples

The code below is used to demonstrate the Server-sent Events.

<!DOCTYPE HTML>
<html>
   <head>	
      <script type="text/javascript">
         document.getElementsByTagName("eventsource")[0].addEventListener("server-time", eventHandler, false);
			
         function eventHandler(event)
         {
            // Alert time sent by the server
            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>

The code below is used to demonstrate the Server-sent Events.

<!DOCTYPE html>
<html>
	<body>
		<h1>Getting server updates</h1>
		<div id="result"></div>
		<script>
			if(typeof(EventSource) !== "undefined") {
			var source = new EventSource("demo_sse.php");
			source.onmessage = function(event) {
			document.getElementById("result").innerHTML += event.data + "<br>";
			};
			} else {
			document.getElementById("result").innerHTML = "Sorry, your browser does not support server-sent events...";
			}
		</script>
	</body>
</html>

Browser Support

shape Description

HTML5 Web Workers API supported by all the latest browsers.Following are the browser versions supported by HTML5.

Summary

shape Points

  • Server-Sent Events are not supported by all the browsers.
  • Server updates are come automatically with SSE
  • Script side page should not cache.