SignalRの概要
最初に、SignalRの開発と機能のデモンストレーションを行ってくれたDavid FowlerとDamian Edwardsに感謝したいと思い
ます。 -ファウラー-デモンストレート-シグナルRSignalRは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.csusing 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.次のコードをファイルに追加します。
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の開発と改善を続けることが期待できます。