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.
Jobs Vacancy
The Jobs portal provides you with real time Jobs Opening and Vacancy Updates curated globally. Start applying for your dream job with ease in any location you choose.
Learn More >>
CV Builder
The CV Builder provides you with comprehensive guide and proven steps to take in writing a professional CV including top CV templates to get you started quickly.
Learn More >>
