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

【问题标题】：What is the proper client-side configuration for SignalR in Angular?Angular 中 SignalR 的正确客户端配置是什么？
【发布时间】：2019-01-15 00:58:22
【问题描述】：

我使用 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);
    });
  }
}

为什么我收到我的连接首先被规范化并且正确的连接在开始前至少持续一分钟？

更新

似乎我在某处有一个 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 问题？

【问题讨论】：

只有在附加调试器时才会发生这种情况吗？
no 与调试器无关，只是通过提供服务器 url 而不是使用代理对其进行排序，我的问题是 websocket 连接
@davidfowl，为什么调试器会导致问题？

标签： angular signalr asp.net-core-2.1

【解决方案1】：

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

【讨论】：

【解决方案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();
  }

【讨论】：