Sending parameters from UI Layer and receiving data with SignalR

Question

I am carrying out my project in .net 6.0. I have carried out the necessary test operations regarding SignalR. I have carried out the test operation on the data I want to pull and it is successful. However, I cannot send the id of the user who is logged into the system as a parameter and pull the relevant data.

    {
        public class SignalRHub : Hub
        {
            private readonly IEFBasketService _ebasketService;
    
            public SignalRHub(IEFBasketService ebasketService)
            {
                _ebasketService = ebasketService;
            }
    
            public async Task SendBasket(int userId)
            {
                var basketCount = await _ebasketService.GetByUserIdBasketQuantity(userId);
                await Clients.All.SendAsync("ReceiveBasketCount", basketCount);
            }
        }
    } 

The above method works flawlessly in swagger.

builder.Services.AddCors(options =>
{
    options.AddPolicy("AllowAll", policy =>
    {
        policy.AllowAnyHeader()
              .SetIsOriginAllowed((host) => true)
              .AllowCredentials()
              .AllowAnyMethod();


    });
});

builder.Services.AddSignalR();

app.UseCors("AllowAll");

app.MapHub<SignalRHub>("/signalrhub");

Program.cs in ApiLayer is as above.

<script src="~/lib/jquery/dist/jquery.min.js"></script>
<script src="~/lib/bootstrap/dist/js/bootstrap.bundle.min.js"></script>
<script src="~/js/site.js" asp-append-version="true"></script>
<script src="~/lib/microsoft/signalr/dist/browser/signalr.min.js"></script>

<div class="wrap-header-mobile">

    <script type="text/javascript">
        $(document).ready(() => {
            var connection = new signalR.HubConnectionBuilder().withUrl("https://localhost:7171/SignalRHub").build();

            $("#connstatus").text(connection.state);

            connection.start().then(() => {
                $("#connstatus").text(connection.state);

                // UserId'yi HTML'den alıyoruz
                var userId = $("#basketCount").data("user-id");

                setInterval(() => {
                    
                    connection.invoke("SendBasket", userId).catch(err => console.error(err.toString()));
                }, 1000); 
            }).catch((err) => { console.log(err) });

            connection.on("ReceiveBasketCount", (value) => {
                $("#basketCount").attr("data-notify", value); 
            });
        });
    </script>



        <div id="basketCount" data-user-id="@ViewBag.UserId" class="icon-header-item cl2 hov-cl1 trans-04 p-r-11 p-l-10 icon-header-noti js-show-cart" data-notify="2">
            <i class="zmdi zmdi-shopping-cart"></i>
        </div>

When I debug, ViewBag.userId data is also correct.

When I restart the project, data data-notify="2" remains the same and the Console shows Error: Failed to invoke 'SendBasket' due to an error on the server.