Question

我正在尝试在我的Web API上构建一个通知服务，通知JavaScript（Aurelia）客户端（WebApp）。我的Web API和WebApp位于不同的域中。

我有一个简单的NotificationHub：

public class NotificationHub:Hub
{
    public void NotifyChange(string[] values)
    {
        Clients.All.broadcastChange(values);
    }
}

我在Web API的Startup中配置SignalR，如下所示：

public void Configuration(IAppBuilder app)
{
    HttpConfiguration httpConfig = new HttpConfiguration();

    var cors = new EnableCorsAttribute("http://localhost:9000", "*", "*");
    httpConfig.EnableCors(cors);

    app.MapSignalR();

    WebApiConfig.Register(httpConfig);
    ...
}

在我的WebApp中，我尝试从我的Web API访问signalr/hubs，如下所示：

Promise.all([...
        System.import('jquery'),
        System.import('signalr'), ...
            ])
       .then((imports) => {
            return System.import("https://localhost:44304/signalr/hubs");
            });

我还在meta中添加了config.js部分：

System.config({
    ...
    meta: {
        "https://*/signalr/hubs": { //here I also tried with full url
            "format": "global",
            "defaultExtension": false,
            "defaultJSExtension": false,
            "deps": ["signalr"]
        }
    }
});

尽管有这些配置，我仍然有以下问题：

来自WebApp的signalr/hubs请求为https://localhost:44304/signalr/hubs.js，并返回HTTP 404。请注意，浏览https://localhost:44304/signalr/hubs会返回hubs脚本。
在$.connection("https://localhost:44304/signalr").start()，我收到以下错误：

XMLHttpRequest无法加载https://localhost:44304/signalr/negotiate?clientProtocol=1.5&_=1471505254387。 No＆＃39; Access-Control-Allow-Origin＆＃39;标头出现在请求的资源上。起源＆＃39; http://localhost:9000＆＃39;因此不允许访问。

请让我知道我在这里缺少什么？

更新使用适当的CORS配置和@kabaehr建议的gist，我现在可以连接到SignalR集线器。但是，广播（推送通知）仍然无效。

我的SignalR配置：

public static class SignalRConfig
{
    public static void Register(IAppBuilder app, EnableCorsAttribute cors)
    {

        app.Map("/signalr", map =>
        {
            var corsOption = new CorsOptions
            {
                PolicyProvider = new CorsPolicyProvider
                {
                    PolicyResolver = context =>
                    {
                        var policy = new CorsPolicy { AllowAnyHeader = true, AllowAnyMethod = true, SupportsCredentials = true };

                        // Only allow CORS requests from the trusted domains.
                        cors.Origins.ForEach(o => policy.Origins.Add(o));

                        return Task.FromResult(policy);
                    }
                }
            };
            map.UseCors(corsOption).RunSignalR();
        });
    }
}

我在Startup中使用它如下：

var cors = new EnableCorsAttribute("http://localhost:9000", "*", "*");
httpConfig.EnableCors(cors);

SignalRConfig.Register(app, cors);

WebApiConfig.Register(httpConfig);

我正在尝试按如下方式发送通知：

GlobalHost.ConnectionManager.GetHubContext<NotificationHub>().Clients.All.broadcastChange(new[] { value });

但是，broadcastChange未通知我的客户。我假设当我使用gist时，我不必明确导入https://localhost:44304/signalr/hubs。

Answer 1

这只是为了分享我的发现以及为我解决问题的原因。

首先，signalr/hubs只是服务器端代码中自动生成的代理。如果您可以创建自己的SignalR代理客户端，则无需使用该代理。下面是一个基于@kabaehr提到的gist创建的简单SignalR客户端。 SignalR客户端在性质上相当简单。

export class SignalRClient {

    public connection = undefined;
    private running: boolean = false;

    public getOrCreateHub(hubName: string) {
        hubName = hubName.toLowerCase();
        if (!this.connection) {
            this.connection = jQuery.hubConnection("https://myhost:myport");
        }

        if (!this.connection.proxies[hubName]) {
            this.connection.createHubProxy(hubName);
        }

        return this.connection.proxies[hubName];
    }

    public registerCallback(hubName: string, methodName: string, callback: (...msg: any[]) => void,
        startIfNotStarted: boolean = true) {

        var hubProxy = this.getOrCreateHub(hubName);
        hubProxy.on(methodName, callback);

        //Note: Unlike C# clients, for JavaScript clients, at least one callback 
        //      needs to be registered, prior to start the connection.
        if (!this.running && startIfNotStarted)
            this.start();
    }

    start() {
        const self = this;
        if (!self.running) {
            self.connection.start()
                .done(function () {
                    console.log('Now connected, connection Id=' + self.connection.id);
                    self.running = true;
                })
                .fail(function () {
                    console.log('Could not connect');
                });
        }
    }
}

这里要注意的一件重要事情是，对于JavaScript SignalR客户端，我们需要在开始连接之前注册至少一个回调方法。

使用此类客户端代理，您可以使用它，如下所示。虽然下面的代码示例一般使用aurelia-framework，但attached()中的SignalR部分与Aurelia无关。

import {autoinject, bindable} from "aurelia-framework";
import {SignalRClient} from "./SignalRClient";

@autoinject
export class SomeClass{

    //Instantiate SignalRClient.
    constructor(private signalRClient: SignalRClient) {
    }

    attached() {
        //To register callback you can use lambda expression...
        this.signalRClient.registerCallback("notificationHub", "somethingChanged", (data) => {
            console.log("Notified in VM via signalr.", data);
        });

        //... or function name.
        this.signalRClient.registerCallback("notificationHub", "somethingChanged", this.somethingChanged);
    }

    somethingChanged(data) {
        console.log("Notified in VM, somethingChanged, via signalr.", data);
    }
}

这是解决方案的关键。有关与启用CORS相关的部分已在问题中提及。有关更多详细信息，请参阅以下链接：

ASP.NET SignalR Hubs API Guide - JavaScript Client

无法使SignalR，Web API和SystemJS协同工作

1 个答案: