angularjs - 如何动态地将集线器添加到 SignalR 并具有不同的作用域

Question

我正在尝试使用小部件构建仪表板(作为指令构建)。我希望在稍后阶段能够动态添加小部件，但我只希望事件小部件(和集线器)接收数据，因此，如果小部件不活动，我不希望集线器已注册。

例如，在用户使用应用程序的持续时间内，将会有一个全局 signalR 上下文以及特定于页面的上下文，这些上下文将根据需要生成/销毁。

这是我最好的 ATM 机...但不起作用

工厂

   (function () {
    'use strict';

    angular.module('app').factory('hubFactory', ['permissionSvc', 'common', hubFactory]);

    function hubFactory(permissionSvc, common) {

        var connection = [];

        return {
            context: function (name) {

                if (!connection[name]) {
                    var conn = $.connection;
                    conn.hub.url = common.serviceUrl + '/signalr';
                    conn.hub.start();

                    conn.prototype.addHub = function (hubName, options) {

                        // defaults
                        var opts = {
                            authorize: true
                        };

                        angular.extend(opts, options);

                        if (opts.authorize) {
                            permissionSvc.createPrefilter();
                        }

                        var hub = conn[hubName];

                        var run = function () {
                            hub.server.initialise();
                        };

                        return {
                            hub: hub,
                            run: run
                        };
                    };

                    connection[name] = conn;
                }

                return connection[name]();
            }
        };
    }
})();

小部件指令 Controller

 controller: function ($scope) {               

               var context = hubFactory.context('dashboard');

               var instance = context.addHub('agreementApprovalsHub');

               instance.hub.client.getAllUnapprovedAgreements = function (data) {

                    $scope.data = data;
                };

               instance.run();
            } 

需要在start的done方法中调用以下内容...但是如果我想在页面加载时启动连接，然后根据需要附加集线器(或者我的想法是错误的？)

存在各种问题:

var run = function () { hub.server.initialise(); };

对比

var run = function () { conn.hub.start().done(function() { hub.server.initialise(); }); };

TBH，感觉就像我正在屠宰代码，并且在这个阶段可能需要从头开始..我完全不知道如何去做这一切，以及是否可能。

Answer 1

我想我有一个更优雅的解决方案。

服务

 app.factory("signalrFactory", function ($rootScope, $http, $timeout) {
    var factory = {};
    factory.connection = $.connection;

    var startDoneFunctions = [];
    var debounce;

    factory.start = function (done) {
        factory.connection.hub.stop();

        if (done) {
            if (startDoneFunctions.indexOf(done) == -1) {
                startDoneFunctions.push(done);
            }
        }
        if (debounce) $timeout.cancel(debounce);
        debounce = $timeout(function () {
            factory.connection.hub.start().done(function () {
                for (var x = 0; x < startDoneFunctions.length; x++) {
                    startDoneFunctions[x]();
                }
            });
        }, 100);
    };

    return factory;
});

使用

controller('customerSummary', function ($scope, signalrFactory) {
        $scope.customerHub = signalrFactory.connection.customerHub;
        $scope.customer;
        $scope.beingEditedText = "";



        $scope.customerHub.client.beingEdited = function (text) {
            $scope.beingEditedText = text;
        };
        $scope.customerHub.client.doneEditing = function () {
            $scope.beingEditedText = "";
        };

        $scope.customerHub.client.updateCustomer = function (customer) {
            $scope.customer = customer;
            $scope.$apply();
        };

        $scope.init = function (id) {
            signalrFactory.start(function () {
                $scope.customerHub.server.getCustomer(id);

            });
        };
    });

这种方式允许在需要时添加，而不必在引导时添加每个集线器。我现在可以从任何地方使用不同的 did() 方法。