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!

missing ) in parenthetical

Today, while working on one of my project, I got this javascript error .

missing ) in parenthetical

This error comes due to incorrectly formatted json string.

I was trying out an ajax based image upload jquery based lib. I was using json as a response type from my server. I also noted that this error was coming while uploading only one specific image, the rest of images were working quite nicely.

I was quite confused about this error and was wondering what is wrong with this specific image. What I found out is that the image was corrupted, so my server (php) script was throwing some php errors. As I was using json as my response type, it was not properly formatting the json response, creating some invalid json string, which in return was causing error on client side (js) .

My solution was to remove any php error so that json will be formated properly. My solution was like

if($error_while_uploading){

ob_clean();

$data = array( “status” => “error”);

echo json_encode($data);

}

The php ob_clean() function cleans the output buffer. So any potential php error which might have occurred during  file resizing will get clean out and the json format will remain valid and intact.

So remember. If you see this missing ) in parenthetical error in your firebug, this is due to you got some badly formatted json string!