Question

我试图将SignalR添加到我的Angular MVC应用程序中。我已经使用this文章作为起点，它有一个集线器代理工厂，它用于...代理集线器调用。我有所有设置，但我的服务器上的集线器无法与我的Angular代码通信。这是我的代码：

集线器代理工厂：

app.factory('hubProxy', ['$rootScope', 'signalRUrl', function ($rootScope, signalRUrl) {

    function hubFactory(hubName) {
        var connection = $.hubConnection(signalRUrl);
        var proxy = connection.createHubProxy(hubName);

        connection.start().done(function () { });

        return {
            on: function (eventName, callback) {
                proxy.on(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 hubFactory;
}]);

角度控制器：

angular.module('testApp').controller('testController', ['$scope', 'hubProxy', function ($scope, hubProxy) {
    var pendingPaymentsHub = hubProxy('pendingPaymentsHub');

    pendingPaymentsHub.on('onUpdatePendingPayment', function (data) {
        console.log('hub callback!');
    });
}]);

集线器：

[HubName("pendingPaymentsHub")]
public class PendingPaymentsHub : Hub
{
    private static IHubContext hub = GlobalHost.ConnectionManager.GetHubContext<PendingPaymentsHub>();

    public static void UpdatePendingPayment(PendingPaymentViewModel pendingPayment)
    {
        hub.Clients.All.onUpdatePendingPayment(pendingPayment);
    }
}

在更新完成后，我会从API控制器调用集线器。它被称为：

PendingPaymentsHub.UpdatePendingPayment(pendingPayment);

加载页面时，/signalr/negotiate和/signalr/start调用都成功运行（在浏览器开发工具中确认为200秒）。我还可以确认我的集线器中的UpdatePendingPayment方法是否受到调试的影响。我只是在前端得不到任何东西。为什么呢？

提前致谢。

更新需要说明的是，问题在于集线器代理工厂。当我在我的控制器中用以下内容替换工厂实现时，一切都按预期工作：

function initializeHub() {
    connection = $.hubConnection(signalRUrl);
    hub = connection.createHubProxy('pendingPaymentsHub');

    hub.on('onUpdatePendingPayment', function (data) {
        console.log('success');
    });

    connection.start();
};

Answer 1

尝试使用客户端的服务器端方法调用大写，即使它在客户端开始小写：

hub.Clients.All.OnUpdatePendingPayment(pendingPayment);

检查生成的代理以查看完成的方法映射，这是我发现大写问题的地方。

点Misspelled method, incorrect method signature, or incorrect hub name涵盖了这一点，代理使用camelCase：

[...]此外，SignalR使用驼峰式方法创建集线器代理，如适用于JavaScript，所以一个名为SendMessage的方法就可以了服务器将在客户端代理中调用sendMessage。

Answer 2

我一直在使用完全相同的教程，我相信问题是你必须调用connection.start（） - 后来为hubProxy对象定义.on（）方法。我不知道教程示例在这种情况下应该如何工作。

这是我的重做服务：

app.factory('hubProxy', ['$rootScope', 'serverUrl', function ($rootScope, serverUrl) {

    function backendFactory(hubName) {
        $.support.cors = true;
        var connection = $.hubConnection(serverUrl);
        var proxy = connection.createHubProxy(hubName);

        return {

            on: function (eventName, callback) {
                proxy.on(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);
                        }
                    });
                });
            },
            start: function(){
                connection.start().done(function () { });
            }
        };
    };

    return backendFactory;
}]);

然后你只需要在调用on（）方法后调用start（）：

app.controller('hubDataController', ['$scope', 'hubProxy',
    function ($scope, hubProxy) {

    var proxy = hubProxy('remoteHub');        

    proxy.on('broadcast', function (data) {
        console.log(data);
    });
    proxy.start();
}

]）;

Angular中的SignalR集线器代理无法正常工作

2 个答案: