Send One AJAX Request to process data and Get Back Multiple PHP Responses updating its progress

Question

Background:

I'm trying to develop a loading screen plugin that can be integrated into our mobile rich media ads. Some of these ads use several images for flipbook-style animations, so something like this would be really useful. It needs to work on iPhone 4.0+ and Android 2.2+ and, ideally, Windows Phone 7.1.

The way I've coded loading screens in the past I would create a series of image objects and set its source to the image url. Then for each onload, onerror, or onabort event for that object, I'd increment the loading process by 1 and display it on the loading screen overlay.

However, upon a team member's suggestion, I've been doing some research into using data URIs to encode the image data onto the webpage directly, using PHP. The only draw back to this approach is it can cause the web page to open slowly if there are a lot of images.

A few days ago I found a blog post by Mark Kolich in which he used data uri to encode a series of images in a server side script, wrap it in a json response, and then send all those image files back to his web application. Its a great idea, however, if I used that concept in my loading screen, then the loading progress would go from 0% to 100% in one ajax request. As a result, if the loading process takes a few seconds, that might not be enough response stimulation to keep the visitor's interest. I need to show some progress in the middle.

To do:

Therefore, what I need to do is take Mark's method and figure out how I can make the responses a little more real-time. I want to make it so I can send one AJAX request with a list of images to my loader php script and have my php script ping back with multiple responses with updates every time (or every other time, or every 5th, etc) it successfully finished reading and encoding these images.

I realize that I might be over complicating it; that the php script is going to process those images so fast that the chatter going back to the client side code will be pointless because it'll be done in no time. In which case it might make more sense to sudo-simulate the loading process involved with those images using setTimeouts, until the JSON response comes back. Or I might be on the right track and there is a certain threshold I should start taking this approach into consideration because the load time is taking too long.

Any ideas? Any examples?

Answer 1

Try Comet. It allows multi-part responses, which'd let you get those periodic updates, but still only have one single HTTP request going.

Answer 2

As @Marc B say, Comet, or a WebSockets solution (with fallback for older Web Browsers) is most definitely the solution you are looking for.

Comet can be a bit tricky to get your head around and ultimately HTTP Streaming and HTTP Long-polling solutions are work arounds for HTTP. WebSockets are a much better approach since they are standardised and, in my opinion, are becoming the standard for server and client bi-directional realtime communication. There are a few solutions for realtime infrastructure for PHP:

• Using Comet with PHP StackOverflow question
• Comet and PHP tutorial
• PHP and WebSockets and a tutorial which uses it

If you would rather use a hosted service which removes the pain of installing and maintaining your realtime infrastructure and especially if you just want to push updates from your server to the client (Browser on iOS, Android, WP7) when an event occurs (when a new image should be displayed or the db is updated etc.) then a hosted solution is definitely a good option (Note: I work for a hosted solution provider).

I've compiled a list of hosted solutions here:

See: Hosted realtime technologies