Recomendados
Recomendados
Más contenido relacionado
La actualidad más candente
La actualidad más candente (20)
Similar a .NET Lab2022年2月
Similar a .NET Lab2022年2月 (20)
Más de TomomitsuKusaba
.NET Lab2022年2月
- 2. 自己紹介 • 普段は主にWebFormsアプリ の保守のお仕事をしてます。 • 古めのシステムが多いので時 代に取り残されぬよう新しい技 術を一つでも入れるよう日々努 力しています。 • tomo_kusaba
- 4. 注意 • 個人の見解・解釈が多分に入っています。 • 見解の相違・事実誤認などありましたらご指摘ください。 • #dotnetlabでtweetすると右側に表示されます
- 6. 主なトピック • チャットアプリの技術選定 • 主要仕様の決定 • 追加機能について • サーバへのデプロイ
- 7. 動機 • 今まで使用していたPerl（CGI)のチャットが現状に合わない • クエリーストリングのみでチャットにログインできてしまう不 具合も。。。 • 実際にクローラーによってログイン状態になっていることがしばしば • 実害は起きてないものの他者からみたらあたかもその人がいるかのよ うに見えるので紛らわしい • botやクローラーに容易にチャットに入らない程度のログイン 機構をつけたチャットを作りたい！ • とはいえ、厳密なセキュリティを求めるものでもない
- 8. 制約事項 • 自宅サーバにデプロイ可能であること • Windows Server 2016 (IIS 10) • データベースはインストール可 • .NETラボのネタになるよう.NET6で実装できるとよい！
- 10. Communication Services とは • クラウドベースのサービス（TeamsをAPI化したもの） • チャットの会話はチャットスレッド内で行われる • つまりスレッド型のチャットアプリとなる • チャットスレッドはそれぞれのChatThreadIdによって一意に 識別される 単一スレッドのチャットを作ろうとしていた ので仕様として重厚すぎる
- 11. Communication Servicesについての 過去セッション • .NET ラボ勉強会2020年10月「Teamsの裏側？Azure Communication Servicesのプレビューが出たので、さっそく 触ってみた話」（初音 玲さん） • .NET ラボ勉強会2020年11月「Azure Communication Servicesで自分だけのWEB会議を作ろう」（初音 玲さん） • .NET ラボ勉強会2021年3月「いよいよ Azure Communication Services からTeams会議につながるようです よ！」（初音 玲さん） YouTubeで動画公開されています
- 12. SignalRとは • リアルタイムWeb機能をアプリに追加できるライブラリ。 • 主な機能としては以下の通り • 接続管理を自動的に処理する • 接続されているクライアントに同時にメッセージを送信する • 特定のクライアントまたはグループにメッセージ送信する • 増加するトラフィックを処理するためにスケーリングする • 以下のような実装がある • ASP.NET SignalR • ASP.NET Core SignalR • Azure SignalR Service
- 13. Webアプリとしての実装方式の検討 • 現状.NET 6で考えられる実装は以下の通り • ASP.NET Core MVC • Blazor Server • Blazor WebAssembly • いずれでも実装は可能と考えたが、データベースを使用した永 続化を考えていたのでその実装の容易さから今回はBlazor Serverを選択した 今回は、Blazor Server＋ASP.NET Core SignalRを採用
- 15. SignalR実装の肝 _hubConnection = new HubConnectionBuilder(); _hubConnection.On<string, Message>("Broadcast", BroadcastMessage); await _hubConnection.StartAsync(); await _hubConnection.SendAsync("Broadcast", message.Username, message); public void BroadcastMessage(string name, Message message) { …… } public class BlazorChatHub : Hub { public async Task Broadcast(string username, Message message) { await Clients.All.SendAsync("Broadcast", username, message); } } クライアント側 サーバー側 呼び出す 呼び出す
- 16. サンプルアプリはこんな感じ
- 17. とりあえずの修正内容 • 個々のユーザアカウントでログインしてこのログイン名で チャットできるようにしたい • →個別認証でプロジェクトを作成 • チャットの入力テキストボックスがだんだん下になるのは芳し くない • Razorページを調整 • チャットの会話内容はSQLServerで永続化する • ページ初期表示時にチャット内容をロード • チャット発言時にチャット内容を書き込み
- 19. アカウント登録フォームの編集 • Register.cshtml.csを編集しInputModelに名前を入力できる よう追加 • Registar.cshtmlを編集し名前を入力するフォームを追加 • Register.cshtml.csを編集しOnPostAsyncに入力した名前が UserNameになるように編集 • 不要なチェックなどコメントアウトをしておく • 日本語の名前を入力可能とするためにProgram.csの 「builder.Services.AddDefaultIdentity」に 「options.User.AllowedUserNameCharacters = null;」を追 加
- 20. ログインフォームの編集 • アカウント登録が名前で入っているのでログインが名前でログ インする必要がある。 • Login.cshtmlを編集してEmailの入力欄のラベルをわかりやす く名前としておく • Login.cshtml.csのInputModelを編集してEmailの属性を Requiredのみにしておく • その他適宜、表示を日本語に置き換えておく
- 21. アイコン提供： @miz_mus アイコンの追加 • 大人数でチャットすることを想定しアイコンの表示機能を追加 した。 • 名前だけじゃなくアイコンを表示することで視覚的に識別できるのは 非常によい！
- 23. ネタをもらう機能 • 一人でも楽しめるチャット（寂しいとかいわないで！） • あらかじめ登録されたネタ集からランダムでネタを振ってもら える機能 • ランダムはLINQにないので拡張メソッドで実装
- 24. 問題点 • 各設定画面からチャット画面に戻ってくると入室メッセージが いちいち表示されてしまう。 • 原因は、ハブとの接続管理をRazorページにて行っているため。 • 解決方法としてハブとの接続管理をDIを用いてブラウザとの接 続単位で(Scoped)管理していけばよいのではないか？
- 25. 今まで知らなかったこと • RazorページでDIを呼び出すには@injectを書けばいいけどDI しようとしてるクラスの中で他のDIを呼び出すにはどうすれば よいの？？ • 答え：コンストラクタに書けばいいらしい public ClientHub(NavigationManager navigation, AuthenticationStateProvider authentication, ApplicationDbContext DbContect, Room room) { _authenticationStateProvider = authentication; _navigationManager = navigation; _applicationDbContext = DbContect; _room = room; }
- 27. 公開設定ー接続 • WebDeploy用に公開設定 タイトル 内容 公開方法 「Webデプロイパッケー ジ」 パッケージの場所 出力する場所を選択 サイト名 IIS上のパスを入力
- 28. 公開設定ー設定 • WebDeploy用設定続き タイトル 内容 構成 Release ターゲットフレームワー ク net6.0 配置モード 自己完結 ターゲットランタイム win-x64 単一ファイルの生成 - ReadyToRun - 未使用コードのトリミン グ -
- 29. サーバへのデプロイ • 前提として、サーバがWebDeploy可能な状態となっているこ と 1. Web Deploy がサーバにインストール済みであること 1. https://www.microsoft.com/ja- jp/download/details.aspx?id=43717 2. サーバの役割で「Webサーバ(IIS)」>「管理ツール」＞「管 理サービス」がインストール済みであること
- 30. IISインポート手順1 • 既存のアプリケーションに対してアップグレードリリースする 手順を示します。 • まず、既存アプリケーションを停止します。 • アプリケションプールから停止します。
- 32. IISインポート手順3 • Visual Studioから出力した Zipファイルへのパスを指定し ます。 • 「次へ」ボタンを押下します。
- 34. IISインポート手順5 • アプリケーションをインス トールするパスを入力します。 • Visual Studioでのサイト名の 入力がデフォルト値として表 示されています。
- 40. おしまい おしまい