SignalRの概要
最初に、SignalRの開発と機能のデモンストレーションを行ってくれたDavid FowlerとDamian Edwardsに感謝したいと思います。 -ファウラー-デモンストレート-シグナルR
SignalRはMicrosoftの新しいテクノロジーであり、ほぼリアルタイムで長期間存続する永続的な接続により、非同期でスケーラブルなWebアプリケーションの開発を簡素化します。 SignalRフレームワークは、GitHub github.com/SignalR/SignalRおよびNuGet nuget.org/packages/signalrで入手できます。 近年の多くの技術革新により、SignalRへの道が開かれました。 クリエイターのデビッド・ファウラーとダミアン・エドワーズと話をすると、彼らは数年前にSignalRを作成するのは複雑すぎると言うでしょう。
Windows AzureにデプロイされたサンプルSignalRアプリケーションを試すには：
1. 2つの異なるブラウザーウィンドウまたは異なるブラウザーでsignalrincloud.cloudapp.net/Moveshape.htmリンクを開きます。
2.マウスを使用して、1つまたは2番目のウィンドウで四角形を移動します。 2番目のウィンドウで、正方形も移動するはずです。
タスクパラレルライブラリがMicrosoft .NET Framework 4に登場する前に、マルチスレッドプログラムの作成は複雑すぎました。 また、jQueryを使用した開発により、JavaScriptコードを1回記述するだけで、Firefox、Internet Explorer、Safari、Opera、Chromeで動作します。 技術の収束により、SignalRの作成と使用の技術的実現可能性への扉が開かれました。
アプリケーションを作成してクラウドにデプロイする
同じサーバー上でSignalRを同時に数十万の接続でサポートしていても、追加のスケーラビリティが必要になる場合があります。 Windows Azureは、展開とスケーリングのためにSignalRアプリケーションのホスティングを簡素化するMicrosoftのクラウドプラットフォームです。 この記事では、SignalRアプリケーションをクラウドで簡単に構築してデプロイする方法を示します。 Windows Azureの開発に必要なすべてのSDKとツールがインストールされていることを前提としています。 この問題は、次の記事blogs.msdn.com/b/brunoterkaly/archive/2012/03/27/microsoft-azure-cloud-devcamps-if-you-can-t-make-it-in-person.aspxで説明されています。
下の図に示すアプリケーションを実装する方法を見てみましょう。これにより、あるブラウザが正方形を他のブラウザにドラッグする操作をブロードキャストできます。 つまり、ユーザーが1つのブラウザーで図形を移動すると、他のすべてのブラウザーでも図形が移動します。 シェイプがブラウザ＃1に移動すると、ブラウザ＃2に移動します。
SignalRアプリケーションを作成してクラウドに配置する手順
1. Visual Studio 2010を使用してクラウドプロジェクトを作成します。
2. Asp.Net Web Roleロールをプロジェクトに追加します。 これは、Webアプリケーションのコンテナになります。
3. NuGetを使用して、必要なSignalRアセンブリとリンクを追加します。 NuGetを使用してjQuery JavaScriptモジュールを追加する必要もあります。
4.サーバー側のコードを記述します。SignalRHubを継承し、サーバーで実行されるクラスを作成します。 彼はブラウザー＃1をリッスンし、イベントをブラウザー＃2に転送します。
5. WebページといくつかのJavaScriptコードであるクライアントコードを記述します。
6. Windows Azure管理ポータルに移動し、ホスティングサービスとストレージアカウントを作成します。
7.プロジェクトをパックし、Windows Azureに展開します。
8.実行中のサーバーインスタンスの数を指定します。 これは、展開後に変更できます。
9.完了！
開発が完了すると、Visual Studio 2011ソリューションは次のようになります
Visual Studioソリューションに追加する3つの主なファイル：
MoveShape.csは、jQueryコールブロードキャストのハブまたは中央ゲートウェイとして機能するSignalRサーバーコードです。 このコードは1つのブラウザーでリッスンし、ユーザーのアクションを他のブラウザーに送信します。
MoveShape.js -SignalRサーバーバックエンドを介して呼び出されるブラウザーのJavaSriptコード。
MoveShape.htm-すべてが発生するWebページ。 ユーザーが図をドラッグするのはその上であり、他のユーザーは他のブラウザーで図がどのように動くかを確認します。
新しいクラウドプロジェクトの作成
1.新しいクラウドプロジェクトを作成します。
a。 管理者としてVisual Studioを起動し、[ ファイル] 、 [ 新しいプロジェクト]の順に選択します 。
b。 左の部分で「クラウド」を選択し、入力フィールドにプロジェクト名と場所を入力します。
2. ASP.NET Webロールをダブルクリックします
3. Webロールの名前をCloudSignalRSample_WebRoleに変更します。 これは必須ではありませんが、コードをより整理することができます。
NuGetを使用してSignalRをインストールする
NuGetはおそらくSignalRを使用する最も簡単な方法です。 SignalRビルドをダウンロードして、プロジェクトにサンプルコードを追加するだけです。 必要な依存関係もすべて追加されます。
1. NuGetがまだインストールされていない場合は、これを行う必要があります。 これを行うには、[ ツール ]メニューから[ 拡張機能マネージャー ]を選択します
2. NuGetPackage Managerを選択し、 ダウンロードを選択します
3. NuGetのインストール後、SignalRのインストールを続行できます
4. SignalR.JsとSignalR.Hosting.AspNetの2つのSignalRパッケージをインストールします（依存関係を解決すると、他のすべてが自動的にインストールされます）
5. SignalRパッケージのインストールを反映するさまざまなリンクがソリューションに追加されていることに注意してください。
サーバーおよびクライアントコードの追加
前に説明した3つのファイルを追加します。1）MoveShape.cs; （2）MoveShape.js; （3）MoveShape.htm。
1. Webロールプロジェクトを右クリックし、[ 追加] 、[ 新しいアイテム ]を選択します
2. クラスを選択し、ファイルにMoveShapre.csという名前を付けます。
3.次のコードをファイルに追加します： MoveShape.cs
using System; using System.Collections.Generic; using System.Linq; using System.Web; // Add reference using SignalR.Hubs; namespace CloudSignalRSample_WebRole { // Derive from Hub, which is a server-side class // and a client side proxy. [HubName("moveShape")] // moveShape is the name used in the Javascript public class MoveShapeHub : Hub { public void MoveShape(int x, int y) { // Broadcast drag event to other browsers Clients.shapeMoved(Context.ConnectionId, x, y); // Simple diagnostics for debugging System.Diagnostics.Debug.WriteLine("x = " + x + ", y = " + y); } } }
4.次に、NuGetを使用して、jQueryコードをプロジェクトに追加します。 [ 参照 ]を右クリックし、 [NuGetパッケージの管理 ]を選択します
5. jQuery UI（結合ライブラリ）という名前のNuGetパッケージを選択してインストールします
6.追加されたスクリプトに注意してください
7. Webロールプロジェクトを右クリックして、[ 追加] 、[ 新しいアイテム ]を選択します。
8. WebおよびJscriptファイルを選択し、 MoveShape.jsという名前を付けます
9.次のコードをファイルに追加します。
/// <reference path="Scripts/jquery-1.6.4.js" /> /// <reference path="Scripts/jquery.signalR.js" /> /// <reference path="Scripts/jquery-ui-1.8.18.js" /> $(function () { // Get a refeerence to the server-side moveShape() class. var hub = $.connection.moveShape, // Get a reference to the shape div in the html $shape = $("#shape"); // Use extend to move the shape object (if we are not the sender) $.extend(hub, { // Use css to move the shape object shapeMoved: function (cid, x, y) { if ($.connection.hub.id !== cid) { $shape.css({ left: x, top: y }); $("p:last").text("left: " + x + ", top: " + y); } } }); // Wire up the draggable behavior (when hub is done starting) // "done" is a jquery deferred method $.connection.hub.start().done(function () { $shape.draggable({ // Implement draggable effect for jquery drag: function () { // Tell the server that the shape was just dragged hub.moveShape(this.offsetLeft, this.offsetTop); } }); }) });
10. Webロールプロジェクトを右クリックし、[ 追加] 、[ 新しいアイテム ]を選択します
11. [ Web and HTML Page]を選択し、 MoveShape.htmという名前を付けます
12.次のコードをファイルに追加します。
<!DOCTYPE html > <html xmlns="http://www.w3.org/1999/xhtml"> <head> <title></title> <style type="text/css"> #shape { width: 200px; height: 200px; background: #ccc; border: 2px solid #333; } p { margin-left:10px; } </style> </head> <body> <div id="shape"></div> <script src="../Scripts/jquery-1.6.4.js" type="text/javascript"></script> <script src="../Scripts/jquery-ui-1.8.18.js" type="text/javascript"></script> <script src="../Scripts/jquery.signalR.js" type="text/javascript"></script> <script src="/signalr/hubs" type="text/javascript"></script> <script src="MoveShape.js" type="text/javascript"></script> <div> <p>Hello</p></div><p></p> </body> </html>
アプリケーションテスト
Windows Azureエミュレーターでプロジェクトを実行します。 開始する前に 、 MoveShape.hrmの開始ページを忘れずに設定してください。
1.メニューから[ デバッグ] 、[ デバッグの 開始]を選択します。 Windows AzureコンピューティングエミュレーターとWindows Azureストレージエミュレーターが起動し、MoveShape.hrmスタートページが開きます
2. IEまたはその他のブラウザーを起動し、リンク127.0.0.1：81 / MoveShape.htmを貼り付けます
3. 2つのウィンドウを並べて配置し、いずれかのブラウザーで図形を移動すると、もう一方のブラウザーでも図形が移動することを確認します。
4. Windows Azureにプロジェクトを展開する準備がすべて整いました。
Windows Azureでのプロジェクトの展開
ご注意 翻訳者：Windows Azureでhabrとロシア語を話すインターネット上でプロジェクトを展開する方法については多くの指示があるため、すでに十分な長さのテキストが乱雑にならないように、記事のこの部分は翻訳しませんでした。
おわりに
SignalRは、最新のブラウザー用の非同期でスケーラブルなWebアプリケーションを作成する際の障壁を減らすための重要な一歩です。 SignalRは、Windows Azureとともに、さらに幅広いアプリケーションへの扉を開きます。 SignalRは、従来のデスクトップアプリケーションなど、ブラウザ以外のクライアントでも動作することに注意してください。 最後に、SignalRは、Webソケット、サーバー送信イベント、Internet ExplorerのForever Frameなど、「長時間実行される要求」に基づいていない他の高レベルのトランスポートを使用する機能で作成されました。 クリエイターのデビッド・ファウラーとダミアン・エドワーズは、CodePlexとGithubの共同体でSignalRの開発と改善を続けることが期待できます。