CODEWITHSUNDEEP
javascriptajaxangularjsrest
guagay_wk
guagay_wk

Reputation: 28030

How to refresh real-time data retrieved from REST server with angularjs?

I would like to retrieve table data from a REST backend server with angularjs. The data changes by the second. I would like to use angularjs to refresh the data as it changes in real-time. How can this be done? Do I force angularjs to make ajax calls at regular time intervals to refresh the data display?

Upvotes: 2

Views: 2507

Answers (2)

justGoscha
justGoscha

Reputation: 24136

Yeah with REST there's no other way then polling. To refresh the data itself in the browser view you can use $rootScope.$apply() in the service (I presume that you're using a service to get the data), first you have to inject the dependency of $rootScope of course.

EDIT Actually you shouldn't use $rootScope.$apply(), because it can lead to ugly $digest in progress errors. Instead use 

$timeout(function(){
  // set data here...
})

A tip for improvement if you're not happy with the polling and if you have programmed the backend or are in position to change it, is: Try to use WebSockets:

  • It gets rid of the polling, because then your browser can communicate directly to the server.
  • It has less overhead.
  • It is supported in the major browsers and you can use libraries with fallback mechanisms like SocketIO

The server can then always push the data right then, when it's available. The server-side implementation depends on the backend you are using, but most backend frameworks/servers nowadays also support websockets.

Upvotes: 2

kubuntu
kubuntu

Reputation: 2535

You have to either use the poll or push strategy. However, since you already know that the resource changes regularly, it should be enough to setup a recurring timeout so that your application polls the resource on the REST server every second. Once it is retrieved, AngularJS updates the view. So, yes you have to force AngularJS to make calls to the service.

Upvotes: 2

Related Questions