How to invoke awaiting js fuction in razor pages c#

Question

I'm using SignalR. I want to send updating request by websocket for each elements in foreach to update timer. But i'm getting error.Maybe connection can not get in time create connection. Is i need to use await ti start() function?

My context of SignalR is: main.js

 "use strict";
var connection = new signalR.HubConnectionBuilder().withUrl("/main").build();

async function start() {
    try {
        await connection.start();
    } catch (err) {
        console.log(err);
    }
};

async function ItemStatusRequest(id) {
    connection.invoke("ItemStatusRequest", id).catch(function (err) {
        return console.error(err.toString());
    });
}

my html code:

@model IEnumerable<AuctionWebApp.Models.AuctionItemViewModel>

@{
    ViewData["Title"] = "Index";
}
<script src="~/js/signalr/dist/browser/signalr.min.js"></script>
<script src="~/js/main.js"></script>

<script type="text/javascript">
    await start();
</script>

<table class="table">
    <thead>
        ...
    </thead>
    <tbody>
@foreach (var item in Model) {
        <tr>
            <td>
                <p [email protected] [email protected]>@(item.Id)</p>
            </td>
            <td>
                @Html.DisplayFor(modelItem => item.Name)
            </td>
            <td>
                @*timer*@
                <div id=clock@(item.Id) class="countdown">
                <span class="hours countdown-time"></span>
                <span class="countdown-text">:</span>
                <span class="minutes countdown-time"></span>
                <span class="countdown-text">:</span>
                <span class="seconds countdown-time"></span>
                <span class="countdown-text"></span>
                </div>

                <script defer type="text/javascript">
                    ItemStatusRequest(@(item.Id))
                </script>
            </td>
            <td>
                @Html.DisplayFor(modelItem => item.CurrentPrice)
            </td>
            <td>
                @item.StartTime.ToLocalTime();
            </td>
            <td>
                status
            </td>
        </tr>}
    </tbody>
</table>

Answer 1

I solved this problem by calling start function on page lodaing.

connection.start().then(function ()
My functiong calling after connectiong has start by using js .then

At the end of html:

<script> 
    start(@Json.Serialize(Model.Select(x => x.Id.ToString()).ToArray()));
</script>

At SignalR-side I'm handle like this:

function start(arrId) {
    connection.start().then(function () {
        arrId.forEach(id => connection.invoke("ItemStatusRequest", id).catch(function (err) {
            return console.error(err.toString());
        }))
        event.preventDefault();
    }).catch(function (err) {
        return console.error(err.toString());
    });

};