WS hangs after page refresh for more than once

Question

I have hosted backend code on IIS with below settings enter image description here

My StartUp.cs looks like below

public class Startup
{
    private readonly string MyAllowSpecificOrigins = "_myAllowSpecificOrigins";

    public Startup(IConfiguration configuration)
    {
        Configuration = configuration;
    }

    public IConfiguration Configuration { get; }

    // This method gets called by the runtime. Use this method to add services to the container.
    public void ConfigureServices(IServiceCollection services)
    {
        services.AddRazorPages();
        services.AddSignalR(options =>
        {
            options.EnableDetailedErrors = true;
        });
        services.AddCors(options =>
        {
            options.AddPolicy(name: MyAllowSpecificOrigins,
                              builder =>
                              {
                                  builder.WithOrigins("https://localhost:44395")
                                  .SetIsOriginAllowedToAllowWildcardSubdomains()
                                  .WithHeaders(HeaderNames.ContentType, "x-custom-header"); ;
                              });
        });
    }

    // This method gets called by the runtime. Use this method to configure the HTTP request pipeline.
    public void Configure(IApplicationBuilder app, IWebHostEnvironment env)
    {
        var MyAllowSpecificOrigins = "_myAllowSpecificOrigins";
        if (env.IsDevelopment())
        {
            app.UseDeveloperExceptionPage();
        }
        else
        {
            app.UseExceptionHandler("/Error");
            // The default HSTS value is 30 days. You may want to change this for production scenarios, see https://aka.ms/aspnetcore-hsts.
            app.UseHsts();
        }

        app.UseHttpsRedirection();
        app.UseStaticFiles();

        app.UseRouting();
        app.UseCors(MyAllowSpecificOrigins);
        app.UseAuthorization();

        app.UseEndpoints(endpoints =>
        {
            endpoints.MapRazorPages();
            endpoints.MapHub<ListHub>("/listHub");
        });
    }
}

ListHub class is modeled as below

 public class ListHub : Hub
{
    private string[] cars = Array.Empty<string>();

    [EnableCors("{_myAllowSpecificOrigins}")]
    public async Task ReadList()
    {
        int initialListLength = cars.Length; ;
        Console.WriteLine(initialListLength);
        string[] lines;

        while (true)
        {
            try
            {
                lines = File.ReadAllLines(@"~\..\wwwroot\Cars.txt");
            }
            catch (Exception ex)
            {
                throw;
            }

            foreach (string line in lines)
            {
                cars = line.Split(',');
            }
            int newListLength = cars.Length;
            Console.WriteLine(newListLength);

            if (initialListLength != newListLength)
            {
                initialListLength = newListLength;
                await Clients.Caller.SendAsync("update", initialListLength, "list update available");
                Thread.Sleep(500);
                await HelloServer();
            }
            Thread.Sleep(2000);
        }
    }

    [EnableCors("{_myAllowSpecificOrigins}")]
    public async Task<string[]> HelloServer()
    {
        for (int i = 0; i < cars.Length; i++)
        {
            await Clients.Caller.SendAsync("helloApp", cars[i]);
            Thread.Sleep(1000);
        }

        return cars;
    }
}

FrondEnd JS file is configured as below

"use strict";
var connection = new signalR.HubConnectionBuilder().withUrl("http://127.0.0.1:8081/listHub", {
    skipNegotiation: true,
    transport: signalR.HttpTransportType.WebSockets
}).configureLogging(signalR.LogLevel.Information)
    .withAutomaticReconnect()
    .build();

async function start() {
    try {
        await connection.start().then(function () {
            
            console.log("SignalR Connected.");
            connection.invoke("ReadList").catch(function (err) {
                return console.error(err.toString());
            });
            
        }).catch(function (e) {

        });

    } catch (err) {
        console.log(err);
        setTimeout(start, 5000);
    }
};

connection.onclose(async () => {
    await start();
});

// Start the connection.
start();

connection.on("update", function (cars) {
    $('#carList').empty();
});

connection.on("helloApp", function (cars) {
    var li = document.createElement("li");
    document.getElementById("carList").appendChild(li);
    li.textContent = `${cars}`;
});

This works fine till max 10 refreshes. But after that, the refresh page gets hanged with the below network message enter image description here

and then after 4 min, I get below message enter image description here

I wonder what could cause this issue and how to avoid this...