常連

### 前提
・.NET 5.0

Webアプリの開発経験がないため、不足している情報があれば、すみません。
C#の文法はある程度理解していますが、Javascriptの知識は不足しています。

### 実現したいこと
.NET Core+SQLServerで日報アプリを作成しています。
Identityを使ったユーザ認証機能があり、ユーザがそれぞれ日報を作成します。
日報にはコメントを付けることができ、ボタンクリック時にResponseHubの
SendMessageでコメントをDBに保存することは出来ています。

日報の閲覧時に既読処理を実装したいのですが、
その際にエラーが発生します。

具体的には、既読処理を実装する上で、ページの読込時(window.onload)に
SendReadProcessを呼びたいのですが、
以下のようなエラーが発生します。

### 発生している問題・エラーメッセージ

```response.js
"use strict";

var connection = new signalR.HubConnectionBuilder().withUrl("/ResponseHub").build();

//Disable send button until connection is established
document.getElementById("sendButton1").disabled = true;

connection.on("ReceiveMessage", function (id, user, message) {
    var username = document.createElement("a");
    var premessage = document.createElement("pre");
    var hr = document.createElement("hr");
    username.href = "/UserSetting/Index/" + id;
    username.textContent = user;
    premessage.textContent = message;
    document.getElementById("responseList").appendChild(username);
    document.getElementById("responseList").appendChild(premessage);
    document.getElementById("responseList").appendChild(hr);
});
connection.on("AddComment", function (id, user, message) {
    var username = document.createElement("a");
    var premessage = document.createElement("pre");
    var hr = document.createElement("hr");
    username.href = "/UserSetting/Index/" + id;
    username.textContent = user;
    premessage.textContent = "(only you)" + message;
    document.getElementById("responseList").appendChild(username);
    document.getElementById("responseList").appendChild(premessage);
    document.getElementById("responseList").appendChild(hr);
});

connection.on("ReceiveRead", function (readCnt, list) {
    var Read = document.createElement("a");
    Read.textContent = readCnt + "人が既読しました。";
    document.getElementById("ReadIcon").a; ppendChild(Read);
});

connection.start().then(function () {
    document.getElementById("sendButton1").disabled = false;
}).catch(function (err) {
    return console.error(err.toString());
});

document.getElementById("sendButton1").addEventListener("click", function (event) {
    var reportID = document.getElementById("reportID").value;
    var message = document.getElementById("messageInput").value;
    var typeID = document.getElementById("ResponseType").value;
    reportID = Number(reportID);
    typeID = Number(typeID);
    connection.invoke("SendMessage", typeID, reportID, message).catch(function (err) {　//このメソッドでエラーが発生します。
        return console.error(err.toString());
    });
    event.preventDefault();
});

//以下の関数が正常に動作しません。
window.onload = function () {
    var reportID = document.getElementById("reportID").value;
    reportID = Number(reportID);
    connection.invoke("SendReadProcess", reportID).catch(function (err) {
        return console.error(err.toString());
    });
};
```
### エラー
> error: cannot send data if the connection is not in the 'connected' state.

エラー内容で検索した所、SignalRの接続が確立されていないため、接続に失敗するとのエラーでした。

```ResponseHub.cs
public class ResponseHub : Hub
    {
        private readonly ApplicationDbContext _context;
        private readonly UserManager<ReportUser> _userManager;

        public ResponseHub(ApplicationDbContext context, UserManager<ReportUser> userManager)
        {
            _context = context;
            _userManager = userManager;
        }

        public async Task SendMessage(int typeID, int reportID, string message)
        {
            //コメントをDBに保存する処理
        }
        
        public async Task SendReadProcess(int reportID)
        {
            var user = await _userManager.FindByNameAsync(Context.User.Identity.Name);

            if (user != null)
            {
                var read = new Read()
                {
                    ReportID = reportID,
                    ReportUserId = user.Id,
                    IsLiked = false
                };
                await _context.Reads.AddAsync(read);
                await _context.SaveChangesAsync();

                var readlist = await _context.Reads.Where(s => s.ReportID == reportID)
                                                   .ToListAsync();

                await Clients.All.SendAsync("ReceiveRead", readlist.Count, readlist);
            }
        }
    }
```

