When calling SignalR Core Hub method from Controller the angular client is not receiving data

Question

Angular SignalR client is not receiving data from asp.net when the SignalR Core Hub Method is called from the Controller, but this works when I test it from localhost

I have an angular website with asp.net back-end. I am using SignalR for a real-time data service. I debugged and tested in localhost it worked fine and the angular client received data. But when I published the API the angular client is not receiving any data.

MyHub.cs

using Microsoft.AspNetCore.SignalR;
using System;
using System.Collections.Generic;
using System.Linq;
using System.Threading.Tasks;

namespace Biz1PosApi.Hubs
{
    public class MyHub: Hub<IHubClient>
    {
        public void Announce(string message)
        {
            Clients.All.Announce(message);
        }
        public async Task joinroom(string room)
        {
            await Groups.AddToGroupAsync(Context.ConnectionId, room);
            await Clients.Group(room).JoinMessage($"{Context.ConnectionId} joined {room}");
        }
    }
}

IHubClient.cs

using System;
using System.Collections.Generic;
using System.Linq;
using System.Threading.Tasks;

namespace Biz1PosApi.Hubs
{
    public interface IHubClient
    {
        Task Announce(string message);
        Task NewOrder(string platform, int UPOrderId);
        Task OrderUpdate(int UPOrderId);
        Task JoinMessage(string message);
    }
}

ValuesController.cs

 public ValuesController(IHubContext<UrbanPiperHub, IHubClient> uhubContext)
 {
    _uhubContext = uhubContext;
    ...
 }

 [HttpPost("test")]
 public void test(string message)
 {
    _uhubContext.Clients.All.Announce(message);
 }

Angular Client

    this.connection = new signalR.HubConnectionBuilder()
          .configureLogging(signalR.LogLevel.Information)
          .withUrl('https://<My-Public-Domain>/uphub')
          .withAutomaticReconnect([0, 1000, 5000, 10000])
          .build();

    this.connection.start().then(() => {
      console.log('SignalR Connected!');
    }).catch((err: { toString: () => any; }) => {
      return console.error(err.toString());
    });
    this.connection.on("Announce", (msg: any) => {
      console.log(msg)
    });

I have seen many working tutorials they have did the same way but it is not working for me. The angular client not working when the API is published. I have been testing with the angular running in localhost . Could that be a problem.

Answer 1

I debugged and tested in localhost it worked fine and the angular client received data. But when I published the API the angular client is not receiving any data.

Please check if you enabled CORS to allow the Angular client to connect to your SignalR app.

https://docs.microsoft.com/en-us/aspnet/core/signalr/security?view=aspnetcore-5.0#cross-origin-resource-sharing

And please double check the specified URL and make sure your Angular client is connecting to the correct endpoint.

Besides, you can check if it outputs any useful logs about connection in browser Console tab and refer to the following doc to troubleshoot the issue.

https://docs.microsoft.com/en-us/aspnet/core/signalr/troubleshoot?view=aspnetcore-5.0