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
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.
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.
[html]<!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>
[/html]
Description
For server side script, use PHP, ASP, PERL or Python. Then Server side script should sent Content-Type header as follows
[c]
print "content- Type : text/event-stream\n\n";
[/c]
Once the Content-Type setting is completed then set the event tag which contains event name as shown below.
[c]
print "Event: server – time\n";
[/c]
Finally sending the data by using the Data tag and integer value of a string which is terminated by new line as shown below.
[c]
$time = localtime ();
print "Data: $time\n";
[/c]
The code below is used to demonstrate the sever side script written in Perl.
[c]#!/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);
}
[/c]
The code below is used to demonstrate the sever side script written in PHP.
[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();
?>
[/php]
The code below is used to demonstrate the sever side script written in ASP.
[php]<%
Response.ContentType = "text/event-stream"
Response.Expires = -1
Response.Write("data: The server time is: " & now())
Response.Flush()
%>
[/php]
Examples
The code below is used to demonstrate the Server-sent Events.
[html]<!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>
[/html]
The code below is used to demonstrate the Server-sent Events.
[html]<!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>
[/html]
Description
HTML5 Web Workers API supported by all the latest browsers.Following are the browser versions supported by HTML5.
- Chrome 4.0
- Mozilla Firefox 3.5
- Safari 4.0
- Opera 10.5
Points
- Server-Sent Events are not supported by all the browsers.
- Server updates are come automatically with SSE
- Script side page should not cache.