AngularJS 和 SignalR - 定义应用程序模块的区别

Question

我正在尝试将我的 SignalR 代码与 angular 集成。我可能遵循了 5 个不同的教程，但无法使其正常工作。

Following this tutorial，我的代码中唯一的区别是 my app.js 文件如下所示：

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

$(function () {
      $.connection.hub.url = server;
      $.connection.hub.logging = true;

      $.connection.hub.start().done(function () {
          console.log('Hub connection open. ID: ' + $.connection.hub.id);
      });
});

angular.module('myApp').value('chat', $.connection.testhub);

教程 app.js 如下所示：

(function() {
  angular.module('myApp', [])

  $(function () {
      $.connection.hub.url = server;
      $.connection.hub.logging = true;

      $.connection.hub.start().done(function () {
          console.log('Hub connection open. ID: ' + $.connection.hub.id);
      });
   });

  angular.module('myApp').value('chat', $.connection.testhub);
});

当从控制器访问“聊天”服务时，我可以 console.log 我的集线器。 但 SignalR 日志显示连接开始是在订阅任何集线器之前发生的，因此当然不会调用任何客户端方法。

所以我的问题是，我们的 app.js 文件中的差异是导致此问题的原因吗？为什么？

其他一切都是一样的，我已经验证 SignalR 服务器可以正常工作。

Answer 1

您需要将所有在done 回调触发之前触发的请求排队。 我为 SignalR 制作了一个抽象库，并像这样解决了它

https://github.com/AndersMalmgren/SignalR.EventAggregatorProxy/blob/master/SignalR.EventAggregatorProxy.Client.JS/jquery.signalR.eventAggregator.js#L164

我还在限制请求，以便在按顺序触发大量请求时将它们一起发送

https://github.com/AndersMalmgren/SignalR.EventAggregatorProxy/blob/master/SignalR.EventAggregatorProxy.Client.JS/jquery.signalR.eventAggregator.js#L184

你可以看看这个库，它的设计考虑到了 MVVM，也应该适合 MVC https://github.com/AndersMalmgren/SignalR.EventAggregatorProxy/wiki

演示项目 https://github.com/AndersMalmgren/SignalR.EventAggregatorProxy/tree/master/SignalR.EventAggregatorProxy.Demo.MVC4

现场演示 http://malmgrens.org/signalR/

Answer 2

在多次尝试均未成功后，我决定使用我的 ApplicationController（所有控制器的父级）作为 SignalR 处理程序。从那里我可以订阅所有必要的集线器并将事件广播到子范围以处理不同的需求。我确信这不是最佳实践，但对于我的小型应用程序来说可能就足够了。

myApp.controller('ApplicationController', ['$scope', 'logger', 'AuthService', function ($scope, logger, AuthService) {

$.connection.hub.url = serverUrl;
$.connection.hub.logging = true;

$.connection.testhub.client.getStaff = function (value) {
    $scope.$broadcast('someEvent', value);
};

$.connection.hub.start().done(function () {
    console.log('Hub connection open. ID: ' + $.connection.hub.id);
});

$.connection.hub.error(function (err) {
    console.log("Error: " + err);
});
}]);

所以我将广播以将事件发送到下游并发出以将它们从子控制器发送到父控制器。我想这样就可以了。