```Index.html
@model JobReport.ViewModels.ReportViewViewModel

@{
    ViewData["Title"] = "Index";
    var prevDisabled = !Model.ReportList.HasPreviousPage ? "disabled" : "";
    var nextDisabled = !Model.ReportList.HasNextPage ? "disabled" : "";
}

<div class="flexbox">
    <section class="list">
        <h1>Contents</h1>
        <ul>
            @for(int i = 0; i >=-6 ; i--)
            {
                <li><a asp-action="Index" asp-route-date="@DateTime.Now.AddDays(i).Date">@DateTime.Now.AddDays(i).Date.ToString("MM月dd日 (ddd)")</a></li>
            }

            @*@foreach (var item in Model.UserList)
            {
                <li><a asp-action="Index">@item.Name</a></li>
            }*@
        </ul>
    </section>
    <article class="main">
        <h1>日報閲覧</h1>
        <a asp-action="Index"
            asp-route-date="@Model.Date"
            asp-route-page="@(Model.ReportList.PageIndex - 1)"
            class="btn btn-primary @prevDisabled">
            ◀
        </a>
        <a asp-action="Index"
            asp-route-date="@Model.Date"
            asp-route-page="@(Model.ReportList.PageIndex + 1)"
            class="btn btn-primary @nextDisabled">
            ▶
        </a>
        
        <p>
            @if (Model.ReportList.Count() != 0 && Model.ReportList != null)
            {
                <h3 class="text-md-center">@Model.Date.Date.ToString("M月d日")</h3>
                <h3 class="text-md-right">@Model.Report.ReportUser.Name</h3>
                <div id="ReadIcon" hidden></div>
                @foreach (var reportItem in Model.ItemList)
                {
                    <h3>@reportItem.ReportItemName</h3>
                    @foreach (var reportText in Model.TextList)
                    {
                        @if (reportItem.ReportItemID == reportText.ReportItemID)
                        {
                            <pre>@reportText.Text</pre>
                        }
                    }
                }


                <div id="responseList">
                    @if (Model.ResponseList != null)
                    {
                        <hr />
                        @foreach (var response in Model.ResponseList)
                        {
                            <a asp-controller="UserSetting" asp-route-id="@response.Read.ReportUserId">@response.Read.ReportUser.Name</a>

                            <pre>@response.ReponseText</pre>
                            <hr />
                        }

                    }
                </div>

                <div class="row">&nbsp;</div>
                <div class="row">
                    <div class="col-6">
                        <input type="number" value="@Model.Report.ReportID" id="reportID" hidden />
                        <select asp-for="ResponseType" asp-items="ViewBag.SelectList"></select>
                        <div class="col-2">Message</div>
                        <div class="col-4"><input type="text" id="messageInput" /></div>
                        <input type="button" id="sendButton1" value="Send Message" />
                    </div>
                </div>

                <div class="row">
                    <div class="col-12">
                        <hr />
                    </div>
                </div>
                <div class="row">
                    <div class="col-6">
                        <ul id="messagesList"></ul>
                    </div>
                </div>
            }
        </p>
    </article>
    <section class="side">
        <h1>About</h1>
        <p>
            The Little Prince (French: Le Petit Prince), first published in 1943, is a novella and the most famous work of the French aristocrat, writer, poet and pioneering aviator Antoine de Saint-Exupéry (1900–1944).
        </p>
    </section>
</div>
```
### 解決したいこと
現状、ページ読込時に既読処理を実現する方法をアドバイス頂けたら幸いです。

【.NET Core MVC】SignalRを使って既読処理を実装したい

