How to stream data to feed progressbar

Question

I have a NodeJS app that do some computation, and I'd like to fill a progressbar on the client ( AngularJS ) showing the amount of computing done. For now I do something like this :

Server side :

var compute_percent = 0;

router.post('/compute', function(req, res) {
   myTask.compute1(function(result) {
      compute_percent = 33;
      myTask.compute2(function(result2) {
         compute_percent = 66;
         myTask.compute3(function(result3) {
            compute_percent = 100;
            res.json(result3);
         });
      });
   });

}
router.get('/compute_percent', function(req, res) {
   res.json(compute_percent);
}

Client Side

angular.module('myApp').controller('myCtrl', 
   function($scope, $interval, $http) {
      $interval(function() {
         $http.get('/compute_percent').success(function(result) {
            $scope.percent = result});
         }, 
      500);
   }
});

What I don't like is that I end up doing a lot of request (if I want the progressbar to be accurate) and almost all of the request are useless (the state didn't change server side).

How can I 'inverse' this code, having the server send a message to the listening client that the computing state changed ?

Answer 1

You have 3 possibilities that can be done:

Standard push

By using sockets or anything that can communicate both way, you can do fast information exchange. It will uses many requests for updating the progress bar, but it's pretty fast and can support a tons of request per seconds.

Long pooling

The browser send a request, and the server does not respond immediately, instead it wait for an event to occurred before reporting it by responding. The browser then apply its action and send another request that will be put to wait.

With this technique you will only have update when the server wants. But if you want great accuracy, this will still produce a lot of requests.

Pushlet

The client send only one request, and the server fill it with javascript that will update the progress bar. The response is stream to keep the connection opened, and javascripts update are sends when needed.

The response will look like:

set_progress(0);
// nothing for X seconds
set_progress(10);
// nothing for X seconds
set_progress(0);
....

Comparing to the others, you still send the same amount of information, but in one request, so it's less heavy.

The easier to implement is the long-pooling I think.