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

Question

前提

・.NET 5.0

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

実現したいこと

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

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

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

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

"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の接続が確立されていないため、接続に失敗するとのエラーでした。

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);
            }
        }
    }

@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>

解決したいこと

現状、ページ読込時に既読処理を実現する方法をアドバイス頂けたら幸いです。

Comments

[退会済みユーザー]

ASP.NET のタグを付けてください。

[退会済みユーザー]

> .NET Core+SQLServerで日報アプリを作成しています。

日報という言葉からは個人個人が別々に書くものを想像しますが、質問者さんのケースでは違うようですね。簡単にどのようなものか説明できませんか？

[akarinrin_]

＞Identityを使ったユーザ認証機能があり、ユーザがそれぞれ日報を作成します。

ログインしたユーザが個人個人で作成し、互いに閲覧できる日報アプリです。

Answer 1

ハブに接続する際にconnection.start()メソッドを呼び出していますが、このメソッドは非同期のようで、戻りがPromise<void>となっているようです。
非同期でハブとの接続が確立される前に、window.onloadが動き始めて、connection.invoke("SendReadProcess", reportID)をするタイミングでもまだ接続が確立できていないのではないかと思いました。

connection.invoke("SendReadProcess", reportID)をconnection.start()メソッドの後のthenの中に記述してみたらどうでしょうか。
(このthenの中は接続が確立された時に動くと思います)

https://docs.microsoft.com/ja-jp/aspnet/core/signalr/javascript-client?view=aspnetcore-6.0#connect-to-a-hub
https://docs.microsoft.com/ja-jp/javascript/api/@microsoft/signalr/hubconnection?view=signalr-js-latest#@microsoft-signalr-hubconnection-start

Comments

[akarinrin_]

connection.start().then内に処理を記載することで接続後に処理できました！
ありがとうございました。