SignalR invoke method doesn't work on throttled connections

Question

I have a .net core backend with SignalR and a react frontend. I have a basic hub set up with ConcurrentDictionary to manage connection ids:

namespace backend.Hubs
{
    public class OrderHub : Hub, IOrderHub
    {
        private readonly IHubContext<OrderHub> hubContext;
        public static ConcurrentDictionary<string, List<string>> ConnectedUsers = new ConcurrentDictionary<string, List<string>>();

        public OrderHub(IHubContext<OrderHub> hubContext)
        {
            this.hubContext = hubContext;
        }
        public async Task SendMessage(OrderResponseDto order, string id)
        {
            List<string> connectedUser = null;
            ConnectedUsers.TryGetValue(id, out connectedUser);
            await hubContext.Clients.Clients(connectedUser).SendAsync("neworder",order);
        }
        public void AddMapping(string id)
        {
            List<string> existingUserConnectionIds;
            ConnectedUsers.TryGetValue(id, out existingUserConnectionIds);
            if (existingUserConnectionIds == null)
            {
                existingUserConnectionIds = new List<string>();
            }
            existingUserConnectionIds.Add(Context.ConnectionId);
            ConnectedUsers.TryAdd(id, existingUserConnectionIds);
        }
        public override Task OnDisconnectedAsync(Exception e)
        {

            List<string> existingUserConnectionIds = null;
            foreach(var val in ConnectedUsers.Values)
            {
                if (val.Contains(Context.ConnectionId))
                {
                    existingUserConnectionIds = val;
                    break;
                }
            }
            if (existingUserConnectionIds != null)
            {
                existingUserConnectionIds.Remove(Context.ConnectionId);
            }
            var keys = ConnectedUsers.Where(en => en.Value.Count == 0).Select(k => k.Key);
            foreach(var key in keys)
            {
                List<string> garb = null;
                ConnectedUsers.TryRemove(key, out garb);
            }
            return base.OnDisconnectedAsync(e);
        }
    }

}

On the frontend, I establish the connection and call the AddMapping method to save the client connection id to the concurrent dictionary. All works fine when no throttling is enabled in the developer console in the frontend. However, if I change the throttling to slow or fast 3g I encounter a weird problem. The connection is established as usual and I invoke the method. From debugging in .net core I see that the method is called on the backend however the value isn't saved in the concurrent dictionary and it doesn't return anything. The react client thinks the connection is lost and reconnects. Specifically, I am getting the following errors:

This error only happens when I try to invoke a hub method from the client on throttled connection. On an unthrottled connection, it works fine.

Additional client code :

const newConnection = new HubConnectionBuilder()
            .withUrl(env.realtimeBaseUrl+'orderhub', {
                // skipNegotiation: true,
                // transport: HttpTransportType.WebSockets
            })
            .withAutomaticReconnect()
            .build();
        newConnection.start().then(r => {
            fetchOrders()
            setConnectionStatus(connectingForFirstTime);
            newConnection.invoke("AddMapping",business.id.toString()).then(res=>{
                console.log(res)
                setConnection(newConnection);
                setConnectionStatus(connected)
            })
            newConnection.on("neworder",(order)=>{
               // data handling
            })
            newConnection.onreconnecting(()=>setConnectionStatus(reconnecting))
            newConnection.onreconnected(()=>{
                newConnection.invoke("AddMapping",business.id.toString()).then(res=>{
                    console.log(res)
                    setConnection(newConnection);
                    setConnectionStatus(connected)
                })
            });
            newConnection.onclose(()=>setConnection(null));
        }).catch(err => setConnectionStatus(off));

Answer 1

I just tried it on one of my sites and it seems like the way the dev tools performs the throttling disrupts websocket connections to the point that it doesn't seem to work bi-directionally whether it is on slow3g or fast3g simulation. I can reproduce your error on my otherwise working site. My suspicion is the simulator, not your code.