How to push realtime data to a webpage from a “server” page? [TUTORIAL]

pushEver wondered how to push realtime data, notifications, alert or create any time changing event? Wondered how to automatically push updates from a server to a web page? Well then, lets get started :)

push realtime data from a server page to a client page

We are very much familiar with web-page updates like Facebook/Twitter updates, stock price updates, news feeds, sport results, etc. which use a similar kind of Server-to-Client interaction. They are the one way interaction where the server periodically pushes updates to the client using some events to trigger the Client page to display the updates.

HTML5 allows us to do the similar thing with its quick and easy feature called the HTML5′s Sever-Sent Events.

What is the HTML5 Server-Sent Events and how can it be used to push realtime data?

Server-Sent Events are the events sent by the server with which we can update the Client Pages. Some events supported are:

Events Description
onopen When a connection to the server is opened
onmessage When a message is received
onerror When an error occurs

How to create the “Server” Page?

The server page is the one that pushes the data periodically to the client pages. Normally the server pushes the updates at a period of 3 seconds. The code below shows the simple “Server” page.

<?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();
?>

Copy the above code and paste it in a ‘php’ file. The header is necessary as it describes the page as an Event Streaming page. Here the ‘current time‘ is pushed as the data. The format of the data is important. Any data that is to be pushed, must be sent as “data: updates“, so the client recognizes the updates that are sent. Flushing the data [flush()] assures the next data is genuine.

How to receive the Server-Sent event Notifications/Updates?

Now that we have the Server Page, we need a client page to receive the data that is sent. For this, we first define a event source. Our event source is the server page; the event must be used as a trigger to update the client page. The code below is a simple client page that reads the data provided by the server.

var source=new EventSource("server.php"); //server.php is the name of the server page
source.onmessage=function(event)
 {
 document.getElementById("result").innerHTML+=event.data + "<br>";
 };

Copy the above code and paste in a ‘html/php’ file. The EventSource needs the server page, I have used server.php as my server page. You have to change the name as per your requirement. The server page needs to be in the same folder as that of the client page. Here, we the EventSource sends the message, the function is called. The data from the server is receive as event.data

So, there you go. Now you have a simple real-time server and client page with one way interactions.

If you have any problems regarding the post, do comment them. All the popular browsers except the Internet Explorer supports the this event. Enjoy!

Pinterest
Email
Print
WP Socializer Aakash Web