「開発してみた」シリーズ第1弾です。なんでも作ってみないと理解が深まらない、ということで、色々サクッと作っていきます。それでは、ライブチャットを構築していきます。目次[非表示]1.SignalRとは2.構築の下準備3.コーディング4.動かしてみる5.おまけSignalRとは簡単に言うと、ウェブサーバーとリアルタイムにやり取りするための仕組みをまとめたライブラリーです。通常のウェブサーバーはリクエストに対して応える(レスポンス)という形式になっています。そのためクライアント側が常に能動的にサーバーに最新情報を問合せる必要があります。頻繁に更新されるデータであれば、いつもクライアントがサーバー側に最新状態のデータを取りに行く必要があり、サーバー側からしたら勘弁してくれよ・・という感じです。そこで、SignalRではサーバー側からクライアント側に情報をプッシュすることによって無駄なリクエストを削減し、リアルタイムな体験を演出していきます。構築の下準備まずはベースとなるプロジェクトを新しく作成します。アプリケーションを選択します。アプリケーション(モデルビューコントローラー)を選択します。2.1を選択して、WebApplicationSignalRDemo1を選択します。コントローラー、モデル、ビューなどが自動生成されます。NuGetの中にコアのライブラリーであるMicrosoft.AspNetCore.Appがあることを確認します。Microsoft.AspNetCore.Appの中にはすでに、Microsoft.AspNetCore.SignalRライブラリーが内包されていますので、とくにNuGetなどで個別にライブラリーを管理する必要はありません。クライアント側で利用するJavascriptは必要になりますので、パッケージマネージャーコンソールから下記のコマンドを使って入手します。npmは事前にインストールされている必要があります。コーディングさて、下準備が終わったところでコードを書いていきます。クライアント側とサーバー側のパイプとなるハブクラスを作ります。プロジェクト傘下にHubsというフォルダーを作成し、その中にChatHub.csというクラスを作成します。message);}}}次に、プロジェクトがSignalRを使うように設定をします。ここにあるservices.AddSignalRでDIにて使えるようにします。"{controller=Home}/{action=Index}/{id?}");});}}}あと少しで完成です。次はクライアント側のJavascript。console.error(err.toString());});event.preventDefault();});最後にビューを作成します。crossorigin="anonymous"></script></body></html>動かしてみる早速動かしてみます。入力し、片方のブラザーでメッセージを入力してみます。左のブラウザーで送信ボタンを押したと同時に右のブラザーでも反映されました。このライブラリーを使った応用技術はたくさんありますので、色々取組んでみてください。今回作成したサンプルコードをこちらで公開しておきます。https://github.com/TRANSCOSMOSRND/SignalR-Demo1-ASP.NET-Core-2.1/おまけせっかく作ったので、ライブ環境でも使えるようにリリースしてみましょう。プロジェクトを右クリックし、発行ボタンをクリックします。新規作成を選択して、右下の発行をクリック。こちらでライブ環境を利用できます。ECXサイト編集部トランスコスモスのECX本部が運営するサービスサイト「ECX」編集部です。コーディング、WEBデザイン、SEM、UI改善などの実務経験豊富なメンバーで執筆・運営・管理をしております。Plus」の優れた成果を持つ提携企業として認定された、国内に7社しかいない(2021年9月時点)最上位の公式パートナーです。partner(ショッピファイプラスパートナー)」です。