javascript - 将 SocketIO 集成到用于 http 请求的 Angular 应用程序

Question

我创建了简单的 Angular 应用程序，它使用 Yahoo Finance 提取一些货币数据。然而，目前，它拉取数据，但直到我重新加载页面，货币才发生变化，这很好。我可以围绕 $http.get 创建一个简单的 $timeout，但是，我更愿意使用 SocketIO。

这是标准的工作$http.get:http://plnkr.co/edit/oiZ7JOASUbtLDPAQkZj2?p=preview

这是 SocketIO 应用程序的开始:http://plnkr.co/edit/dUEekn6kIJwLYxikWT9H?p=preview

但是我不知道从哪里开始，以便货币数据不断更新。

Controller :

app.controller('MainCtrl', function($scope, yahooService) {
  $scope.name = 'World';

      yahooService.getData()
        .success(function(data, status, headers, config) {
          $scope.currencies = data;
        })
        .error(function (data, status, headers, config) {
          $scope.currencies = 'There has been an error';
        });
});

服务:

app.factory('yahooService', function($http) {
    return {
        getData: function() {
            var url = "https://query.yahooapis.com/v1/public/yql?q=select%20*%20from%20yahoo.finance.xchange%20where%20pair%20in%20(%22USDMXN%22%2C%20%22USDCHF%22)&format=json&env=store%3A%2F%2Fdatatables.org%2Falltableswithkeys&callback=";
            return $http.get(url);
        }
    };
});

套接字服务:

app.factory('socket', function ($rootScope) {
  var socket = io.connect('https://query.yahooapis.com/v1/public/yql?q=select%20*%20from%20yahoo.finance.xchange%20where%20pair%20in%20(%22USDMXN%22%2C%20%22USDCHF%22)&format=json&env=store%3A%2F%2Fdatatables.org%2Falltableswithkeys&callback=');
  //var socket = io.connect();
  return {
    on: function (eventName, callback) {
      socket.on(eventName, function () {  
        var args = arguments;
        $rootScope.$apply(function () {
          callback.apply(socket, args);
        });
      });
    },
    emit: function (eventName, data, callback) {
      socket.emit(eventName, data, function () {
        var args = arguments;
        $rootScope.$apply(function () {
          if (callback) {
            callback.apply(socket, args);
          }
        });
      })
    }
  };
});

如有任何帮助，我们将不胜感激。

Answer 1

正如 Omkara 所建议的，您可以使用 Angular 的 $interval 功能在延迟后连续执行函数。我已经 fork 了你的 Plunker ( http://plnkr.co/edit/edyFvnAU1LCRS4uZqJdR?p=preview ) ，将你的 MainCtrl 更改为以下内容

app.controller('MainCtrl', function($scope, $interval, yahooService) {
  $scope.name = 'World';
    $interval(function () {
      yahooService.getData()
        .success(function(data, status, headers, config) {
          $scope.currencies = data;
        })
        .error(function (data, status, headers, config) {
          $scope.currencies = 'There has been an error';
        });
    }, 1000);
});

这使得 Controller 每 1000 毫秒执行一次您的 getData() 函数。