javascript - 当服务器数据发生变化时，如何将http服务绑定(bind)到angularjs中的变量？

Question

我使用 Angular 中的 http get 请求来提取对象中的数据，并在我的应用程序中当前连接的用户。但每次都需要刷新该信息才能绑定(bind)到范围。所以我这样做是为了每 3 秒刷新一次 get 请求中的数组数据 ->

index.jade

a(ng-repeat="item in room.connected")
img(src="/images/{{item.avatar}}")

controller.js

ngApp.controller('controller', function(){

   var vm = this;  vm.connected;

   $interval(function(){
   //The Get request returns an array like->[{"username":"cesarodriguez4","avatar":"icon-user-man-1.png"}]
   $http.get('http://localhost:3000/get-classroom-viewers/user')
   .then(function(response){
         vm.connected = response.data;
         },function(error){
         console.log(error);
        });
     }, 3000);
   //Every 3 seconds executes the GET request.
   });

这可行，但我认为它不正确，因为每次获取请求时终端都会显示，我认为这是一个不好的做法仅当服务器更改数据时才刷新信息的方法吗？我尝试使用 $scope.$watch 但不起作用。

Answer 1

您应该使用 websockets，这样，如果服务器端发生任何变化，您可以推送到套接字，您可以从套接字读取和更新作用域变量。每 3 秒循环一次或发出服务器请求是不好的做法，因为它会增加服务器负载。

SockJS Angular 客户端

angular.module('myApp')
.service('PushNotificationService', ['$q', '$timeout', function($q, $timeout) {

   var service = {}, listener = $q.defer(), socket = {
      client: null,
      stomp: null
    };

    service.RECONNECT_TIMEOUT = 30000;
    service.SOCKET_URL = 'your socket Url'; // like '/chat'
    service.CHAT_TOPIC = 'topic url'; // like '/getMessage/chat'  

    service.receive = function() {
      return listener.promise;
    };

    var reconnect = function() {
      $timeout(function() {
        initialize();
      }, this.RECONNECT_TIMEOUT);
    };


    var startListener = function() {
      socket.stomp.subscribe(service.CHAT_TOPIC, function(data) {                 
          var jsonObj = JSON.parse(data.body);
        listener.notify(jsonObj);
      });
    };

    var initialize = function() {
      socket.client = new SockJS(service.SOCKET_URL);
      socket.stomp = Stomp.over(socket.client);
      socket.stomp.connect({}, startListener);
      socket.stomp.onclose = reconnect;
    };

    initialize();
    return service;
}]);

在你的 Controller 中

angular.module('myApp').controller('myCtrl', function($scope, PushNotificationService) {
     PushNotificationService.receive().then(null, null, function(message) {

                   //message contains data you pushed to socket from server

            //assign data to $scope variable
          $scope.data = message;
                });
})

在您的 html 中包含以下脚本

sockjs.js
stomp.js

更多信息

Websocket using Spring AngularJS SockJS