How to run AngularJS service with dynamic data-websockets

Question

I am new to angular and try to work with data that server sends periodically.

I have one main html page and set a main angular js file. In the main page, I am navigating sub html pages through ngRoute from man html page. This is my main.js.

    var serviceMod = angular.module("service", ['ngRoute']);

serviceMod.config(['$routeProvider',
  function($routeProvider) {
    $routeProvider.
      when('/sell', {
        templateUrl: 'sellstats.html',
        controller: 'sellstats'
    }).
      when('/cache-service', {
        templateUrl: 'buy.html',
        controller: 'buyingstats'
      }).
      otherwise({
        redirectTo: '/home.html'
      });
}]);

my main.js connects to a server in web sockets.
var socket = new SockJS(URL); stompClient = Stomp.over(socket);

And it takes responses every 10 seconds.

I want to send these results into those sub html pages through angular and the sub angular functions in sub html files should be able to have those updated last received responses through websockets.(I use angular 1.2)

Please let me know
1.How I can bound dynamic data which received through websockets ?
2. How the sub angular js functions in sub html pages will access updated values ?

maurycy · Accepted Answer · 2014-09-14 12:11:11Z

1

The best solution will be to run your socket connection as a angularjs service which then can be easily injected across controllers - that's how you can access the values in sub functions (controllers)

And the best way to bound is to use service inside controllers in a two way databinding which will update data automaticly

I've made simple working example for you with jsonp instead of sockets but it's easy to change

http://plnkr.co/edit/mrzTYOwQWzg1isOJfCUm?p=preview

app.service('timeService', function($http, $timeout){
  var service = {data: null}
  function getTime(){
    $http.jsonp('http://time.jsontest.com/?callback=JSON_CALLBACK').then(function(response){
      service.data = response.data
      $timeout(getTime, 5000)
    })
  }

  getTime()

  return service
})

answered Sep 14, 2014 at 12:11

maurycy

8,4201 gold badge30 silver badges44 bronze badges

Sign up to request clarification or add additional context in comments.

3 Comments

Débora Over a year ago

Thanks for your answer and highly appreciate the code sample. It seems that it will solve my problem. But one more thing want to know: In my main js page, pages are injected with controllers with '$routeProvider' as in my question. Assume there is a js file in my sellstats.html page called 'sellStats.js'. How can I use values which are set to $scope in the sellState.js ? How can I write angular function? Why I want this is: I want to avoid scripts which are not used in main html. For example, assume in your example, controllerTwo is only required to execute on sellState html.

Débora Over a year ago

I could get the service run. But as you mentioned, the two way binding does not work for me. I tried returning static value. It can be shown on the page with {{val}}, but when the server updates messages are not updated. That means, the service method, var msg={val:'firstInitValue'} and when the websocket subscribe values are set> msg.val=serverResponse; , and I set the value to scope in controller and then in the page, {{msg.val}} output is 'firstInitValue', not the server responded value. where it can be gone wrong. I checked your sample. it works well.

maurycy Over a year ago

If you use a 3rd party code to connect to websockets you'll need to use $scope.$apply() or $timeout without time value to trigger the digest process as the receiving of data happens outside of scope, for the other requirements to not include JS that you don't need it's pretty arguable. If it's a big chunk of code then sure, you might need to separate it, but if it's less than 200 lines it might add more time to execution that it could save.

Hargrovm · Accepted Answer · 2014-09-14 12:08:29Z

If you encapsulate your socket listener into an angular service, and make this service responsible for parsing the messages received from the server and then either expose the results directly as json objects from the service or indirectly through angular variables you can then have angular inject your service or variables into the controllers of the pages that want to use the data, you can then expose the output from the service or the variables as properties on the controller and then bind the view to them as you would any other variable on the controller.

When angular injects the service it is responsible for instantiating it so it needs to have the logic in it which means it auto connects and since services are singleton objects you don't need to worry about multiple instances being created it's lifetime also the same as the lifetime of the app.

Collectives™ on Stack Overflow

How to run AngularJS service with dynamic data-websockets

2 Answers 2

3 Comments

Comments

Your Answer

Hot Network Questions

Collectives™ on Stack Overflow

2 Answers 2

3 Comments

Comments

Your Answer

Sign up or log in

Post as a guest

Related