Azure Signalr service refusing to add connection to group

Question

I have been developing an api in .NET Core and a front end in Angular. In localhost, I had signalr set up my setting up a Hub in the API:

Program.cs

builder.Services.AddSignalR()
.AddJsonProtocol(options =>
{
    options.PayloadSerializerOptions.Converters
           .Add(new JsonStringEnumConverter());
});

...

app.MapHub<NotificationHub>("/notifications");

I had the front end listening:

  private options: signalR.IHttpConnectionOptions = {
    accessTokenFactory: () => {
      return this.userService.authToken as string;
    },
    skipNegotiation: true,
    transport: signalR.HttpTransportType.WebSockets
  };

  private hubConnection: signalR.HubConnection | undefined
  public startConnection = () => {
    this.hubConnection = new signalR.HubConnectionBuilder()
      .withUrl(`${environment.backendApi}/notifications`, this.options)
      .configureLogging(signalR.LogLevel.Trace)
      .build();
    this.hubConnection
      .start()
      .then(() => console.log("notification connection started"))
      .catch(err => console.log('Error wgile start candidate connection: ' + err));
  }

...

public addApplicationListener = () => {
    this.hubConnection?.on('notifications', (data) => {
      console.log(data);
    });
  }

But since connecting my backend to my Azure SignalR Service, I can get a connection from both apps to the WebSocket, but when I try and add the angular connection to a group (in the API via the Hub), I get the following warning in my azure service ConnectionIsInvalidOnJoiningGroup. So when I send a message to the group, it complains about having no connections in the group.

https://learn.microsoft.com/en-us/azure/azure-signalr/concept-service-mode#choose-the-right-service-mode

This link seems to suggest that the Default service is the correct one to use and it should be a straight swap if you're moving over from a self hosted signalr...

Answer 1

@Brennan comment fixed my problem.

Changing skipNotification to false in the options: signalR.IHttpConnectionOptions property in Angular.

private options: signalR.IHttpConnectionOptions = {
    accessTokenFactory: () => {
      return this.userService.authToken as string;
    },
    transport: signalR.HttpTransportType.WebSockets
  };

Then in my .NET API Program.cs, I added the UseAzureSignalR() method. So this app.MapHub<NotificationHub>("/notifications"); become:

app.UseAzureSignalR(options =>
{
    options.MapHub<NotificationHub>("/notifications");
});