### 前提
・.NET 5.0

Webアプリの開発経験がないため、不足している情報があれば、すみません。
C#の文法はある程度理解していますが、Javascriptの知識は不足しています。

### 実現したいこと
.NET Core+SQLServerで日報アプリを作成しています。
Identityを使ったユーザ認証機能があり、ユーザがそれぞれ日報を作成します。
日報にはコメントを付けることができ、ボタンクリック時にResponseHubの
SendMessageでコメントをDBに保存することは出来ています。

日報の閲覧時に既読処理を実装したいのですが、
その際にエラーが発生します。

具体的には、既読処理を実装する上で、ページの読込時(window.onload)に
SendReadProcessを呼びたいのですが、
以下のようなエラーが発生します。

### 発生している問題・エラーメッセージ

```response.js
"use strict";

var connection = new signalR.HubConnectionBuilder().withUrl("/ResponseHub").build();

//Disable send button until connection is established
document.getElementById("sendButton1").disabled = true;

connection.on("ReceiveMessage", function (id, user, message) {
    var username = document.createElement("a");
    var premessage = document.createElement("pre");
    var hr = document.createElement("hr");
    username.href = "/UserSetting/Index/" + id;
    username.textContent = user;
    premessage.textContent = message;
    document.getElementById("responseList").appendChild(username);
    document.getElementById("responseList").appendChild(premessage);
    document.getElementById("responseList").appendChild(hr);
});
connection.on("AddComment", function (id, user, message) {
    var username = document.createElement("a");
    var premessage = document.createElement("pre");
    var hr = document.createElement("hr");
    username.href = "/UserSetting/Index/" + id;
    username.textContent = user;
    premessage.textContent = "(only you)" + message;
    document.getElementById("responseList").appendChild(username);
    document.getElementById("responseList").appendChild(premessage);
    document.getElementById("responseList").appendChild(hr);
});

connection.on("ReceiveRead", function (readCnt, list) {
    var Read = document.createElement("a");
    Read.textContent = readCnt + "人が既読しました。";
    document.getElementById("ReadIcon").a; ppendChild(Read);
});

connection.start().then(function () {
    document.getElementById("sendButton1").disabled = false;
}).catch(function (err) {
    return console.error(err.toString());
});

document.getElementById("sendButton1").addEventListener("click", function (event) {
    var reportID = document.getElementById("reportID").value;
    var message = document.getElementById("messageInput").value;
    var typeID = document.getElementById("ResponseType").value;
    reportID = Number(reportID);
    typeID = Number(typeID);
    connection.invoke("SendMessage", typeID, reportID, message).catch(function (err) {　//このメソッドでエラーが発生します。
        return console.error(err.toString());
    });
    event.preventDefault();
});

//以下の関数が正常に動作しません。
window.onload = function () {
    var reportID = document.getElementById("reportID").value;
    reportID = Number(reportID);
    connection.invoke("SendReadProcess", reportID).catch(function (err) {
        return console.error(err.toString());
    });
};
```
### エラー
> error: cannot send data if the connection is not in the 'connected' state.

エラー内容で検索した所、SignalRの接続が確立されていないため、接続に失敗するとのエラーでした。

```ResponseHub.cs
public class ResponseHub : Hub
    {
        private readonly ApplicationDbContext _context;
        private readonly UserManager<ReportUser> _userManager;

        public ResponseHub(ApplicationDbContext context, UserManager<ReportUser> userManager)
        {
            _context = context;
            _userManager = userManager;
        }

        public async Task SendMessage(int typeID, int reportID, string message)
        {
            //コメントをDBに保存する処理
        }
        
        public async Task SendReadProcess(int reportID)
        {
            var user = await _userManager.FindByNameAsync(Context.User.Identity.Name);

            if (user != null)
            {
                var read = new Read()
                {
                    ReportID = reportID,
                    ReportUserId = user.Id,
                    IsLiked = false
                };
                await _context.Reads.AddAsync(read);
                await _context.SaveChangesAsync();

                var readlist = await _context.Reads.Where(s => s.ReportID == reportID)
                                                   .ToListAsync();

                await Clients.All.SendAsync("ReceiveRead", readlist.Count, readlist);
            }
        }
    }
```

