CODEWITHSUNDEEP
angularsignalrasp.net-core-2.1
JSON
JSON

Reputation: 1623

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

I am using Angular with asp.net core 2.1.3 as backend. I added SingalR config. a package as following,

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");
            });

and for Angular I am using "@aspnet/signalr": "^1.0.2",

My issue lies in the client-side config. where the connection lasts at least a minute before it starts,

enter image description here

I am using a service for starting the connection and then I subscribe to the value in my component,

this is my service,

@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);
    });
  }
}

Why am I receiving that my connection is first being normalized and the proper connection lasts at least a minute before it starts?

Update

It seems that I have a WebSocket issue somewhere that SignalR is failing to resolve, as it is shown in the error above, wss://www.artngcore.com:4200/api/CRUD?id=0_uGI7io5iFN1SOv5Akfxw

The only way I got it to work is by specifying the transport protocol,

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

How can I resolve the websocket issue?

Upvotes: 2

Views: 2814

Answers (2)

JSON
JSON

Reputation: 1623

ok, sorted out. for my angular, I am using a proxy to differ the HTTP requests, ignorant enough not to consider it for the only reason that I haven't gotten a 404 response.

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

So I changed the route to:

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

and my client call,

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

Upvotes: 0

Wendell
Wendell

Reputation: 180

Assuming that you have already implemented the SignalR as demonstrated here in the documentation: Getting Started with SignalR on ASP.NET Core, you might also need to configure your host server's configuration. In my case, I'm using Nginx and I have to configure the proxy for the signalR hubs: SignalR Hubs Reverse Proxy configuraton

Upvotes: 3

Related Questions