HTML5 - Server Sent Events
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>
Before testing Server-Sent events, you should make sure that your web browser supports this feature.