jQuery Ajax display data as it comes in

Question

Let's say I have a page that returns a bunch of data slowly over time. Like, this for example:

<?php

$iTime = time();

while(time()-$iTime < 10 ) {
    echo "Hello world";
    echo str_repeat( ' ', 1024 ) . "<br />";
    flush( );
    sleep(3);
}

?>

I want to show all the data as it comes in. So it'll update "live". As in, once a line of data is sent, it'll allow me to parse the data and display it?

Is there a way to do this via jquery? I apologize if this has been asked previously

Thanks for your time! :)

Underside

I don't think you want to use sleep() on the server-side, that'll just slow down the response. What about using a setTimeout() 'loop' on the client-side to request the data in pieces via AJAX? Or (my preference) return all of the data at once but store it in a JavaScript array and then use setTimeout() to gradually display each element in the array? – Sosthina

This was just an example script to make it take a long time. My actual script doesn't use sleep. :) – Underside

Answer 1

Of course, building a basic comet-style long poll is pretty trivial:

PHP:

<?php
    $data = null;
    while ($data ==  null)
    {
         $data = find_data($_REQUEST['last_update']); // This is up to you.
                    // Although you may do a DB query, that sort of breaks the model
                    // from a scalability perspective.  The point in this kind of
                    // operation is to rely on external data to know that it needs to 
                    // update users, so although you can keep your data in a DB, you'll
                    // want a secondary storage mechanism to keep from polling it.
                    //
                    // Conceptually, you'd put new information into this data storage
                    // system when something changes (like new data from an external
                    // source.  The data storage system could check to see if a file
                    // has been updated or if there is new data in something like a
                    // memcached key.  You'd then consume the data or otherwise 
                    // mark it as used.
         sleep(5);
    }
    echo json_encode($data);

JavaScript:

 function setListener()
 {
      $.ajax({
           url: 'updater.php',
       dataType: 'json',
       success: function(data, status, xhr) 
           {
              // do something, such as write out the data somewhere.
              setListener();
           },
       error: function()
           {
               setTimeout(setListener,10000);
           }
       });
 }

Selig

Answer 2

take a look at the ajax-http-stream jquery plugin. It extends jquery ajax calls to accept comet style data being streamed from the backend and will call a function OnDataRecieved when new data comes in.

Cooler

Hm, the plugin didn't work for me :( But that's what I was pretty much looking for. – Underside

Answer 3

Well, you're hitting the limitations of the HTTP protocol itself, so this is less jQuery and more about web programming. If you truly need real-time push, then a different protocol is more suited, like XMPP (which several big players use, like Google Wave).

However, with jQuery I'd use normal polling on low-latency, low-power resources to do the job (easy to create static resources that use HTTP caching properly, relying on REST to guide you), so something akin to ;

1. setTimeout ( 'myPoll("http://my_feed")', 500 ) ;
2. my_feed using HTTP caching as a static means (maybe on a per user basis, if necessary)

Pugliese