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

Question

我正在使用 Angular 和 asp.net 核心 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);
    });
  }
}

为什么我收到我的连接首先被标准化并且正确的连接至少持续一分钟才能开始？

更新

似乎我在某个地方遇到了 SignalR 无法解决的 WebSocket 问题，如上面的错误所示，wss://www.artngcore.com:4200/api/CRUD?id=0_uGI7io5iFN1SOv5Akfxw

我让它工作的唯一方法是指定传输协议，

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

如何解决 websocket 问题？

Answer 1

假设您已经实现了 SignalR，如文档中所示：Getting Started with SignalR on ASP.NET Core，您可能还需要配置主机服务器的配置。就我而言，我使用的是 Nginx，我必须为 signalR 集线器配置代理： SignalR Hubs Reverse Proxy configuraton

Answer 2

好的，整理好了。对于我的 angular，我使用代理来区分 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();
  }

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

What is the proper client-side configuration for SignalR in Angular?

signalr

angular

asp.net-core-2.1