Angular中SignalR的正确客户端配置是什么？

Question

我将Angular和asp.net core 2.1.3用作后端。我添加了SingalR配置。如下的程序包，

services.AddSignalR((hubOptions) => {
                    hubOptions.EnableDetailedErrors = true;
                    // hubOptions.KeepAliveInterval = TimeSpan.FromMinutes(1);
                })
                .AddJsonProtocol(options => {
                    options.PayloadSerializerSettings.ContractResolver =
                        new DefaultContractResolver();
                }).AddHubOptions<ChatHub>(options => {
                    options.EnableDetailedErrors = true;
                });

 app.UseSignalR(routes => {
                routes.MapHub<ChatHub>("/api/CRUD");
            });

对于Angular，我正在使用"@aspnet/signalr": "^1.0.2",

我的问题出在客户端配置上。在连接开始之前至少要持续一分钟，

我正在使用服务来启动连接，然后我在组件中订阅了该值，

这是我的服务

@Injectable()
export class SignalRService {
  value = new Subject();
  connectionEstablished = new Subject<Boolean>();
  private hubConnection: HubConnection;
  private baseUrl: string = null;

  constructor(private configService: ConfigService) {
    this.baseUrl = this.configService.getApiURI();
    this.createConnection('CRUD');
    this.startConnection();
    this.registerOnServerEvents();
  }

  public createConnection(hubEndPoit) {
    this.hubConnection = new HubConnectionBuilder()
      .withUrl(this.baseUrl + hubEndPoit)
      .configureLogging(signalR.LogLevel.Information)
      .build();
  }

  private startConnection(): void {
    this.hubConnection
      .start()
      .then(() => {
        console.log('Hub connection started');
        this.connectionEstablished.next(true);
      })
      .catch(err => {
        console.log('Error while establishing connection, retrying...', err);
        setTimeout(this.startConnection(), 5000);
      });
  }

  private registerOnServerEvents(): void {
    this.hubConnection.on('ReceiveMessage', (data: any) => {
      this.value.next(data);
    });
  }
}

为什么我会先收到我的连接已被规范化并且正确的连接至少持续一分钟才开始的提示？

更新

似乎上面的错误wss://www.artngcore.com:4200/api/CRUD?id=0_uGI7io5iFN1SOv5Akfxw

中显示了SignalR无法解决的WebSocket问题。

使它起作用的唯一方法是指定传输协议，

 public createConnection(hubEndPoit) {
    this.hubConnection = new HubConnectionBuilder()
      .withUrl(this.baseUrl + hubEndPoit, signalR.HttpTransportType.ServerSentEvents)
      .configureLogging(signalR.LogLevel.Information)
      .build();
  }

如何解决websocket问题？

Answer 1

假设您已经按照文档Getting Started with SignalR on ASP.NET Core中的说明实施了SignalR，则可能还需要配置主机服务器的配置。就我而言，我正在使用Nginx，并且必须为signalR集线器配置代理： SignalR Hubs Reverse Proxy configuraton

Answer 2

好，整理一下。 出于我的角度，我使用代理来区分HTTP请求，由于我没有得到404响应的唯一原因，我无知地没有考虑它。

 "/api": {
    "target": {
      "host": "localhost",
      "protocol": "https:",
      "port": 5001
    },
    "secure": false,
    "logLevel": "debug",
    "changeOrigin": true
  },

所以我将路线更改为：

 app.UseSignalR(routes => {
                routes.MapHub<ChatHub>("/hub/CRUD");
            });

和我的客户电话

public createConnection(hubEndPoit) {
    this.hubConnection = new HubConnectionBuilder()
        .withUrl('https://localhost:5001/' + 'hub/' + hubEndPoit)
      .configureLogging(signalR.LogLevel.Information)
      .build();
  }