javascript - 如何在 angularjs 中将 SignalR 与多个 Controller 一起使用

Question

我将使用带 Angular SingalR；我的要求是只有一次将连接 ID 作为单例模式获取并在单个应用程序中使用，因为在我的情况下浏览器将第一次加载，以便 clientid 维护 Controller 中的其余 View 。

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

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

我已经在服务器端完成了所有包含索引的 js 文件设置。

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

1. 为什么不获取工厂方法。
2. 当任何消息激活时，我如何在每个 Controller 上使用 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 事件触发器，但上面我想在多个 Controller 上使用以下结构。这是我的代码。

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']);

现在我想在我的 Controller 中使用这个工厂，但出现了我上面提到的错误。

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