How do I update a webpage with the progress of a server-side task?

Question

Hi everyone,

I'm working on a web project that takes the results from a survey type application, and runs them through a bunch of calculations to come up with some recommended suggestions for the user.

Now, this calculation might take a minute or so, so I'd like to be able to give the user some update on it's progress. Obviously, the quick and dirty solution would be to put up a message along the lines of "Please wait while we calculate your recommendations" with a spinning gear type graphic. (or whatever, you get the point..). Once the task completes, I'd redirect to the results page.

However, I'd like to do something a little more flashy. Maybe something along the lines of a progress bar, and even prompt the user with what's going on in the background. For example, give them a progress bar, with some text that says "Now processing suggestion 3 of 15; Multi-Vitamin"

Any suggestions on how I could set this up? One way I'm thinking of doing it is to write the progress of the calculation method to the HttpContext, and slap up an update panel and timer that would show/refresh this info. I've also checked out maybe building a web service/method, and then poll that at some interval.

Has anybody done something similar to this before? What worked for you?

Thanks again!

~Jim

Answer 1

What you suggested about using HttpContext is ultimately how most people do this sort of thing. There are MANY ways to glorify it up but that's really what's going on.

One such way would be for you to register each of these parallel threads in some sort of singleton (or something) and regularly (every 10 seconds?) have your AJAX call ping that thread to ask it how it's going which could return a percentage complete for you to show to your user. But still, behind the scenes it's just an AJAX call. You COULD even vary the frequency of your check based on some response that you get when you ask your other thread what's up.

Answer 2

I have worked on gimmicks similar to this in the past. They are usually ok initially but get to be problematic in the fact that the backend has to start reporting a lot more of what is going on, simply so the client can display it to a user who may or may not care about it.

One thing we have done in the past is to simply put a countdown timer on the page (or progress bar, etc) and some rotating text that says what we are going to do with the data, ala installers. Its not necessarily specific to what is going on but its general and we can update it on the server side periodically.

If you want to go your initial route I would suggest dividing up your analysis task into processes and update a collection with the progress of the process, then when the client calls back in (via ajax, or refresh, or magic) you just give them back the collection of status, give each status a UID and the client can determine if it needs to update, in that way you can see many status changes if they happen between calls and you minimize the work you need to do to make the "process" report its status.

Answer 3

If you have never been to AjaxPatterns.org, then I would suggest a visit is in order. The relevant reading material you would be looking for is:

Progress Indicator

That covers several patterns to accomplish the goal along with the two you suggested already. If you want actual progress indication, then you are going to have to do a fair bit of work, but the basic pattern is as follows:

1. Kick off long running task (possibly on a seperate thread)
2. Create a shared resource that indicates work done, and a unique key that can retrieve that information. This can be done in-memory, database, file system...
3. Pass that key back to the client
4. On the client side, poll at some interval for progress updates using that key
5. Update the client display with progress indicator based on value returned.