Javascript 将SocketIO集成到用于http请求的angular应用程序

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

$http.get

创建一个简单的

$timeout

，但是，我更喜欢使用

SocketIO

下面是标准的工作

$http.get

：

以下是SocketIO应用程序的开始：

然而，我被困在哪里从这里开始，使货币数据不断更新

控制器：

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);
        }
    };
});

SocketService：

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);
          }
        });
      })
    }
  };
});

---

任何帮助都将不胜感激。

我想建议对控制器“MainCtrl”进行一些更改，如下所示：

app.controller("MainCtrl", function($scope, $interval){

    $interval(callAtInterval, 5000);
});

function callAtInterval() {
    console.log("Invoke Get data");
}

---

正如Omkara所建议的，您可以使用Angular的$interval功能在延迟后连续执行函数。我已将您的Plunker（）分叉，将您的

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);
});

---

这使得控制器每1000毫秒执行一次getData（）函数。

query.yahooapi.com似乎不支持WebSocket，或者至少我在他们的文档中找不到它。WebSocket是解决这个问题的好办法，但如果雅虎没有提供，你需要回退到轮询，正如建议的那样，你可以使用$interval服务

是你的重构代码，希望你会喜欢

用法示例：

app.controller('MainCtrl', function($scope, yahooService) {
  yahooService.setRealTime(true);
  $scope.currencies = yahooService.getData();
});

Yahoo服务实现：

app.factory('yahooService', function($http, $interval) {
  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=";
  var realTime = false;
  var cancelIntervalCallback;
  var data = {};

  var getData = function () {
    $http.get(url).success(function(response, status, headers, config) {
      angular.merge(data, response);
    });
  };

  return {
      getData: function() {
        if (!realTime) {
          getData(); 
        }
        return data;
      }, 
      setRealTime: function (isRealTime) {
        realTime = isRealTime;
        if (!isRealTime && angular.isFunction(cancelIntervalCallback)) {
          cancelIntervalCallback();
          cancelIntervalCallback = null;
        } else {
          cancelIntervalCallback = $interval(getData, 1000);
        }
      }
  };
});

---

注意：我已经升级到Angular.merge函数的Angular 1.4，如果这是一个问题，您可以使用merge from。

您必须在套接字服务中添加重新连接和延迟等选项，如

app.factory('socket', function ($rootScope) {
      var socket = io.connect('your url',{
     'reconnect': true,
      'reconnection delay': 500
});
      //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);
              }
            });
          })
        }
      };
    });

在控制器中，如果要显示最新的10种货币数据

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

      yahooService.getData()
        .success(function(data, status, headers, config) {
          $scope.currencies = data;

         $scope.currencies.unshift(tx);
        if (parseInt($scope.currencies.length, 10) >= parseInt(CURRENCIES_DISPLAYED, 10)) {
          $scope.currencies = $scope.currencies.splice(0, CURRENCIES_DISPLAYED);
          }
  })
        .error(function (data, status, headers, config) {
          $scope.currencies = 'There has been an error';
        });
});

---

我尝试了socket io部分，但该URL显示为404。您确定端点支持WebSocket吗？请给我一个雅虎API文档的链接好吗？这个链接没有ws，还有plunker发送源代码的问题；）好的，如果雅虎财经没有web socket，那么某种形式的SocketIO Finance/Currency实时应用程序。@FelisCatus-Yahoo API docs:@OamPsy我检查了文档，但在那里没有看到任何web socket。你的代码看起来非常好，但我们确实需要一个WebSocket端点来测试它。如果你能找到一个支持WebSocket的API，我很乐意更改我的答案。当做