geekandpirate

Welcome to my blog. GeekAndPirate is all about the web programming tricks,tools and techniques that I will be sharing with you. I will be also sharing all the tricks and techniques of hacking stuff(yeah that's true!!) I would be also interested in talking about the latest developments about the world of the WEB. So stick with me!

Comet — http streaming

I really like Gmail. In fact, I LOVE it, and  I am pretty sure you too. It is simple, slick, elegant yet powerful and rich with functionality.  Many of us rely on gmail for our daily business tasks.

So what’s special about gmail? It’s easy to use interface, slick design, and highly customizable options, with chat integrated right into your account…the list goes on. And the question for the geeks and tech savvy: what’s so special about gmail in web technology point of view?  AJAX? JSON? Hammm…well, I won’t say you are wrong…but those are somewhat old terms now a days, and to be frank you don’t have to be an expert to know these, a high school graduate will tell you about what AJAX means, there states , response codes, how JSON is more powerful than ajax, blah blah…

So what’s the big deal? Ain’t Gmail using AJAX? Well yes….it is using ajax, but in somewhat different way. Let me give an example. You have opened your inbox, done with all your emails (read / reply/ delete/ marked as read or very less likely marked it as spam), so that you don’t have any unread mail in your inbox. You confirm this by hitting ‘refresh’ link in your inbox, which sends a request to the server to check whether there is any new mails waiting for you. This is AJAX request which client (that is your browser) initiates, which is then sent to the server,  server will respond accordingly, client then will render the result by manipulating DOM, and you will see new messages in inbox if any.

But you may have also observed that sometimes the mail automatically gets pushed up in your account without you refreshing your inbox. So what’s the mechanism behind this? Did your client (browser) automatically sent the request in the background without your knowledge? Is there continues javascript running in the background with setTimeout function which executes the function periodically which makes an ajax call to the server? This is a classic behavior which can be observed in many web application. But this may cause a problem if your application window is kept open for long time with javascript execute in the background, your browser may get crashed.

Back to our question, if that was not client making periodic calls to the server in the background, then what was it?? Well, thats what HTTP STREAMING is all about, and you are using it being not aware of it! So what it is all about?

This HTTP Streaming is referred by many terms,  Comet, Ajax Push, Reverse Ajax, Two Way Web, HTTP Serve Push…. So what is the basic difference with HTTP streaming and AJAX? I will just repeat briefly how AJAX works. In AJAX, client initiates a communication with server with XmlHttpRequest object to the server, server processes the request and sends the response in the format of XML, JSON or Simple HTML. Browser reads this response and manipulate the DOM, and then connection is closed. For getting the updated information, client has to re-initiate the request to the server.

But HTTP streaming (Comet) is somewhat different. It has following lifecycle-

1) Client initiates the connection with server. This can be achieve with many techniques like Hidden IFRAME,  XmlHttpRequest object etc

2) Server processes the request and sends the data back to the server. But in this case, it does not closes the connection, but keeps it open and listens for any new event . If there is any new data available, it then ‘pushes’ the data back to the client. So the data is pushed back to the client as and when available, and this is called as ‘Long Polling’.  This is in short a ‘Push’ technology where the publisher of the information (that is client) pushes the data, whereas, the traditional AJAX call is called as ‘Pull’ technology where client initiates the connection for getting specific data.

Comet like applications offer real time interaction by replying on a persistent HTTP connection, which acts like a stream of data between client and server, hence it  is called as HTTP Streaming. This method is really useful for the modern web application where real time interaction is very vital, consider an example of share trading web application, where it is very crucial to display the share price in real time, so that a user of that application can decide to buy/sell that share accordingly.

Let’s take a simple server side example for implementing this technology. Consider the share trading app. When a request is made from the client to the server, it first process the request and then flushes the price for that share to the browser. But neither side closes the connection (client and server) and server listens for another event, in this case, change in share price. The server code will somewhat look like this:

<?
$share_price = get_share_price();
echo $share_price;

while(true)
{
if($change_in_share_price)
{
$share_price = get_share_price();
?>
<script>document.getElementById(‘price’).innerHTML = ‘<?php echo $share_price?>’;</script>
<?
flush();
}
sleep(2);

}

?>

The <script> tag will make the browser render the share price. It then listens for change in share price in a never ending loop, and the response will be sent to the browser as and when there is a change, creating a real time system where changes are immediately communicated to the browser.

Comet like functionality can also be observed in the social networking sites like facebook where user’s wall get updated as and when any new feed is published by the server.

As web is evolving, we may see many cool and real time web applications like Gmail using comet like technologies in near future!

Advertisements

Leave a Reply

Fill in your details below or click an icon to log in:

WordPress.com Logo

You are commenting using your WordPress.com account. Log Out / Change )

Twitter picture

You are commenting using your Twitter account. Log Out / Change )

Facebook photo

You are commenting using your Facebook account. Log Out / Change )

Google+ photo

You are commenting using your Google+ account. Log Out / Change )

Connecting to %s

%d bloggers like this: