如何在angular js中將SingalR與多個控制器一起使用

Question

我將在angular中使用SingalR； 我的要求是，只有一次會獲得連接ID作為單例模式並在單個應用程序中使用，因為在我的情況下，瀏覽器將首次加載，以便clientid保留控制器中的其余視圖。

因此，第一個問題是我創建了如下所示的工廠，但是當我使用該工廠時，出現錯誤：

未定義工廠。未捕獲ReferenceError：未定義signalRHubProxy（…）。

我已經完成了在服務器端設置所有索引的索引文件。

在給定的代碼中，我的問題是我該怎么辦。 任何示例代碼？

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

});

這是ServerSide Code HUB：

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