Question

这是我第一次使用Angular.js。我谷歌很多，但找不到我的问题的正确答案。

我的最终申请应如下所示：没有用户交互。您浏览到网站，一切都开始了。页面等待服务器，服务器将服务器发送的事件发送到浏览器，在表格中显示它，并在一段时间后从表格中挑出第一个项目并使用它。

所以我认为制作2个控制器和一个工厂是最好的。工厂连接到服务器并通过服务器发送事件重新获得更新，将其放入Array.This数组传递给第一个控制器并显示在表中。第二个控制器也访问数组（使用函数返回（并删除）第一个项目）并使用它。

如果在2个控制器之间发现很多关于处理数据的内容并更新视图，那么当工厂中的数据发生变化时。我也发现了一些关于服务器发送事件的例子。但是它们都是在控制器中完成的，只有工厂，而不是在控制器中使用。但我想提出一个中心点来保存数据并与服务器建立连接并从这个中心点更新控制器。这是错误的方法吗？

我应该在第一个控制器中建立连接并将数据推送到工厂吗？只能使用$ rootScope吗？我对处理问题的“正确”方法一无所知。

到目前为止，我的代码是工厂连接到我的服务器并且（据我所见）立即关闭了连接并且从未使用过回调。当我使用Chrome访问localhost：3000 / getStuff时，我收到了这些事件。目前我将代码更改为简单，在控制台中查看事件：

var module = angular.module('myApp',[]);


module.factory('DataService',function(){

var array=[];
var mesg;
var handleCallback = function (msg) {
    mesg = JSON.parse(msg.data);
    console.log(msg);
    console.log("callback");
}

var source = new EventSource('/getStuff');
source.addEventListener('message',handleCallback,false);

return {
    list: function () {
        return array;
    }

}

})


module.controller('MainCtrl',function($scope,DataService){
$scope.array = DataService.list;

})

Answer 1

我们使用SSE使用Angular构建了一个演示应用程序。您可以在GitHub上浏览它，并阅读related blog post以获取更多上下文信息。基本上，这个应用程序使用APISpark和Google表格构建一个quizz，数据通过streamdata.io检索，它依赖于SSE，基于D3.JS向UI发送实时和差异更新。

我们创建了一个名为apiSparkStreamdataioFactory的工厂（在app.service.js中）来处理SSE通道（streamdataio.createEventSource方法是一个包装器，它将收集所有必需的数据，并在调用stremdata.open方法时创建eventSource）。当在SSE通道上接收数据时，我们使用$ rootScope。$ apply来应用在每个视图中定义的回调，并处理接收到的数据。请参阅以下代码：

 'use strict';

(function () {

  function apiSparkStreamdataioFactory(quizzConfig, $rootScope) {
    return {
      newStreamdata: function (url) {
        var headers = ['Authorization: Basic ' + btoa(quizzConfig.apiSparkLogin + ':' + quizzConfig.apiSparkPassword)];
        var streamdata = streamdataio.createEventSource(url, quizzConfig.streamdataioAppToken, headers);
        var data = [];

        function open() {
          streamdata.open();
          return this;
        }

        function onData(onDataCallback) {
          streamdata.onData(function (snapshot) {
            data = snapshot;

            $rootScope.$apply(function () {
              onDataCallback(data);
            });
          });

          return this;
        }

        function onPatch(onPatchCallback) {
          streamdata.onPatch(function (patches) {
            jsonpatch.apply(data, patches);

            $rootScope.$apply(function () {
              onPatchCallback(data);
            });
          });

          return this;
        }

        function close() {
          streamdata.close();
          return this;
        }

        function onError(onErrorCallback) {
          streamdata.onError(function (error) {
            onErrorCallback(error);
          });

          return this;
        }

        return {
          open: open,
          onData: onData,
          onPatch: onPatch,
          onError: onError,
          close: close
        };
      }
    }
  }

  angular
    .module('QuizzApp')
    .factory('apiSparkStreamdataioFactory', ['quizzConfig', '$rootScope', apiSparkStreamdataioFactory])
  ;


})();

希望此示例可以帮助您找到适合您应用的解决方案。

Angular recive Data with Server-sent-events（EventSource）并在2个控制器之间处理它

1 个答案: