Clever Geek Handbook

SignalRコア。 「こんにちは、ハブル！」

概要：.NET Core 2のSignalRとIDE Riderでの開発を示す小さな自己完結型の例。 最後に、同じトピックに関するDotNext会議のDino Espositoビデオ。

誰もがブラウザで通知をプッシュするために使用されます。 ただし、それらを作成するには、プログラマーからの一定の経験と、Webソケットやその他のフロントエンドのトラブルをいじり、Webアプリケーションが適切なタイミングでブラウザークライアントに更新を送信できるようにする必要があります。 さらに、Webソケットは常に適切に機能するとは限らないため、いくつかのトランスポートをサポートするコードを作成する必要があります。そのようなことを考えて、適切にデバッグする必要があります。







当然のことながら、自分でそれを使用する既製のライブラリがあります。 ASP.NET Webアプリケーションの世界では、これはSignalRです。これにより、開発者は、リストされた困難から抜け出し、プッシュ通知を操作するための単純なプログラミングモデルを使用できます。













SignalRを使用すると、サーバー側でパブリッシャー/サブスクライバーモデルを実装できます。 通常は（必ずしもそうではありませんが）Webページであるクライアントは、いわゆるハブ（ハブ）にサブスクライブし、クライアントは更新を送信できます。 すべてがHabréと同じです-.NETハブに遭遇し、サブスクライブし、コメントを嫌います:)







到着した更新はいつでも送信できます（コメントページを見てください：サーバーはブラウザに表示されたばかりの新しいコメントを送信します-そして、ページはすぐにユーザーにコメントを表示します）、またはクライアントからのメッセージによって引き起こされますすべて "-ブラウザではなく、Habrインターフェイスで）。







ただし、古いSignalRはASP.NET Coreと互換性がありません。 したがって、Webアプリケーションでプッシュ通知を使用する場合は、以前に他の方法を探す必要がありました。 去年の秋、SignalR Coreの2つのアルファバージョン（より正確には、「ASP.NET Core 2.0用のSignalR」）がリリースされました。







そのようなアプリケーションのプログラミングモデル全体を正直に説明するには、一連の投稿を書く必要があります。 簡単なものから始めましょう。「UFOが到着してこのメ​​ッセージを残しました」というメッセージを送信する、単純なサーバーハブと単純なJavaScriptクライアントのバンドルの例を使用して、新しいテクノロジーを試してみましょう。







サーバー



これは、ASP.NET Core 2のSignalR Core alpha 2で発生しています。JetbrainsRiderは 、クールだからIDEとして使用されます。







最初に、空のアプリケーション（.NET Core / ASP.NET WebApplication）を作成します。















このプロジェクトテンプレートには既にMicrosoft.AspNet.All



パッケージが含まれており、開始する必要があるものはすべて揃っていMicrosoft.AspNet.All



。 原則として、アプリケーション起動ボタンをすぐに押すことができ、それは機能します。







SignalRのNuGetパッケージをインストールする必要があります。 プレリリースを扱っているため、 PreRelease



を使用する必要があることに注意してください（NuGetに-Pre



オプションが追加されます）。















次に、ハブを追加します。 新しいクラスを作成します。 







  public class HabrDotNetHub : Hub { public Task BroadcastNlo() { return Clients.All.InvokeAsync("nlo"); } }


SignalRコアでは、 ハブから継承するクラスは、サブスクライブしているクライアントと通信できます。 コミュニケーションは、いくつかの方法で行うことができます。「すべての顧客」、「1人を除くすべて」にブロードキャストする、単一のクライアントに送信する、または特定のグループに送信する。 この例では、メッセージ「nlo」をすべてのクライアントにブロードキャストします。







Startupクラスでは、デフォルトコード「Hello world」を削除してハブを登録する必要があります。 次のようなものが得られます。 







  public class Startup { public void ConfigureServices(IServiceCollection services) { services.AddSignalR(); } public void Configure(IApplicationBuilder app, IHostingEnvironment env) { if (env.IsDevelopment()) { app.UseDeveloperExceptionPage(); } app.UseFileServer(); app.UseSignalR(routes => { routes.MapHub<HabrDotNetHub>("nlo"); }); } }


UseSignalR()



クライアントがハブにアクセスできるルートを登録します。 静的（HTMLおよびJavaScript）をレンダリングするにUseFileServer()



ます。







起動することを確認する必要があります。 そうでない場合、これは問題です。修正する必要があります。







お客様



Webページがハブと通信するには、いくつかのスクリプトが必要です。 手動で行うこともできますが、 npmを使用してください。 もちろん、事前にインストールする必要があります（ Node.jsにバンドルされています ）。 コンソールはすでにRiderに組み込まれているため、コンソールを開いてwwwroot



フォルダーに移動し、次のコマンドを実行する必要があります。 







 npm install @aspnet/signalr-client npm install jquery










最初のパッケージは、SignalR CoreのJavaScriptクライアントです（現在のファイルの最新バージョンはsignalr-client-1.0.0-alpha2-final.jsと呼ばれています）。 2番目のパッケージはjQueryライブラリです。これは、SignalR Coreには不要になりましたが、フロントエンドのコードを使用する場合、大幅に簡素化されます。 signalr-client-1.0.0-alpha2-final.jsとjquery.jsをwwwrootフォルダーにコピーできますが、 npm



生成したとおりにすべてをそのままにしておくのは面倒です。







次に、 wwwrootディレクトリにindex.htmlファイルを作成します。 上記のスクリプトへのリンク、メッセージのプレースホルダー（この例では、IDは "log"）、およびすべてが連携するように小さなスクリプトを追加します。 







 <!DOCTYPE html> <html> <head> <meta charset="utf-8" /> <title>Hello SignalR Core!</title> <script src="node_modules/jquery/dist/jquery.js"></script> <script src="node_modules/@aspnet/signalr-client/dist/browser/signalr-client-1.0.0-alpha2-final.js"></script> <script type="text/javascript"> $(document).ready(function () { var connection = new signalR.HubConnection('/nlo'); connection.on('nlo', data => { $("#log").append("      <br />"); }); connection.start() .then(() => connection.invoke('BroadcastNlo')); }); </script> </head> <body> <div id="log"></div> </body> </html>


このJavaScriptコードは、ハブとの接続を確立し、コールバックを登録して「nlo」メッセージを受信し、ハブのBroadcastNlo()



メソッドを呼び出します。 私たちは試します：















いいね！ 接続が確立され、サーバー（つまりハブ）からの応答で何かを取得します。 同じエンドポイントに対してさらに2、3のブラウザーウィンドウを開きましょう。















ここで、新しいウィンドウを開くと、接続されているすべてのクライアントに「nlo」というメッセージがブロードキャストされていることがわかります。 サーバーにステータスを保存しないため、クライアントがすでに利用できるテキストにメッセージが追加されるだけです。 後で接続する（したがって古いメッセージの一部を見逃した）クライアントは、画面に表示されるメッセージが少なくなります。







Panem et circenses！



これはマイクロソフトの別の技術ではありません。字幕は「パンとサーカス！」としてのみ翻訳されています。パンについては、「nlo」フォワーディングで上記の例を取り上げて、ちょっと考えてみましょう。もっと美しいものを見てみましょう。







ASP.NET Core SignalRのサンプルを含む公式リポジトリには、「WhiteBoard」と呼ばれる優れた完成プロジェクトがあります。 これは非常にシンプルで最小限のWebベースのミーティングボードの実装であり、すべてのクライアントがブラウザーで、ページ上にマウス（またはタッチデバイスで例を駆動している場合は指）で描画したものを他のクライアントと一緒に表示します。 コードを見ると、従来のWebチャットデザインと比較して、美しく簡潔に記述されていることがわかります。







描かれた画像は、一連のセグメント（より正確には、セグメントを描画するポイント間の座標）として送信されます。 明らかに、私たちが持っている情報は、ユーザーが入力したフォームのテストラインではなく、マニピュレーターの座標になります。







さらに、ハブはすべてのクライアントにメッセージを送信するのではなく（最も単純なチャットの場合のように）、情報を送信した人 （ここから-AllExcept） を除く全員にメッセージを送信します。 







 using Microsoft.AspNetCore.SignalR; using System.Collections.Generic; using System.Threading.Tasks; namespace WhiteBoard.Hubs { public class DrawHub : Hub { public Task Draw(int prevX, int prevY, int currentX, int currentY, string color) { return Clients.AllExcept(new List<string> { Context.ConnectionId }).InvokeAsync("draw", prevX, prevY, currentX, currentY, color); } } }


次に、クライアント（各Webページ）は、ユーザーによって描画されたセグメントに関するデータを次のように送信します。 







 connection.invoke('draw', last_mousex, last_mousey, mousex, mousey, clr);


drawは、登録済みのDrawHubハブへのルートです。







ここでは、ASP.NET Core SignalRが、単なるテキスト文字列ではなく、データセットを伝達するというかなり日常的なタスクをどのように処理するかを示します。 このデータを受信側で適切に使用するだけです。 彼はボンネットの下にたくさんの小さなものを隠し、絶対に低レベルの困難で頭を詰まらせないようにします。 そこで例を挙げて、ペン（または、私のようにマウス）で腕を動かして、手を試してみましょう。













このトピックをさらに詳しく調べるには、DotNext 2016カンファレンスのDino Espositoレポートをご覧ください。









広告の分。 おそらくご存知のように、会議を行っています。 .NETに関する次の会議は、2018年4月22〜23日に開催されるDotNext Piter 2018です。.NETCore （ 会議プログラムで詳細に記述されています）など、さまざまなファッショナブルな技術の開発者とライブでチャットできます。 要するに、私たちはあなたを待っています。


More articles:


All Articles