将 Angular 4+ 应用程序与 ASP.NET Core SignalR 集成

Question

我正在尝试从 this tutorial 开始将 Angular 4 + SPA 与 ASP.NET Core SignalR 集成。

我已经设法使用简单的 Web 应用程序（jquery + signalR 客户端）与 ASP.NET Core 应用程序集成，因此服务器端配置似乎没问题。

ASP.NET 核心

Microsoft.AspNetCore.SignalR 版本 1.0.0-alpha2-final

Startup.cs

app.UseSignalR(routes =>
{
    routes.MapHub<ChatHub>("chat");
});

ChatHub.cs

public class ChatHub: Hub
{
    public void Send(string name, string message)
    {
        // Call the broadcastMessage method to update clients.
        Clients.All.InvokeAsync("broadcastMessage", name, message + " from SignalR hub");
    }

    public override Task OnConnectedAsync()
    {
        Clients.All.InvokeAsync("broadcastMessage", "system", $"{Context.ConnectionId} joined the conversation");
        return base.OnConnectedAsync();
    }

    public override Task OnDisconnectedAsync(System.Exception exception)
    {
        Clients.All.InvokeAsync("broadcastMessage", "system", $"{Context.ConnectionId} left the conversation");
        return base.OnDisconnectedAsync(exception);
    }
}

工作客户

我引用signalr-client-1.0.0-alpha2-final.js

// Web sockets do not work, most probably due to IIS Express I am using for testing
var transport = signalR.TransportType.LongPolling;
var connection = new signalR.HubConnection(`http://localhost:60431/chat`, { transport: transport });

connection.start();

这很好用。

Angular 4+ 客户端（不工作）

import { Component, OnInit } from '@angular/core';
import * as signalR from '@aspnet/signalr';

export class SignalrTestComponent implements OnInit {

  private hubConnection: signalR.HubConnection;

  ngOnInit() {
    let transportType = signalR.TransportType.LongPolling;
    this.hubConnection = new signalR.HubConnection('http://localhost:60431/chat', { transport: transportType });

    this.hubConnection.start()
      .then(() => {
        console.log('Hub connection started')
      })
      .catch(() => {
        console.log('Error while establishing connection')
      });
  }

我将收到“建立连接时出错”。该错误与客户端尝试访问 http://localhost:60431/chat/negotiate 的事实有关，这会返回错误的响应（一些虚拟文本与不正确的路由相关联，而不是预期的 JSON）。

我的假设是 transport 参数被忽略，因此触发了协商。但是，ASP.NET Core 版本的 SignalR 不再支持 AFAIK 协商。

package.json 可能相关的依赖项

"@angular/common": "^5.2.0",
"@angular/compiler": "^5.2.0",
"@angular/core": "^5.2.0",
"@angular/http": "^5.2.0",
"@angular/platform-browser": "^5.2.0",
"@angular/platform-browser-dynamic": "^5.2.0",
"@aspnet/signalr": "^1.0.0-preview1-update1",

问题：在使用 Angular2+ 客户端时，如何正确配置 HubConnection 以包含所需的协议？

Answer 1

好的，我在 project's github issue section 上获得了帮助。我的服务器端（ASP.NET Core SignalR）版本不是最新的，因此我遇到了问题：

1. 升级到1.0.0-preview1-final

2. 更改了服务器端代码以适应新版本（即修复编译错误）：

   public class ChatHub: Hub
   {
       public void Send(string message)
       {
            // Call the broadcastMessage method to update clients.
            Clients.All.SendAsync("broadcastMessage", message + " from SignalR hub");
       }
    }
   

作为旁注，@latest 版本的客户端软件包与服务器端软件包并不完全相同：

预览 1 时 JavaScript 客户端出现小问题 已发布，需要更新，所以最新版本的 JavaScript 客户端是 1.0.0-preview1-update1，但服务器是 1.0.0-preview1-final。这些版本完全兼容。

Answer 2

新的@aspnet/signalr 文档说要使用以下内容，而不是this.hubConnection.start()...

const url = 'http://www.something.com';

this.hubConnection = new signalR.HubConnectionBuilder()
  .withUrl(url)
  .build();

文档仍然很糟糕，但我在我的项目中使用它，希望这会有所帮助。