Wait for event to happen in server side in angular JS

Question

I am really new to angularJS. I need to develop a page where angular JS wait for a event to happen at server side so angular JS should keep checking server using $http call in every 2 seconds. Once that event completes Angular should not invoke any $http call to server again.

I tried different method but it gives me error like "Watchers fired in the last 5 iterations: []"

Please let me know how to do it.

Following is my code

HTML

<div ng-controller="myController">
    <div id="divOnTop" ng-show="!isEventDone()">
        <div class="render"></div>
    </div>
</div>

Angular JS

   var ngApp = angular.module("ngApp",[]);
ngApp.controller('myController', function ($scope, $http) {
    $scope.ready = false;
    $scope.isEventDone = function () {
        $scope.ready = $scope.getData();
        return $scope.ready;
    };
    $scope.getData = function () {
       if (! $scope.ready) {
           $http.get("/EventManager/IsEventDone")
             .then(function (response) {
                 $scope.ready = Boolean(response.data);
             });
        }
    };
   setInterval($scope.isPageReady, 5000);
});

Answer 1

In your example $scope.pageIsReady does not exist. What you could do is inject the $timeout service into your controller and wrap your http call inside of it:

  var timeoutInstance = $timeout(function(){
    $http.get("/EventManager/IsEventDone")
                 .then(function (response) {
                     $scope.ready = Boolean(response.data);

                    if($scope.ready){
                       $timeout.cancel(timeoutInstance);
                    else
                       $scope.getData();
    }

                 });
    },5000);

cancel will stop the timeout from being called. I have not tested this but it should be along those lines.

Also not sure what type of backend you are using but if it is .net you could look into SignalR which uses sockets so the server side tells the front end when it is ready and therefore you no longer need to use polling.

Answer 2

A few things here.

I'm not convinced the accepted answer actually works nor solves the initial problem. So, I'll share my 2 cents here.

$scope.ready = $scope.getData(); will set $scope.ready to undefined each time since this method doesn't return anything. Thus, ng-show="!isEventDone()" will always show the DOM.

You should use angular's $interval instead of setInterval for short-polling in angular.

Also, I've refactored some redundancy.

    var ngApp = angular.module("ngApp",[]);

    ngApp.controller('myController', function ($scope, $http, $interval) {

       var intervalPromise = $interval($scope.getData, 5000);

       $scope.getData = function () {
           if (! $scope.isEventDone) {
               $http
                   .get("/EventManager/IsEventDone")
                   .then(function (response) {
                       $scope.isEventDone = Boolean(response.data);
                       if($scope.isEventDone) {
                           $interval.cancel(intervalPromise);
                       }
               });
           }
           else {
               $interval.cancel(intervalPromise);
           }
        };

    });

This should work and solve your initial problem. However, there's a scenario where your server may be on a high load and takes 3 seconds to respond. In this case, you're calling the server every 2 seconds because you're waiting for 5 seconds after the previous request has started and not waiting for after the previous request has ended.

A better solution than this is to use a module like async which easily handles asynchronous methods. Combining with $timeout:

    var ngApp = angular.module("ngApp",[]);

    ngApp.controller('myController', function ($scope, $http, $timeout) {

       var getData = function(cb){
           if(!$scope.isEventDone) return cb();
           $http.get("/EventManager/IsEventDone")
             .then(function (response) {
                 $scope.isEventDone = Boolean(response.data);
                 cb();
             });
       };

       // do during will run getData at least once
       async.doDuring(getData, function test(err, cb) {
           // asynchronous test method to see if loop should still occur
           // call callback 5 seconds after getData has responded 
           // instead of counting 5 seconds after getData initiated the request
           $timeout(function(){
               cb(null, !$scope.isEventDone);
               // if second param is true, call `getData()` again otherwise, end the loop
           }, 5000);

       }, function(err) {
           console.log(err);
           // if you're here, either error has occurred or 
           // the loop has ended with `$scope.isEventDone = true`
       });


    });

This will call the timeout after the request has ended.

A better alternative, if you have control of the server, is to use a websocket which will enable long-polling (server notifies the client instead of client making frequent requests) and this will not increase significant load on the server as clients grow.

I hope this helps