Messages from Server

Messages from Server is part 12 and last part of Beginner’s Guide to HTML5 New Edition.

We guess, you all are much fans of social networking site FaceBook. Or you might be familiar with Twitter application where you update your statuses with your followers. Or if you are a cricket lover, you might be familiar with Cricinfo where it live update what’s happening on the match in text mode. All of these web applications provide live text feed from the server and present it to the user without making user to refresh the page. We called this feature, Server-Sent Events.  Server-Sent Events allow a web page to get updates from a server. It is a one way messaging technique.

A server-sent event is when a web page automatically gets updates from a server. This was also possible before emerge of HTML5, but the web page would have to ask if any updates were available. With server-sent events, the updates come automatically. Facebook/Twitter updates, stock price updates, news feeds, sport results, etc… are few of the most popular usages.

Let’s look at an example.

First thing to do is checking the availability of browser support.

[code language=”js”] if(typeof(EventSource) !== “undefined”) {
// Yes! Server-sent events support!
// Some code…..
} else {
// Sorry! No server-sent events support..

Then you need a server side script where it sends messages to the client browser. We are using PHP for that purpose.

[code language=”php”]

Save this file as demo_sse.php
The server-side event stream syntax is simple. Set the “Content-Type” header to “text/event-stream”. Now you can start sending event streams. We also specify that the page should not cache. Output the data to send using echo and always start with “data: ” word and flush the output data back to the web page.

Then we are going to create the EventSource object in the true condition part of the if statement.
Create a new EventSource object, and specify the URL of the page sending the updates (in this example “demo_sse.php”). Each time an update is received, the onmessage event occurs. When an onmessage event occurs, we put the received data into the element with id=”result”.

[code language=”js”] var source = new EventSource(“demo_sse.php”);
source.onmessage = function(event) {
document.getElementById(“result”).innerHTML += + “

So here we are going to end our HTML5 tutorial. With this new edition we covered the APIs that supported by the HTML5. We will come with another new tutorial soon again. Till then take care and keep waiting…

Hope you enjoyed this tutorial. Please don’t forget to subscribe for new updates.


Written by Sandeep Likhar

Sandeep Likhar is from India, where he is a blogger, eBook designer, and founder of LetsDnD. He has 6 years of experience in the industry as a Digital Publishing Expert and eBook Converter, providing services to authors, publishers, and distributors worldwide. He is proficient in converting books into various formats, such as HTML, epub, mobi, word, PDF, including all major online platforms like iTunes, Kobo, Kindle, CreateSpace, B&N, Smashwords, and more.

Comment Below