• [アーティクル]

この記事は機械翻訳されたものです。

最先端

SignalR を使用して進行状況バーをビルドする (機械翻訳)

Dino Esposito

コード サンプルをダウンロードします。

Dino Espositoこのコラムの過去の 2 つの分割払いでは ASP を構築する方法を説明しました。ネット ソリューション、Web アプリケーションのクライアント側からリモート タスクの進行状況を監視、常緑の問題。 [成功] と [採用 AJAX のにもかかわらず、Silverlight またはフラッシュに頼ることなくが Web アプリケーション内で状況依存の進行状況バーを表示するための包括的で広く受け入れられているソリューションがまだ欠けています。

正直言って、ないの 1 つこれを行うことができます多くの方法があります。 場合は、基になるパターンは別のものを発表からではない独自のソリューションをクラフトかもしれない-特に ASP をターゲットします。ネット MVC — 過去の列。 今月は、同じトピックに戻って、私します、は進行状況バーは新しく、まだ進行中のライブラリを使用して構築する方法について説明します。SignalR。

SignalR Microsoft です。ネット フレームワーク ライブラリと jQuery のプラグイン、ASP によって開発されています。ネットのチームは、おそらくする将来のリリース、ASP の含まれて。NET プラットフォーム。 それが現在でないいくつかの非常に有望な機能を示すは。ネット フレームワークは、ますます多くの開発者が求めています。

SignalR の概要

SignalR ブラウザ ベースのクライアントと ASP を有効に、内蔵のクライアント-サーバー ライブラリです。Multistep および双方向の会話をするためのネット ベース サーバー コンポーネント。 他の言葉では、会話は、1 つ、ステートレスの要求と応答のデータ交換に限定されていません; むしろ、それは、明示的に閉じるまでを続けています。 会話行われます上の永続的な接続と、クライアント、サーバーと、サーバーで返信する複数のメッセージを送信することができます- と、はるかに興味深い — と非同期メッセージをクライアントに送信します。

私は SignalR の主な機能を説明するために使用されます、正規のデモ、チャット アプリケーションは当然として来る必要があります。 クライアントは、サーバーにメッセージを送信することによって、会話を開始; サーバー-ASP。純エンドポイント-応答し、新しい要求をリッスンしています。

SignalR Web シナリオを具体的には、jQuery 1.6 (あるいはより新しい) 必要がありますクライアントと ASP。ネット サーバー上。 SignalR NuGet またはビットは GitHub のレポジトリから直接ダウンロードしてインストールすることができます github.com/SignalR/SignalR。 図 1 NuGet ページ SignalR のすべてのパッケージを示しています。 少なくとも、SignalR、SignalR.Server、.net framework のサーバー側部分とフレームワークの Web クライアントの一部の SignalR.Js が依存関係をダウンロードする必要があります。 あなたを見るに、他のパッケージ図 1 を提供するより特定の目的を。NET クライアント、Ninject 依存関係リゾルバーと HTML5 ウェブ ソケットで、代替輸送機構。

SignalR Packages Available on the NuGet Platform
図 1 SignalR パッケージ NuGet プラットフォームで利用可能

チャット例中

進行状況バー ソリューションをビルドする前に、それはダウンロード可能なソース コードの分散のチャットの例を見てすることによって、ライブラリに慣れるに役に立つだろう (archive.msdn.microsoft.com/mag201203CuttingEdge) とその他の情報 （） ほとんどの関連記事は、ウェブ上で現在利用可能な 。 しかし、SignalR がリリースされたプロジェクトではないことに注意してください。

ASP のコンテキストでは。ネット MVC プロジェクト、スクリプト ファイルの束を参照してここで示すように起動します。

<script src="@Url.Content("~/Scripts/jquery-1.6.4.min.js")"
  type="text/javascript"></script>
<script src="@Url.Content("~/Scripts/jquery.signalr.min.js")"
  type="text/javascript"></script>
<script src="@Url.Content("~/signalr/hubs")"
  type="text/javascript"></script>

そこには何も ASP を特定に注意してください。ネット MVC SignalR で、ライブラリを使用することができます同様に Web フォーム アプリケーションで。

強調するために興味深い点は、最初の 2 つのリンクは、特定のスクリプト ファイルを参照することです。 3 番目のリンクでは、代わりに、まだいくつかの JavaScript コンテンツ、参照が、そのコンテンツがその場で生成される- とは、ホスト内で ASP が他のいくつかのコードに依存します。NET アプリケーション。 バージョン 8 より前のバージョンの Internet Explorer をサポートする場合は、JSON2 ライブラリを必要があることにも注意してください。

ページ読み込み時に、クライアントのセットアップを完了し、接続を開きます。 図 2 、必要なコードを示しています。 このコードから、準備イベント jQuery の内を呼びたいとして可能性があります。 コード HTML 要素のスクリプト ハンドラーのバインド — 控えめな JavaScript を — と SignalR 会話を準備します。

図 2 セットアップ SignalR ライブラリのチャット例

<script type="text/javascript">
  $(document).ready(function () {    // Add handler to Send button
    $("#sendButton").click(function () {
      chat.send($('#msg').val());
    });
    // Create a proxy for the server endpoint
    var chat = $.connection.chat; 
    // Add a client-side callback to process any data
    // received from the server
    chat.addMessage = function (message) {
      $('#messages').append('<li>' + message + '</li>');
    };
    // Start the conversation
    $.connection.hub.start();
  });
</script>

$.Connection オブジェクト、SignalR スクリプト ファイルで定義されていることは注目に値する。 チャット オブジェクトは対照的に、そのコードがその場で生成され、ハブ スクリプト参照を介してクライアント ページに注入という意味での動的なオブジェクトです。 チャット オブジェクトは、最終的に、サーバー側オブジェクトの JavaScript プロキシです。 この時点では、クライアント コードはクリアする必要があります図 2 を意味する （とは） 少し、強力なサーバー側の対応なし。

ASP。ネット プロジェクトは、SignalR アセンブリとその依存関係 Microsoft.Web.Infrastructure などへの参照を含める必要があります。 サーバー側コードには作成する JavaScript オブジェクトと一致するマネージ クラスが含まれています。 コードを参照して図 2、サーバー側オブジェクトとクライアント側のチャット オブジェクトと同じインターフェイスをする必要があります。 このサーバーのクラスは、SignalR アセンブリで定義されているハブ クラスから継承されます。 ここでは、クラスの署名です。

using System;
using SignalR.Hubs;
namespace SignalrProgressDemo.Progress
{
  public class Chat : Hub
  {
    public void Send(String message)
    {
      Clients.addMessage(message);
    }
  }
}

クラス内のすべてのパブリック メソッド、JavaScript クライアントのメソッドに一致する必要があります。 または、少なくとも、JavaScript オブジェクトに呼び出されるメソッド一致するメソッド、サーバー クラスにする必要があります。 Send メソッドを見るので起動のスクリプト コードで図 2 チャット オブジェクトの Send メソッドへの呼び出しを配置することを以前定義されている終了します。 クライアントにデータを送信するには、サーバー コードで、ハブ クラスのクライアント プロパティを使用してください。 クライアント メンバーは抑止を動的に参照することができますタイプのダイナミック、­オブジェクトを採掘します。 特に、クライアントのプロパティに後のクライアント オブジェクトのインターフェイスを構築、サーバー側オブジェクトへの参照が含まれています。チャット オブジェクト。 チャットのオブジェクトで図 2 は addMessage メソッドが同じ addMessage メソッドも、サーバー側のチャット オブジェクトによって公開されることを想定しています。

進行状況バー デモへ

今みましょう任意の進行状況をクライアントに通知する通知システムを構築する SignalR サーバーではおそらく時間のかかるタスク中に利用されています。 最初のステップとして、タスクをカプセル化するサーバー側クラスを作りましょう。 このクラスには、割り当てる名前が任意選択を後で作成するクライアント コードに影響します。 つまり、単に注意のクラス名を選択する 1 つのより多くの理由があります。 さらに重要なハブをという名前のクラスを提供する SignalR からこのクラスを継承します。 ここでは、署名です。

public class BookingHub : Hub
{
  ...
}

BookingHub クラスはいくつかのパブリック メソッドが — ほとんどの目的にかなって、シーケンスの入力パラメーターを受け入れるメソッドを void。 ハブのクラスのすべてのパブリック メソッドは可能なエンドポイントを呼び出すクライアントを表します。 例としては、フライトを予約するためのメソッドを追加しましょう。

public void BookFlight(String from, String to)
{
  ...
}

このメソッドは、(は、フライトの予約は) 特定のアクションを実行するすべてのロジックを含むと予想されます。 コードは、いくつかの方法で任意の進行状況をクライアントに報告されます様々 な段階の呼び出しも含まれます。 BookFlight は次のように見えるメソッドのスケルトンとしましょう。

public void BookFlight(String from, String to)
{
  // Book first leg  var ref1 = BookFlight(from, to);  // Book return flight
  var ref2 = BookFlight(to, from);
  // Handle payment
  PayFlight(ref1, ref2);
}

これらの主なオペレーションと連携して、進行状況をユーザーに通知します。 ハブの基本クラス型の動的に定義されたクライアントと呼ばれるプロパティを提供しています。 他の言葉では、クライアント コールバックにこのオブジェクトのメソッドを呼び出すでしょう。 しかし、形と形のこのメソッドは、クライアント自体が決定されます。 [クライアントに移りましょう。

クライアント ページに述べたように、ページが読み込まれるときに実行されるスクリプト コード必要があります。 JQuery を使用する場合は、$(ドキュメント) の .ready イベントはこのコードを実行するためには良い場所です。 まず、プロキシをサーバー オブジェクトを取得します。

var bookingHub = $.connection.bookingHub;
// Some config work
...
// Open the connection
$.connection.hub.start();

$.Connection SignalR ネイティブ コンポーネントを参照するオブジェクトの名前をクライアントには、BookingHub オブジェクトのパブリック インターフェイスを公開は、動的に作成されたプロキシです。 <script> が、signalr ・ ハブ リンク経由で、プロキシが生成されます。 ページのセクション。 名前を使用する命名規則はキャメル ケース、クラス BookingHub で c# javascript オブジェクト bookingHub になることを意味です。 このオブジェクトには、サーバー オブジェクトのパブリック インターフェイスに一致するメソッドを見つけます。 また、メソッドの名前付け規則からは、同じ名前を使用します。 HTML ボタンに、クリック ハンドラーを追加およびここのように AJAX を介してサーバー操作を起動できます。

bookingHub.bookFlight("fco", "jfk");

任意の応答を処理するクライアント メソッドを定義することができます。 たとえば、メッセージを受信し、HTML の span タグを表示、displayMessage メソッド、クライアント プロキシを定義できます。

bookingHub.displayMessage = function (message) {
  $("#msg").html(message);
};

表示の署名のための責任をしていることに注意してください­メッセージ メソッド。 あなたは、何が渡され、何があなたを入力する入力を期待を決定します。

輪を閉じるには、ちょうど 1 つの最終的な問題です。displayMessage と最終的にデータを渡すための責任はどなたですか。 これは、サーバー側ハブ コードです。 DisplayMessage (とする場所で、その他のコールバック メソッド) を呼び出してから、ハブ オブジェクト経由でクライアント オブジェクト内。 図 3 ハブ クラスの最終バージョンを示します。

図 3 ハブ クラスの最終的なバージョン

public void BookFlight(String from, String to)
{
  // Book first leg
  Clients.displayMessage(    String.Format("Booking flight: {0}-{1} ...", from, to));
  Thread.Sleep(2000);
  // Book return
  Clients.displayMessage(    String.Format("Booking flight: {0}-{1} ...", to, from));
  Thread.Sleep(3000);
  // Book return
  Clients.displayMessage(    String.Format("Booking flight: {0}-{1} ...", to, from));
  Thread.Sleep(2000);
  // Some return value
  Clients.displayMessage("Flight booked successfully.");
}

この例では、displayMessage 名前完全に JavaScript のコードを使用、大文字する必要があることに注意してください。 DisplayMessage など何かを間違って入力した場合は、すべての例外を取得しません — は、いずれかを実行しないコード。

それを実行する独自のスレッドを取得し、ASP には影響しませんので、ハブ コード、タスク オブジェクトとして実装されます。NET スレッド プール。

サーバー タスクの結果場合スケジュールされている非同期の作業では、標準のワーカー プールからスレッドを選択します。 利点は、彼らが待機状態にしている間は、新しいメッセージを待っている彼らスレッドですべてを使用していないことを意味の要求ハンドラーが非同期ではありません SignalR。 メッセージが受信され、するを実行するには、ASP の仕事です。ネット ワーカー スレッドが使用されます。

HTML を True 進行状況バー

過去の列だけでなく、この 1 つで、私は用語の進行状況バー頻繁にこれまでクライアント UI の例としては、古典的なゲージ バーを表示せず使用。 ゲージ バーを持つだけのすてきな視覚効果と非同期インフラストラクチャでより複雑なコードを必要としません。 しかし、 図 4 ゲージ バー割合の値を与え、その場で構築する JavaScript コードを示しています。 適切な CSS クラスの HTML 要素の外観を変更することができます。

図 4 は、HTML ベースのゲージ バーを作成します。

var GaugeBar = GaugeBar || {};
GaugeBar.generate = function (percentage) {
  if (typeof (percentage) != "number")
    return;
  if (percentage > 100 || percentage < 0)
    return;
  var colspan = 1;
  var markup = "<table class='gauge-bar-table'><tr>" +
    "<td style='width:" + percentage.toString() +
    "%' class='gauge-bar-completed'></td>";
  if (percentage < 100) {
    markup += "<td class='gauge-bar-tobedone' style='width:" +
      (100 - percentage).toString() +
      "%'></td>";
    colspan++;
  }
  markup += "</tr><tr class='gauge-bar-statusline'><td colspan='" +
    colspan.toString() +
    "'>" +
    percentage.toString() +
    "% completed</td></tr></table>";
  return markup;
}

あなたは、ボタン クリック ハンドラーからこのメソッドを呼び出します。

bookingHub.updateGaugeBar = function (perc) {
  $("#bar").html(GaugeBar.generate(perc));
};

UpdateGaugeBar メソッドは、したがっては進行状況をレポートする別のクライアント コールバックを使用して別のハブ メソッドから呼び出されます。 ちょうど displayMessage 以前 updateGaugeBar ハブ メソッド内で使用を置き換えることができます。

Web クライアントだけでなく

私は、Web フロント エンドを必要とする API は、主に SignalR を発表しました。 これはおそらくそれを使用するとの可能性があります、最も説得力のあるシナリオですが、SignalR の Web クライアントだけをサポートする限られた方法です。 クライアントをダウンロードすることができます。ネットのデスクトップ アプリケーション、および別のクライアントは Windows Phone クライアントをサポートするためにすぐにリリースされます。

この列は、SignalR の面で、それをプログラムするには、最も簡単なと最も効果的なアプローチを提示のみ傷。 今後のコラムでは、私はフードと、ワイヤのパケットの移動方法の下で魔法のいくつかについて説明します。 ご期待ください。

Dino Esposito は、著者の「プログラミング Microsoft ASP。ネット MVC3」(マイクロソフト プレス、2011年） と共著者の「Microsoft。ネット:企業のためのアプリケーションを構築」(マイクロソフト プレス、2008年）。イタリアで基づいて、彼は世界的な業界のイベントで頻繁にスピーカーです。Twitter で彼をフォローすることができます twitter.com/despos。

この記事のレビュー、技術スタッフに感謝：Damian Edwards