Question

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

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

ASP.NET Core

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参数被忽略，因此会触发协商。但是，在SignalR的ASP.NET核心版本中不再支持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.0.0-preview1-final

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

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版本的客户端软件包并不完全与服务器端软件包一样：

当preview1出现时，JavaScript客户端出现了一个小问题发布后需要更新，所以最新版本的 JavaScript客户端是1.0.0-preview1-update1，但服务器是 1.0.0-preview1决赛。这些版本完全兼容。

Answer 2

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

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

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

文档仍然非常糟糕，但是我可以在我的项目中使用它，希望对您有所帮助。

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

ASP.NET Core

工作客户

Angular 4+客户端（非工作）

2 个答案: