Angular SignalR HubConnection 给出“协议错误：未知传输”。答案

【问题标题】：Angular SignalR HubConnection gives 'Protocol error: Unknown transport.'Angular SignalR HubConnection 给出“协议错误：未知传输”。
【发布时间】：2018-06-16 22:22:00
【问题描述】：

我有一个在 http://localhost:8090/ 上运行的 Owin 自托管 API。我使用以下代码创建了一个 signalR 集线器：

app.UseCors(CorsOptions.AllowAll); //Inside Startup.cs
app.MapSignalR(); //Inside Startup.cs

//Inside own class file
public class SensorHub: Hub
{
    public void Send(string message)
    {
        Console.WriteLine("Send called with message argument: {0}", message);
        Clients.All.addMessage(message);
    }
}

我还制作了另一个 C# 客户端来测试我的 signalR 集线器，我从集线器收到了响应，所以我认为它可以正常工作并且运行良好。见以下代码：

//My working C# client
static void Main(string[] args)
{
    ServicePointManager.DefaultConnectionLimit = 10;
    var url = "http://localhost:8090/signalr";
    var hub = new HubConnection(url);

    var proxy = hub.CreateHubProxy("SensorHub");
    proxy.On("addMessage", message => Console.WriteLine("Data received: " + message));

    // Start hub connection
    Console.WriteLine("Starting hub connection at: {0}", url);
    hub.Start().Wait();
    Console.WriteLine("Hub connected with transport: {0}", hub.Transport.Name);

    // Call hub
    var list = new List<string>
    {
        "value1",
        "value2",
        "value3"
    };

    foreach (var value in list)
    {
        Console.WriteLine("Sending data to hub connection: {0}", value);
        proxy.Invoke("Send", value);
    }

    Console.Read();
}

我想与我的后端传感器集线器和我的 Angular 网站建立连接。我安装了@aspnet/signalr-client 包。在我的角度代码下方：

//My failing angular client
ngOnInit() {
    let connection = new HubConnection('http://localhost:8090/signalr/sensorhub');

    connection.on('addMessage', data => {
      console.log(data);
    });

    connection.start().then(() => console.log('started'));
}

当我通过connection.Start() 行后，我会收到“400 Bad Request error”，其中包含以下消息：协议错误：未知传输。

注意：我不使用 .NET Core！有任何想法吗？

【问题讨论】：

标签： c# angular asp.net-web-api signalr angular-cli

【解决方案1】：

似乎 Angular 客户端说他在提供程序 url 上找不到集线器。

尝试在 api 上映射信号器集线器，像这样...

Startup.cs

 app.UseSignalR(routes =>
 {
      routes.MapHub<SensorHub>("sensorhub");
 });

在客户端上，尝试从 url 路径中删除“SignalR”。我对此没有太多支持，但我总是使用基本 uri。

ngOnInit() {
    let connection = new HubConnection('http://localhost:8090/sensorhub'); //without the path signalr

    connection.on('addMessage', data => {
      console.log(data);
    });

    connection.start().then(() => console.log('started'));
}

【讨论】：

我的IAppBuilder 上没有UseSignalR。我认为这是 .NET Core 的一部分，不是吗？
另外，当我弄乱 url 时，它会从 HTTP 错误 400 变为 404。所以我猜 angular 可以找到我的集线器，只是没有使用正确的协议，但我不知道如何更改那。我想我会尝试另一个 angular-package 来访问我的集线器。

【解决方案2】：

我猜问题出在@aspnet/signalr-client 包是为 ASP.NET Core 构建的。

因此，我最终使用了另一个名为 ngx-signalr-hubservice 的纱线包。它有很好的文档记录并且（几乎）开箱即用。

试试看：https://github.com/steveadoo32/ngx-signalr-hubservice

【讨论】：

如何通过该包传递查询字符串？