Streaming data over ajax

Question

I want to access AJAX data before the request has finished, effectively to implement streaming kind of like this:

ajax_request.send();
interval = setInterval(function() {
    continueParsing(ajax_request.responseText);
    if (download_complete)
        clearInterval(interval);
}, 64);

Right now I have a php thingy to break the request up into smaller chunks, but I'd rather take it all in one go. What's the best way to do this (I only care about Chrome and Firefox).

Answer 1

Well, starting with a PHP handler like this:

$content = file_get_contents('http://pplware.sapo.pt/feed/');
for($i = 0; $i < 10; $i++){
   $content .= $content;
}
echo $content;

and a javascript like this:

var client = new XMLHttpRequest();
client.open('get', 'ajax.php');
client.send();
client.onprogress = function(){
    console.log(this.responseText.length);              
}

I get this console:

11183
137415984
1311572876
1313769728

so, it works.... i think you can figure out the rest :)

Answer 2

You're best using WebSockets to do this kind of thing and have the appropriate fallback for older browsers (say in the form of AJAX long polling).

Since you're using PHP a quick google search turned up this project - http://code.google.com/p/phpwebsocket/ that could provide a simple way to do it. I don't know if it has a fallback to other technologies if the browser doesn't support websockets but if it doesn't you might be able to put socket.io-client over the top of it and just use the phpwebsocket project to provide your server layer.