質問をすることでしか得られない、回答やアドバイスがある。

15分調べてもわからないことは、質問しよう!

新規登録して質問してみよう
ただいま回答率
87.20%
.NET Core

.NET Coreは、マネージソフトウェアフレームワークでオープンソースで実装されています。クロスプラットフォームを前提に考えられており、Windows/Mac/Linuxで動くアプリケーションを作成することが可能です。

SignalR

SignalRは、マイクロソフト社のASP.NETを基盤とした技術の一つ。ASP.NETアプリにリアルタイム性を持たせることができるライブラリです。サーバサイドとクライアントサイド双方でのリアルタイム通信アプリの開発を容易にします。

MVC

MVC(Model View Controller)は、オブジェクト指向プログラミングにおけるモデル・ビュー・コントローラーの総称であり、ソフトフェア開発で使われている構築パターンとしても呼ばれます。

JavaScript

JavaScriptは、プログラミング言語のひとつです。ネットスケープコミュニケーションズで開発されました。 開発当初はLiveScriptと呼ばれていましたが、業務提携していたサン・マイクロシステムズが開発したJavaが脚光を浴びていたことから、JavaScriptと改名されました。 動きのあるWebページを作ることを目的に開発されたもので、主要なWebブラウザのほとんどに搭載されています。

ASP.NET

ASP.NETは動的なWebサイトやWebアプリケーション、そしてWebサービスを構築出来るようにする為、Microsoftによって開発されたウェブアプリケーション開発フレームワークです。

解決済

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

akarinrin_
akarinrin_

総合スコア7

.NET Core

.NET Coreは、マネージソフトウェアフレームワークでオープンソースで実装されています。クロスプラットフォームを前提に考えられており、Windows/Mac/Linuxで動くアプリケーションを作成することが可能です。

SignalR

SignalRは、マイクロソフト社のASP.NETを基盤とした技術の一つ。ASP.NETアプリにリアルタイム性を持たせることができるライブラリです。サーバサイドとクライアントサイド双方でのリアルタイム通信アプリの開発を容易にします。

MVC

MVC(Model View Controller)は、オブジェクト指向プログラミングにおけるモデル・ビュー・コントローラーの総称であり、ソフトフェア開発で使われている構築パターンとしても呼ばれます。

JavaScript

JavaScriptは、プログラミング言語のひとつです。ネットスケープコミュニケーションズで開発されました。 開発当初はLiveScriptと呼ばれていましたが、業務提携していたサン・マイクロシステムズが開発したJavaが脚光を浴びていたことから、JavaScriptと改名されました。 動きのあるWebページを作ることを目的に開発されたもので、主要なWebブラウザのほとんどに搭載されています。

ASP.NET

ASP.NETは動的なWebサイトやWebアプリケーション、そしてWebサービスを構築出来るようにする為、Microsoftによって開発されたウェブアプリケーション開発フレームワークです。

1回答

0リアクション

0クリップ

468閲覧

投稿2022/03/11 13:46

編集2022/03/13 07:52

前提

・.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>

解決したいこと

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

以下のような質問にはリアクションをつけましょう

  • 質問内容が明確
  • 自分も答えを知りたい
  • 質問者以外のユーザにも役立つ

リアクションが多い質問は、TOPページの「注目」タブのフィードに表示されやすくなります。

気になる質問をクリップする

クリップした質問は、後からいつでもマイページで確認できます。

またクリップした質問に回答があった際、通知やメールを受け取ることができます。

下記のような質問は推奨されていません。

  • 間違っている
  • 質問になっていない投稿
  • スパムや攻撃的な表現を用いた投稿

適切な質問に修正を依頼しましょう。

SurferOnWww

2022/03/11 21:57

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

2022/03/11 22:46

> .NET Core+SQLServerで日報アプリを作成しています。 日報という言葉からは個人個人が別々に書くものを想像しますが、質問者さんのケースでは違うようですね。簡単にどのようなものか説明できませんか?
akarinrin_

2022/03/13 07:54

>Identityを使ったユーザ認証機能があり、ユーザがそれぞれ日報を作成します。 ログインしたユーザが個人個人で作成し、互いに閲覧できる日報アプリです。

まだ回答がついていません

会員登録して回答してみよう

15分調べてもわからないことは
teratailで質問しよう!

ただいまの回答率
87.20%

質問をまとめることで
思考を整理して素早く解決

テンプレート機能で
簡単に質問をまとめる

質問する

関連した質問

同じタグがついた質問を見る

.NET Core

.NET Coreは、マネージソフトウェアフレームワークでオープンソースで実装されています。クロスプラットフォームを前提に考えられており、Windows/Mac/Linuxで動くアプリケーションを作成することが可能です。

SignalR

SignalRは、マイクロソフト社のASP.NETを基盤とした技術の一つ。ASP.NETアプリにリアルタイム性を持たせることができるライブラリです。サーバサイドとクライアントサイド双方でのリアルタイム通信アプリの開発を容易にします。

MVC

MVC(Model View Controller)は、オブジェクト指向プログラミングにおけるモデル・ビュー・コントローラーの総称であり、ソフトフェア開発で使われている構築パターンとしても呼ばれます。

JavaScript

JavaScriptは、プログラミング言語のひとつです。ネットスケープコミュニケーションズで開発されました。 開発当初はLiveScriptと呼ばれていましたが、業務提携していたサン・マイクロシステムズが開発したJavaが脚光を浴びていたことから、JavaScriptと改名されました。 動きのあるWebページを作ることを目的に開発されたもので、主要なWebブラウザのほとんどに搭載されています。

ASP.NET

ASP.NETは動的なWebサイトやWebアプリケーション、そしてWebサービスを構築出来るようにする為、Microsoftによって開発されたウェブアプリケーション開発フレームワークです。