AngularJS ongoing polling of server, with cancellation

Question

I followed the excellent advice dispatched here (Server polling with AngularJS), but [think I] have a need to sometimes cancel the polling, to reinstate it later.

Specifically, I have a list of data. The client polls the server every 5 seconds with a timestamp of the "last synchronization" -- the last time that it conferred with the server. The server responds with any changes since that timestamp.

Sometimes the client may make a change itself, sending a PUT to the server.

I'm having an issue with the PUT request, I think, interfering with the poll (or vice-versa), causing data to get out of sync. I'd like to test this by canceling the poll until the PUT request has been approved.. but I just can't get to a place where the polling function can successfully call itself each time; issue a promise that's cancellable; and be restarted externally after it's canceled.

I got a little close with a service ("pulseService"), but I can't get all the way. It looks like this, but fails with "cannot read property 'poller' of undefined":

myModule.factory('pulseService', function($http, $rootScope, $timeout) {
  $rootScope.pulsePromise = null;
  var obj = {
    poller: function() {
      var thing = this;
      console.log("Here I am!");
      var semaphore = new Date().getTime();
      var query = {"timestamp": {'$gt': semaphore}};
      query = JSON.stringify(query);
      $http({method: 'GET', url: '/registrants', data: query}).
        success(function(data, status, headers, config) {
          $rootScope.error = false;
          $rootScope.$broadcast('pollFinished', data);
          $rootScope.pulsePromise = $timeout(thing.poller, 5000);
        }).
        error(function(data, status, headers, config) {
          $rootScope.error = true;
          semaphore = new Date().getTime();
          $rootScope.pulsePromise = $timeout(thing.startPolling, 15000);
        });
    }(),
    startPolling: function() {
      console.log(this);
      this.poller;
    }
  };
  return obj;
});

By request, here's a simplified version of my controller.. It might have a little kruft in it but I tried to simplify out stuff:

function regCtrl($scope, $http, $rootScope, $timeout, pulseService) {
  // ...
  // Doing stuff to initialize and gather data into $scope.attendees

  $scope.$on( 'pollFinished', function( event, data ) {
    var found = false;
    angular.forEach(data, function(resultVal, resultKey) {
      while (found === false) {
        angular.forEach($scope.attendees, function(attendeeVal, attendeeKey) {
          if (attendeeVal.id == resultVal.id) {
            $scope.attendees[attendeeKey] = resultVal;
            found = true;
          }
        });
      }
      found = false;
    });
  });

  // .. Logic for pushing a change to the server
  // .....
    $timeout.cancel($rootScope.pulsePromise);

    $http({method: 'PUT', url: '/registrants/'+attendee.id, data: query }).
      success(function(data, status, headers, config) {
        attendee.isHere = data.isHere;
        console.log("rerunning");
      }).
      error(function(data, status, headers, config) {
        $scope.error = true;
      });
  // ...

  var semaphore = new Date().getTime();
  // Kickoff the polling process
  pulseService.startPolling();
}
regCtrl.$inject = ['$scope','$http','$rootScope','$timeout','pulseService'];

Answer 1

I think the specific error you're getting is because, when you do $timeout(thing.startPolling, 15000), startPolling is unbound. So "this" inside startPolling is undefined.

I think you could just replace both $timeout calls with $timeout(obj.poller, ...) and get rid of startPolling.

Or you can just bind the method like $timeout(thing.poller.bind(thing), 5000).