如何在 angularjs 中将 SignalR 与多个控制器一起使用

Question

我将使用带角度的 SingalR；我的要求是只有一次将连接 id 作为单例模式获取并在整个应用程序中使用，因为在我的情况下，浏览器将第一次加载，以便 clientid 为控制器中的剩余视图维护。

所以第一个问题是我创建了如下所示的工厂，但是当我使用这个工厂时出现错误：

undefined factory.Uncaught ReferenceError: signalRHubProxy is not defined(…).

我已经在服务器端设置了索引上的每个包含 js 文件。

在给定的代码中，我的问题是我该怎么做。有示例代码吗？

1. 为什么不获取工厂方法。
2. 当任何消息被激活时，如何在每个控制器上使用 addChatMessage 侦听器。

希望一切顺利。

如果我使用此代码工作正常，但我的场景是我上面定义的场景，还有一件事。

如果我在这样简单的索引页面上。

index.html

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

            var chat = $.connection.communicationHub;            
            chat.client.addChatMessage = function (userId, message) {
                debugger
                console.log("wajih");
            };

            $.connection.hub.start().done(function () {
               debugger
               $("#clientId").text($.connection.hub.id);             
            });
        });

当我发送任何消息 addmessage 事件触发器时， 但是上面我想在多个控制器上使用以下结构。 这是我的代码。

RealTimeFactory.js Factory:-
 'use strict';

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

singalR.factory('signalRHubProxy', function ($rootScope) {
    function signalRHubProxyFactory(serverUrl, hubName, startOptions, $rootScope) {
        var connection = $.hubConnection();
        var proxy = connection.createHubProxy(hubName);
        connection.start(startOptions).done(function () {
              debugger
        });

        return {
            on: function (eventName, callback) {
                proxy.on(eventName, function (result) {
                    $rootScope.$apply(function () {
                        if (callback) {
                            callback(result);
                        }
                    });
                });
            },
            off: function (eventName, callback) {
                proxy.off(eventName, function (result) {
                    $rootScope.$apply(function () {
                        if (callback) {
                            callback(result);
                        }
                    });
                });
            },
            invoke: function (methodName, callback) {
                proxy.invoke(methodName)
                    .done(function (result) {
                        $rootScope.$apply(function () {
                            if (callback) {
                                callback(result);
                            }
                        });
                    });
            },
            connection: connection
        };
    };

    return signalRHubProxyFactory;
});

My Global controller:-

var app = angular.module('sgApp.controllers', ['signalRHubProxy']);

现在我想在我的控制器中使用这个工厂，但如上所述出现错误。

ChatController.js

app.controller('ChatCtrl', function ($rootScope, $scope, signalRHubProxy) {

    //var clientHubProxy = signalRHubProxy(
    //   signalRHubProxy.defaultServer, 'communicationHub',
    //       { logging: true });

    //clientHubProxy.on('addChatMessage', function (data) {
    //    debugger
    //    var x = clientHubProxy.connection.id;
    //});

});

HomeController.js

app.controller('HomeCtrl', function ($rootScope, $scope, signalRHubProxy) {

    //var clientHubProxy = signalRHubProxy(
    //   signalRHubProxy.defaultServer, 'communicationHub',
    //       { logging: true });

    //clientHubProxy.on('addChatMessage', function (data) {
    //    debugger
    //    var x = clientHubProxy.connection.id;
    //});

});

这里是服务器端代码集线器：-

public class CommunicationHub : Hub
    {
        public void SendTo(string userId, string message)
        {
            Clients.Client(userId).addChatMessage(userId, message);
        }
    }

Answer 1

'use strict';

var SignalRWPFactory = function ($rootScope, DataService) {
    var _this = this;
    _this.rootScope = $rootScope;
    _this.dataService = DataService;


    _this.init = function (myHub, fn) {
        var _this = this;
        $.connection.hub.url = "http://localhost:5207/signalr";//i think in the startup we had specified this

        _this.create(myHub, fn);
        _this.update(myHub, fn);
        _this.deleteItem(myHub, fn);

        $.connection.hub.start();
    },
    _this.create = function (myHub, fn) {
        var _this = this;
        myHub.client.language = function (response) {
            if (response != "") {                
                $rootScope.$apply(function () {
                    fn(response, 'create');
                });
            }
        };
    },
    _this.update = function (myHub,fn) { 
        var _this = this;
        myHub.client.languageUp = function (response) {
            if (response != "") {                
                $rootScope.$apply(function () {
                    fn(response, 'update');
                });
            }
        };
    },
    _this.deleteItem = function (myHub, fn) {
        var _this = this;
        myHub.client.languageDel = function (response) {
            if (response != "") {                
                $rootScope.$apply(function () {
                    fn(response, 'deleteItem');
                });
            }
        };
    }

    return {
        init: _this.init,
        create: _this.create,
        update: _this.update,
        deleteItem: _this.deleteItem
    };
};


SignalRWPFactory.$inject = ['$rootScope', 'DataService'];
webAdmin.factory('SignalRWPFactory', SignalRWPFactory);



**> here is the usage from my end
> 
> in the controller use like this**

 // Declare a proxy to reference the hub.
        var myHub = $.connection.languageHub;
        _this.signalRWPFactory.init(myHub, signalRCallback);
        function signalRCallback(data, callType) {
            _this.data = _this.dataService.handleSignalRData(_this.data, data, callType); //it will delete the data from data array                            
            //  $scope.$apply();
        }

_this.data is the array object you can handle create separate service.

**

> here is the data handler method as well

**

handleSignalRData: function (dataArr, data, type) {
        var _this = this;

        //sometimes its coming as object
        if (Object.prototype.toString.call(data) === '[object Array]') {
            data = data[0];
        }

        switch (type) {
            case 'create':
                dataArr.push(data);
                break;
            case 'update':
                dataArr = _this.update(dataArr, data); //it will update the row                                                       
                break;
            case 'deleteItem':
                dataArr = _this.deleteByAttr(dataArr, "id", data.id); //it will update the row                                                       
                break;
            default:
        }
        return dataArr;
    }