Update a Web Page as a Process Runs

Question

I have a page where a multitude of time consuming functions occur. What I would like to do is as each step of the process is completed, update the web page to let the user k

Answer 1

An ajax request polling at a regular interval is the most common option or you could turn off buffering of the http response and stream the status updates back to the client all within a single http request. If this is a long running operation you need to consider user experience and scalability carefully in the latter scenario.

Html 5 WebSockets will address this specific scenario also. However, I'm not sure what state these are at within the current crop of Html 5 compliant browsers.

Answer 2

If you did it with AJAX, you'd need to have clientside javascript executing the ajax request on a frequency to find out if the state updated or not. The other option is using silverlight on the client, it's capable of having a more robust event driven conversation.

Both are viable and good options.

Here's your general getting started space for silverlight+wcf: http://www.silverlight.net/learn/advanced-techniques/wcf-ria-services/get-started-with-wcf-ria-services

Answer 3

Web servers can't push unsolicited data to the client; they obey the request-response cycle. The alternative is to use Message Queuing at a significant increase in complexity.

Polling from the client is not so bad; web servers are adept at handling many short requests, and a polling interval of 2 or 3 seconds should be fast enough.

Here is a polling method I like to use. It asynchronously waits for the response to come back before polling again (requires jQuery):

function poll(url, task, progressBar, resultsCallback, 
        timeoutMillis, pollIntervalMillis) {
    $.ajax({
        url: url,
        type: 'GET',
        dataType: 'json',
        timeout: timeoutMillis,
        data: 'action=poll&task='+task,
        success: (function(response, status, xhr) {
            if ('progress' in response) {

                // update the UI with the progress
                progressBar.setValue(response.progress);
            }
            if ('status' in response) {
                if (response.status == 'pending') {

                    // task is not finished, continue polling
                    setTimeout((function() {
                        poll(url, task, progressBar, resultsCallback, 
                                timeoutMillis, pollIntervalMillis);
                    }), pollIntervalMillis);
                }
                else {

                    // task completed
                    if (response.status == 'cancelled') {
                        progressBar.setColor('red');
                        progressBar.setText("Task '"+task+"' was cancelled");
                    }
                    else {
                        progressBar.setColor('green');
                        progressBar.setText("Task '"+task+"' complete");
                    }

                    // GET the results
                    $.ajax({
                        url: url,
                        type: 'GET',
                        timeout: timeoutMillis,
                        data: 'action=results&task='+task,
                        success: (function(response, status, xhr) {
                            resultsCallback(response, status, xhr);
                        }),
                        error: error
                    });
                }
            }
        }),
        error: error
    });

    function error(xhr, status, err) {
        alert('Failure to communicate with server: ' + status + ', ' + err);
    }
}

And your server-side code should be responding to polls with something like this:

{"progress" : 42, "status" : "pending"}