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

Question

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,

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?

no had nothing to do with the debugger, just sorted it out by providing the server url instead of using the proxy, my issue was the websocket connection — JSON
– JSON, Commented Aug 8, 2018 at 7:03

Wendell · Accepted Answer · 2018-08-08 02:09:50Z

3

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

answered Aug 8, 2018 at 2:09

Wendell

1801 silver badge9 bronze badges

Sign up to request clarification or add additional context in comments.

Comments

JSON · Accepted Answer · 2018-08-08 02:44:25Z

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

Collectives™ on Stack Overflow

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

2 Answers 2

Comments

Comments

Your Answer

Hot Network Questions

Collectives™ on Stack Overflow

2 Answers 2

Comments

Comments

Your Answer

Sign up or log in

Post as a guest

Related