```Index.html
@model JobReport.ViewModels.ReportViewViewModel

@{
    ViewData["Title"] = "Index";
    var prevDisabled = !Model.ReportList.HasPreviousPage ? "disabled" : "";
    var nextDisabled = !Model.ReportList.HasNextPage ? "disabled" : "";
}

<div class="flexbox">
    <section class="list">
        <h1>Contents</h1>
        <ul>
            @for(int i = 0; i >=-6 ; i--)
            {
                <li><a asp-action="Index" asp-route-date="@DateTime.Now.AddDays(i).Date">@DateTime.Now.AddDays(i).Date.ToString("MM月dd日 (ddd)")</a></li>
            }

            @*@foreach (var item in Model.UserList)
            {
                <li><a asp-action="Index">@item.Name</a></li>
            }*@
        </ul>
    </section>
    <article class="main">
        <h1>日報閲覧</h1>
        <a asp-action="Index"
            asp-route-date="@Model.Date"
            asp-route-page="@(Model.ReportList.PageIndex - 1)"
            class="btn btn-primary @prevDisabled">
            ◀
        </a>
        <a asp-action="Index"
            asp-route-date="@Model.Date"
            asp-route-page="@(Model.ReportList.PageIndex + 1)"
            class="btn btn-primary @nextDisabled">
            ▶
        </a>
        
        <p>
            @if (Model.ReportList.Count() != 0 && Model.ReportList != null)
            {
                <h3 class="text-md-center">@Model.Date.Date.ToString("M月d日")</h3>
                <h3 class="text-md-right">@Model.Report.ReportUser.Name</h3>
                <div id="ReadIcon" hidden></div>
                @foreach (var reportItem in Model.ItemList)
                {
                    <h3>@reportItem.ReportItemName</h3>
                    @foreach (var reportText in Model.TextList)
                    {
                        @if (reportItem.ReportItemID == reportText.ReportItemID)
                        {
                            <pre>@reportText.Text</pre>
                        }
                    }
                }


                <div id="responseList">
                    @if (Model.ResponseList != null)
                    {
                        <hr />
                        @foreach (var response in Model.ResponseList)
                        {
                            <a asp-controller="UserSetting" asp-route-id="@response.Read.ReportUserId">@response.Read.ReportUser.Name</a>

                            <pre>@response.ReponseText</pre>
                            <hr />
                        }

                    }
                </div>

                <div class="row">&nbsp;</div>
                <div class="row">
                    <div class="col-6">
                        <input type="number" value="@Model.Report.ReportID" id="reportID" hidden />
                        <select asp-for="ResponseType" asp-items="ViewBag.SelectList"></select>
                        <div class="col-2">Message</div>
                        <div class="col-4"><input type="text" id="messageInput" /></div>
                        <input type="button" id="sendButton1" value="Send Message" />
                    </div>
                </div>

                <div class="row">
                    <div class="col-12">
                        <hr />
                    </div>
                </div>
                <div class="row">
                    <div class="col-6">
                        <ul id="messagesList"></ul>
                    </div>
                </div>
            }
        </p>
    </article>
    <section class="side">
        <h1>About</h1>
        <p>
            The Little Prince (French: Le Petit Prince), first published in 1943, is a novella and the most famous work of the French aristocrat, writer, poet and pioneering aviator Antoine de Saint-Exupéry (1900–1944).
        </p>
    </section>
</div>
```


@@ -234,4 +234,5 @@
     </section>
 </div>
 ```
+### 解決したいこと
+現状、ページ読込時に既読処理を実現する方法をアドバイス頂けたら幸いです。

質問編集履歴