Client never receives messages from signalr hub SendAsync call from controller .NET Core in production

Question

This works locally without any issues however when deployed to azure app service my client never receives any message when calling REST endpoint in controller.

My App Service has Web sockets enabled on the server via the configuration settings in azure.

Referencing docs for how to use the hubcontext outside of the hub: https://docs.microsoft.com/en-us/aspnet/core/signalr/hubcontext?view=aspnetcore-6.0

I have a successful opened a connection:

[2022-04-01T19:34:40.915Z] Information: WebSocket connected to wss://staging-env.com/hubs/notification?id=omz2rGgyuXw01QV6Vs6PbA.

I receive test broadcast we call from the client successfully:

Testing notification hub broadcasting 4/1/2022 7:34:40 PM

No error messages or information regarding a closed connection - everything pinging correctly in app logs.

I have a controller:

public class NotificationHubController : ControllerBase
{
    private readonly IHubContext _hub;
    private readonly ILogger _logger;
    
    public NotificationHubController(
        ILogger logger,
        IHubContext hub
    )
    {
            _logger = logger;
            _hub = hub;
    }

    [HttpPost]
    public async Task SendNotification(NotificationDto dto)
    {
        _logger.LogInformation("Broadcasting notification update started");
        await _hub.Clients.All.SendAsync("NotificationUpdate", dto);  <-------- no errors reported
        _logger.LogInformation("Broadcasting notification update resolved");
        return Ok();
    }

}

Hub:

using Microsoft.AspNetCore.SignalR;

namespace NMA.Api.Service.Hubs
{
    public class NotificationHub: Hub
    {
        public Task NotifyConnection()
        {
            return Clients.All.SendAsync("TestBrodcasting", $"Testing notification hub 
                     broadcasting {DateTime.Now.ToLocalTime()}");
        }
    }
}

Startup:

...
            services.AddSignalR(hubOptions =>
            {
                hubOptions.EnableDetailedErrors = true;
            });

...
            app.UseEndpoints(endpoints =>
            {
                endpoints.MapHub("/hubs/notification");
                endpoints.MapControllers();
            });

Client:

(react js hook)

export const useNotificationHub = ({ onNotificationRecievedCallback }: NotificationHubProps) => {
    const [connection, setConnection] = useState(null);

    useEffect(() => {
        const establishConnection = async () => {
            const newConnection = new HubConnectionBuilder()
                .withUrl(`${process.env.REACT_APP_NMA_HUB_URL}/notification`)
                .withAutomaticReconnect()
                .build();

            await newConnection.start();

            newConnection.invoke("NotifyConnection").catch(function (err) {
                console.error(err.toString());
            });

            newConnection.on("TestBrodcasting", function (time) {   
                console.log(time);
            });

            newConnection.on('NotificationUpdate', (response: NotificationAPIResponse) => {
                console.log("Notification Recieved: ", response);
                onNotificationRecievedCallback(response);
            });

            newConnection.onclose(() => {
                console.log("Notification connection hub closed");
            })

            setConnection(newConnection);
        }

        establishConnection();

    }, [onNotificationRecievedCallback]);

    return {
    }
}

I make the request via Insomnia to post a notification via the endpoint. I get a successful HTTP status return. My logs tell me that the that the call was made and it was successful. Yet not data received in the client.

I'm not sure what to do from here. I need to be able to invoke client calls from REST endpoints but this doesn't seem to work and I've exhausted my ability to use google to find alternatives.

user_14717905 · Answer

I believe you are experiencing the issue because you are starting the connection and then setting up the on and onclose callbacks last. You should rather set up all of your callbacks first, and then starting the connection should be the last thing you do.

EG:

    // BUILD THE CONNECTION FIRST

    const newConnection = new HubConnectionBuilder()
        .withUrl(`${process.env.REACT_APP_NMA_HUB_URL}/notification`)
        .withAutomaticReconnect()
        .build();

        // SET UP CALLBACKS SECOND

        newConnection.on("TestBrodcasting", function (time) {   
            console.log(time);
        });

        newConnection.on('NotificationUpdate', (response: NotificationAPIResponse) => {
            console.log("Notification Recieved: ", response);
            onNotificationRecievedCallback(response);
        });

        newConnection.onclose(() => {
            console.log("Notification connection hub closed");
        })

        // START CONNECTION LAST

        await newConnection.start();

        // NOW YOU CAN INVOKE YOUR METHOD

        newConnection.invoke("NotifyConnection").catch(function (err) {
            console.error(err.toString());
        });

Client never receives messages from signalr hub SendAsync call from controller .NET Core in production

1 Answers