javascript - 没有从 SignalR 跨域返回任何消息，但 ping 正常

Question

我引用了我之前的一篇文章，其中我获得了一些连接 SignalR 跨域 Here 的帮助，并且我使用 This 示例来构建我的 POC。但是，我使用的示例是针对单个

我仍在试图弄清楚 SignalR 的魔力是如何工作的，我想我理解了其中的大部分，但不知何故我没有让它发挥作用。我的代码可以很好地连接到集线器，如果我保持打开状态，我将继续从发送的 ping 中获取 pong 结果。

但是，我似乎没有从我的中心得到任何回复。这是我的所有代码，希望有人能指出我正确的方向:

启动.cs:

public partial class Startup
{
    public void Configuration(IAppBuilder app)
    {
        .
        .
        .

        app.UseCors(_CorsOptions.Value);

        // Branch the pipeline here for requests that start with "/signalr"
        app.Map("/signalr", map =>
        {
            map.RunSignalR(new HubConfiguration { EnableDetailedErrors = true });
        });
    }

    private static Lazy<CorsOptions> _CorsOptions = new Lazy<CorsOptions>(() =>
    {
        return new CorsOptions
        {
            PolicyProvider = new CorsPolicyProvider
            {
                PolicyResolver = context =>
                {
                    var policy = new CorsPolicy();

                    foreach (string allowedCOrsOrigin in ConfigurationManager.AppSettings["AllowedCORS-Origins"].Split(',').ToArray())
                    {
                        if(!string.IsNullOrEmpty(allowedCOrsOrigin) && !policy.Origins.Contains(allowedCOrsOrigin))
                        {
                            policy.Origins.Add(allowedCOrsOrigin);
                        }
                    }

                    policy.AllowAnyMethod = true;
                    policy.AllowAnyHeader = true;
                    policy.SupportsCredentials = true;
                    return Task.FromResult(policy);
                }
            }
        };
    });
}

_SignalBase.cs:

public abstract class _SignalRBase<THub> : ApiController where THub : IHub
{
    private readonly Lazy<IHubContext> _hub = new Lazy<IHubContext>(
        () => GlobalHost.ConnectionManager.GetHubContext<THub>()
    );

    protected IHubContext Hub
    {
        get { return _hub.Value; }
    }
}

FooHub.cs:

[HubName("foos")]
public class FooHub : Hub { }

FooController.cs:

[RoutePrefix("api/foo")]
public class FooController : _SignalRBase<FooHub>
{
    public IHttpActionResult Bar(FooDTO foo)
    {
        // notify all connected clients            
        Microsoft.AspNet.SignalR.GlobalHost.ConnectionManager.GetHubContext<FooHub>()
            .Clients.All.newFoo(foo);

        return Ok(foo);
    }
}

FooDTO.cs:

public class FooDTO
{
    public int First { get; set; }

    public int Second { get; set; }
}

发件人.html

<div class="container">
    <div class="row">
        <div class="col-md-12">
            <button type="button" ng-click="DoSignalR()" ></button>
        </div>
    </div>
</div>

<!-- Reference the autogenerated SignalR hub script -->
<script src="//localhost:31374/signalr/hubs"></script>

接收器.html:

<div class="container">
    <div class="row">
        <div class="col-md-12">
            <div>
                <ul>
                    <li ng-repeat="foo in receivedFoos">
                        Foo {{foo.First}} &amp; {{foo.Second}}
                    </li>
                </ul>
            </div>
        </div>
    </div>
</div>

<!-- Reference the autogenerated SignalR hub script -->
<script src="//localhost:31374/signalr/hubs"></script>

Angular Controller :

.controller('SignalRCtrl', function ($scope, TESTSignalR, $rootScope) {    
    $scope.receivedFoos = [];

    var newFoo = function(data) {
        console.log("newFoo function");
        $scope.$apply(function () {
            $scope.receivedFoos.push(data);
        });
    };

    TESTSignalR.initialize(newFoo);

    //  Sender    
    $scope.DoSignalR = function() {        
        var FooDTO = {
            "First": 1234,
            "Second": 3456
        };

        TESTSignalR.DoSignalR(FooDTO);
    };
})

Angular 服务:

.factory('TESTSignalR', function($http, APIPath, $rootScope) {    
    var proxy = null;

    var initialize = function (callback) {

        // fetch connection object and create proxy
        var connection = $.hubConnection();
        this.proxy = connection.createHubProxy('foos');

        $.connection.hub.url = "http://localhost:31374/signalr";

        // start connection
        $.connection.hub.start({ xdomain: true })
            .done(function () {
                console.log('Connected to signalR. connectionId : ' + $.connection.hub.id); 
            })
            .fail(function () {
                console.log('Could not connect to signalR!');
            });

        var hubConnection = $.connection.foos;

        hubConnection.client.newFoo = function(data) {
            callback(data);
        };
    };

    var DoSignalR = function (foo) {
        var url = "http://localhost:31374/api/foo/bar";

        $http.post(url, foo)
        .success(function(response) {
            console.log(response);
        })
        .error(function(error) {
        console.log(error);
        });
    }

    return {
        initialize: initialize,
        DoSignalR: DoSignalR
    };
})

编辑:我更新了上面的代码以反射(reflect)@Sal-Niro 指出的最新更改。现在应该一切正常

Answer 1

看起来您正在尝试在 FooController 的上下文中调用 Hub 方法，您将进行稍微不同的调用来执行此操作。您是否有理由从 Controller 执行此操作而不从客户端调用服务器集线器方法？如果您需要从 Controller 调用，请尝试以下操作

[RoutePrefix("api/foo")]
public class FooController : ApiController
{
    public IHttpActionResult Bar(FooDTO foo)
    {
        // notify all connected clients
        GolbalHost.ConnectionManager.GetHubContext<FooHub>().Clients.All.newFoo(foo);

        return Ok(foo);
    }
}

也有可能您没有完全正确地将代理引用到 [HubName("foos")] 中心。观察您的 newFoo 实现，尝试以下操作

var hubConnection = $.connection.foos; 

hubConnection.client.newFoo = function(data) {
    // data
}