ハンズ オン ラボ:SignalR によるリアルタイム Web アプリHands On Lab: Real-Time Web Applications with SignalR

によってWeb キャンプ チームby Web Camps Team

Warning

このドキュメントは SignalR の最新バージョンはありません。This documentation isn't for the latest version of SignalR. 見てASP.NET Core SignalRします。Take a look at ASP.NET Core SignalR.

Web のキャンプ トレーニング キット、2015 年 10 月リリースのダウンロードします。Download Web Camps Training Kit, October 2015 Release

リアルタイムの Web アプリケーションには、サーバー側の偶然ですが、リアルタイムで接続されているクライアントにコンテンツをプッシュする機能が機能します。Real-time Web applications feature the ability to push server-side content to the connected clients as it happens, in real-time. ASP.NET 開発者向けのASP.NET SignalRは自分のアプリケーションにリアルタイム web 機能を追加するライブラリです。For ASP.NET developers, ASP.NET SignalR is a library to add real-time web functionality to their applications. これは、クライアントとサーバーの最適な使用可能なトランスポート最適使用可能なトランスポートを自動的に選択すると、いくつかのトランスポート利用します。It takes advantage of several transports, automatically selecting the best available transport given the client and server's best available transport. 活用されてWebSocketブラウザーとサーバー間の双方向通信を実現する HTML5 API。It takes advantage of WebSocket, an HTML5 API that enables bi-directional communication between the browser and server.

SignalRクライアント RPC サーバーを行うためのシンプルで高レベルの API も提供します (サーバー側の .NET コードからのクライアントのブラウザーで JavaScript 関数を呼び出す) で、ASP.NET アプリケーションとの接続管理などの便利なフックを追加します。など、接続/切断イベント、接続のグループ化、および承認します。SignalR also provides a simple, high-level API for doing server to client RPC (call JavaScript functions in your clients' browsers from server-side .NET code) in your ASP.NET application, as well as adding useful hooks for connection management, such as connect/disconnect events, grouping connections, and authorization.

SignalRクライアントとサーバー間のリアルタイムの作業を行うには、必要なトランスポートの中に、抽象化です。SignalR is an abstraction over some of the transports that are required to do real-time work between client and server. A SignalR接続は、HTTP、として起動しには、昇格をWebSocket使用可能な場合に接続します。A SignalR connection starts as HTTP, and is then promoted to a WebSocket connection if available. WebSocketの理想的なトランスポートは、 SignalR、サーバー メモリが最も効率的な使用には、最小の待機時間を備え、基になる最も機能があります (クライアント間の全二重通信など、サーバー) では最も厳しい要件もあります。WebSocket 、サーバーを使用する必要がありますWindows Server 2012またはWindows 8、と共に .NET Framework 4.5します。WebSocket is the ideal transport for SignalR, since it makes the most efficient use of server memory, has the lowest latency, and has the most underlying features (such as full duplex communication between client and server), but it also has the most stringent requirements: WebSocket requires the server to be using Windows Server 2012 or Windows 8, along with .NET Framework 4.5. これらの要件が満たされない場合SignalR他のトランスポートを使用して、その接続の確立を試みます (など長いポーリングの Ajax)。If these requirements are not met, SignalR will attempt to use other transports to make its connections (like Ajax long polling).

SignalR API には、クライアントとサーバー間の通信に 2 つのモデルが含まれています。永続的な接続Hubsします。The SignalR API contains two models for communicating between clients and servers: Persistent Connections and Hubs. A接続別にグループ化、またはブロードキャスト メッセージを受信者の 1 つの送信を単純なエンドポイントを表します。A Connection represents a simple endpoint for sending single-recipient, grouped, or broadcast messages. Aハブは、クライアントとサーバーが相互に直接メソッドを呼び出すことができる接続 API に基づいて構築されておりより高度なパイプラインです。A Hub is a more high-level pipeline built upon the Connection API that allows your client and server to call methods on each other directly.

SignalR のアーキテクチャ

すべてのサンプル コードとスニペットが含まれる Web キャンプ トレーニング キット、2015 年 10 月リリースでご利用いただけます https://github.com/Microsoft-Web/WebCampTrainingKit/releases/tag/v2015.10.13bします。All sample code and snippets are included in the Web Camps Training Kit, October 2015 Release, available at https://github.com/Microsoft-Web/WebCampTrainingKit/releases/tag/v2015.10.13b. そのページでインストーラーのリンクが機能しなく; に注意してください。[アセット] セクションのリンクのいずれかを代わりに使用します。Please note that the Installer link on that page no longer works; use one of the links under the Assets section instead.

概要Overview

目的Objectives

このハンズオン ラボでは、学習する方法。In this hands-on lab, you will learn how to:

  • SignalR を使用してクライアントにサーバーからの通知を送信します。Send notifications from server to client using SignalR.
  • スケール アウト、SignalR アプリケーションを使用してSQL Serverします。Scale Out your SignalR application using SQL Server.

必須コンポーネントPrerequisites

このハンズオン ラボを完了する、次が必要。The following is required to complete this hands-on lab:

セットアップSetup

このハンズオン ラボの演習を実行するためには、まず環境を設定する必要があります。In order to run the exercises in this hands-on lab, you will need to set up your environment first.

  1. Windows エクスプ ローラー ウィンドウを開き、ラボを参照ソースフォルダー。Open a Windows Explorer window and browse to the lab's Source folder.
  2. 右クリックSetup.cmd選択管理者として実行環境を構成すると、このラボの Visual Studio のコード スニペットがインストールのセットアップ プロセスを起動します。Right-click Setup.cmd and select Run as administrator to launch the setup process that will configure your environment and install the Visual Studio code snippets for this lab.
  3. ユーザー アカウント制御ダイアログ ボックスが表示されている場合は、続行するアクションを確認します。If the User Account Control dialog box is shown, confirm the action to proceed.

Note

セットアップを実行する前に、このラボのすべての依存関係をチェックしたことを確認します。Make sure you have checked all the dependencies for this lab before running the setup.

コード スニペットの使用Using the Code Snippets

ラボ ドキュメント全体を通じて、コード ブロックを挿入するよう指示されます。Throughout the lab document, you will be instructed to insert code blocks. 便宜上、このコードのほとんどは、Visual Studio コード スニペットを手動で追加することを避けるために Visual Studio 2013 内からアクセスできるとして提供されます。For your convenience, most of this code is provided as Visual Studio Code Snippets, which you can access from within Visual Studio 2013 to avoid having to add it manually.

Note

ソリューションでは個々 の演習を伴います、開始を使用すると、各演習を他のユーザーとは無関係に練習のフォルダー。Each exercise is accompanied by a starting solution located in the Begin folder of the exercise that allows you to follow each exercise independently of the others. 演習の中に追加されるコード スニペットはこれらのスターティング ソリューションが表示されないし、演習を完了するまで動作しない可能性がありますに注意してください。Please be aware that the code snippets that are added during an exercise are missing from these starting solutions and may not work until you have completed the exercise. 演習では、ソース コード内でも表示されます、エンド結果から、対応する演習の手順を実行するコードと Visual Studio ソリューションを含むフォルダー。Inside the source code for an exercise, you will also find an End folder containing a Visual Studio solution with the code that results from completing the steps in the corresponding exercise. このハンズオン ラボを使用すると、追加のヘルプが必要な場合は、これらのソリューションをガイドとして使用できます。You can use these solutions as guidance if you need additional help as you work through this hands-on lab.


演習Exercises

このハンズオン ラボには、次の演習が含まれます。This hands-on lab includes the following exercises:

  1. SignalR を使用してリアルタイムのデータの使用Working with Real-Time Data Using SignalR
  2. SQL Server を使用したスケール アウトScaling Out Using SQL Server

この演習の所要時間を推定するには。60 分Estimated time to complete this lab: 60 minutes

Note

Visual Studio を初めて起動すると、定義済みの設定のコレクションの 1 つを選択する必要があります。When you first start Visual Studio, you must select one of the predefined settings collections. 定義済みの各コレクションは、特定の開発スタイルに一致するように設計されていて、ウィンドウのレイアウト、エディターの動作、IntelliSense コード スニペット、およびダイアログ ボックスのオプションを決定します。Each predefined collection is designed to match a particular development style and determines window layouts, editor behavior, IntelliSense code snippets, and dialog box options. このラボの手順を使用する場合は、Visual Studio で特定のタスクを実行するために必要な操作を記述する、汎用開発設定コレクション。The procedures in this lab describe the actions necessary to accomplish a given task in Visual Studio when using the General Development Settings collection. 開発環境のさまざまな設定のコレクションを選択する場合、考慮する必要がある手順に違いがあります。If you choose a different settings collection for your development environment, there may be differences in the steps that you should take into account.

演習 1:SignalR を使用してリアルタイムのデータの使用Exercise 1: Working with Real-Time Data Using SignalR

全体を行うことができますチャットの使用が例としては、多くの場合、リアルタイム Web 機能を備えたより。While chat is often used as an example, you can do a whole lot more with real-time Web functionality. ユーザーは、新しいデータまたは長いポーリングが新しいデータを取得する Ajax ページの実装を表示する web ページを更新します。 いつでも SignalR を使用することができます。Any time a user refreshes a web page to see new data or the page implements Ajax long polling to retrieve new data, you can use SignalR.

SignalR をサポートしていますサーバー プッシュまたはブロードキャスト機能; 接続の管理を自動的に処理されます。SignalR supports server push or broadcasting functionality; it handles connection management automatically. クライアント/サーバー通信のクラシックの HTTP 接続では、接続が要求ごとに再確立ですが SignalR クライアントとサーバー間の永続的な接続を提供します。In classic HTTP connections for client-server communication, connection is re-established for each request, but SignalR provides persistent connection between the client and server. Signalr は、リモート プロシージャ コール (RPC) を使用してブラウザー内のクライアント コードを呼び出すサーバー コードで要求-応答のモデルではなく今日私たちが知る。In SignalR the server code calls out to a client code in the browser using Remote Procedure Calls (RPC), rather than the request-response model we know today.

この演習では、構成、ギーク Quiz SignalR を使用して、ページ全体を更新する必要はありません、更新されたメトリックと統計情報のダッシュ ボードを表示するアプリケーション。In this exercise, you will configure the Geek Quiz application to use SignalR to display the Statistics dashboard with the updated metrics without the need to refresh the entire page.

タスク 1 – おたくクイズの統計情報 ページの調査Task 1 – Exploring the Geek Quiz Statistics Page

このタスクでは、アプリケーションを経由して統計情報 ページを表示する方法を確認、方法は、情報をどのように向上できる更新されます。In this task, you will go through the application and verify how the statistics page is shown and how you can improve the way the information is updated.

  1. 開くVisual Studio Express 2013 for Webを開くと、 GeekQuiz.slnソリューション、 Source\Ex1 WorkingWithRealTimeData\Beginフォルダー。Open Visual Studio Express 2013 for Web and open the GeekQuiz.sln solution located in the Source\Ex1-WorkingWithRealTimeData\Begin folder.

  2. キーを押してF5ソリューションを実行します。Press F5 to run the solution. ログインページがブラウザーに表示する必要があります。The Log in page should appear in the browser.

    ソリューションを実行しているRunning the solution

    ソリューションの実行Running the solution

  3. クリックして登録アプリケーションに新しいユーザーを作成するページの右上隅にします。Click Register in the upper-right corner of the page to create a new user in the application.

    登録リンクRegister link

    登録リンクRegister link

  4. 登録ページで、入力、ユーザー名パスワード、順にクリックします登録します。In the Register page, enter a User name and Password, and then click Register.

    ユーザーの登録Registering a user

    ユーザーの登録Registering a user

  5. アプリケーションは、新しいアカウントを登録し、ユーザーが認証され、クイズの最初の質問を表示したホーム ページにリダイレクトします。The application registers the new account and the user is authenticated and redirected back to the home page showing the first quiz question.

  6. 開く、統計新しいウィンドウでページし、配置、ホームページと統計サイド バイ サイドでのページします。Open the Statistics page in a new window and put the Home page and Statistics page side-by-side.

    サイド バイ サイドでの windowsSide-by-side windows

    サイド バイ サイドでの windowsSide-by-side windows

  7. ホーム ページで、オプションのいずれかをクリックして、質問に回答します。In the Home page, answer the question by clicking one of the options.

    質問に答えAnswering a question

    質問の回答Answering a question

  8. ボタンのいずれかをクリックした後、応答が表示されます。After clicking one of the buttons, the answer should appear.

    質問の答えが正しいQuestion answered correct

    正しく回答する質問Question answered correctly

  9. 統計情報 ページで提供される情報が古いことに注意してください。Notice that the information provided in the Statistics page is outdated. 更新された結果を表示するには、ページを更新します。Refresh the page in order to see the updated results.

    統計のページStatistics page

    統計情報 ページStatistics page

  10. Visual Studio に戻るし、デバッグを停止します。Go back to Visual Studio and stop debugging.

タスク 2 – 追加の SignalR おたくクイズをオンラインのグラフを表示するにはTask 2 – Adding SignalR to Geek Quiz to Show Online Charts

このタスクでは、SignalR をソリューションに追加し、サーバーに新しい回答が送信されるときに、クライアントに更新プログラムを自動的に送信します。In this task, you will add SignalR to the solution and send updates to the clients automatically when a new answer is sent to the server.

  1. ツール メニューの選択 Visual Studio でNuGet パッケージ マネージャー、 をクリックし、パッケージ マネージャー コンソールします。From the Tools menu in Visual Studio, select NuGet Package Manager, and then click Package Manager Console.

  2. パッケージ マネージャー コンソールウィンドウで、次のコマンドを実行します。In the Package Manager Console window, execute the following command:

    Install-Package Microsoft.AspNet.SignalR
    

    SignalR パッケージのインストールSignalR package installation

    SignalR パッケージのインストールSignalR package installation

    Note

    インストールするときにSignalR手動で更新する必要はまったく新しい MVC 5 アプリケーションから NuGet パッケージ バージョン 2.0.2、 OWINパッケージをバージョン 2.0.1 (またはそれ以降) SignalR をインストールする前にします。When installing SignalR NuGet packages version 2.0.2 from a brand new MVC 5 application, you will need to manually update OWIN packages to version 2.0.1 (or higher) before installing SignalR. これを行うには、以下のスクリプトを実行することができます、パッケージ マネージャー コンソール:To do this, you can execute the following script in the Package Manager Console:

    get-package | where-object { $_.Id -like "Microsoft.Owin*"} | Update-Package
    

    SignalR の将来のリリースで OWIN の依存関係は自動的に更新されます。In a future release of SignalR, OWIN dependencies will be automatically updated.

  3. ソリューション エクスプ ローラー、展開、スクリプトフォルダーに注目してくださいを SignalR jsファイル、ソリューションに追加されました。In Solution Explorer, expand the Scripts folder and notice that the SignalR js files were added to the solution.

    SignalR JavaScript 参照SignalR JavaScript references

    SignalR JavaScript 参照SignalR JavaScript references

  4. ソリューション エクスプ ローラーを右クリックし、 GeekQuizプロジェクトで、追加 | 新しいフォルダー、名前を付けますハブします。In Solution Explorer, right-click the GeekQuiz project, select Add | New Folder, and name it Hubs.

  5. 右クリックし、 Hubsフォルダーと選択追加 |新しい項目のします。Right-click the Hubs folder and select Add | New Item.

    新しい項目の追加Add new item

    新しい項目を追加します。Add new item

  6. 新しい項目の追加ダイアログ ボックスで、 (Visual C#) |Web |SignalR選択の左側のウィンドウでノードSignalR ハブ クラス (v2) ファイルの名前を中央のウィンドウからStatisticsHub.cs をクリック追加します。In the Add New Item dialog box, select the Visual C# | Web | SignalR node in the left pane, select SignalR Hub Class (v2) from the center pane, name the file StatisticsHub.cs and click Add.

    新しい項目 ダイアログ ボックスを追加Add new item dialog box

    新しい項目 ダイアログ ボックスを追加します。Add new item dialog box

  7. コードに置き換えます、 StatisticsHubクラスを次のコード。Replace the code in the StatisticsHub class with the following code.

    (コード スニペット - RealTimeSignalR - Ex1 - StatisticsHubClass)(Code Snippet - RealTimeSignalR - Ex1 - StatisticsHubClass)

    namespace GeekQuiz.Hubs
    {
        using Microsoft.AspNet.SignalR;
    
        public class StatisticsHub : Hub
        {
        }
    }
    
  8. 開いているStartup.csの末尾に次の行を追加し、構成メソッド。Open Startup.cs and add the following line at the end of the Configuration method.

    (コード スニペット - RealTimeSignalR - Ex1 - MapSignalR)(Code Snippet - RealTimeSignalR - Ex1 - MapSignalR)

    public void Configuration(IAppBuilder app)
    {
        this.ConfigureAuth(app);
        app.MapSignalR();
    }
    
  9. 開く、 StatisticsService.cs内でページ、サービスフォルダー以下を追加しますディレクティブを使用します。Open the StatisticsService.cs page inside the Services folder and add the following using directives.

    (コード スニペット - RealTimeSignalR - Ex1 - UsingDirectives)(Code Snippet - RealTimeSignalR - Ex1 - UsingDirectives)

    using Microsoft.AspNet.SignalR;
    using GeekQuiz.Hubs;
    
  10. 取得する最初の更新プログラムの接続されているクライアントを通知する、コンテキスト現在の接続オブジェクトです。To notify connected clients of updates, you first retrieve a Context object for the current connection. ハブオブジェクトには、1 つのクライアントまたはブロードキャストに接続されているすべてのクライアントにメッセージを送信するメソッドが含まれています。The Hub object contains methods to send messages to a single client or broadcast to all connected clients. 次のメソッドを追加、 StatisticsService統計データをブロードキャストするクラス。Add the following method to the StatisticsService class to broadcast the statistics data.

    (コード スニペット - RealTimeSignalR - Ex1 - NotifyUpdatesMethod)(Code Snippet - RealTimeSignalR - Ex1 - NotifyUpdatesMethod)

    public async Task NotifyUpdates()
    {
        var hubContext = GlobalHost.ConnectionManager.GetHubContext<StatisticsHub>();
        if (hubContext != null)
        {
             var stats = await this.GenerateStatistics();
             hubContext.Clients.All.updateStatistics(stats);
        }
    }
    

    Note

    上記のコードでは、クライアントで関数を呼び出すため、任意のメソッド名を使用します (つまり: updateStatistics)。In the code above, you are using an arbitrary method name to call a function on the client (i.e.: updateStatistics). 指定したメソッド名は、IntelliSense またはコンパイル時検証がないことを意味の動的オブジェクトとして解釈されます。The method name that you specify is interpreted as a dynamic object, which means there is no IntelliSense or compile-time validation for it. 式は、実行時に評価されます。The expression is evaluated at run time. メソッドの呼び出しが実行されると、SignalR は、メソッド名とパラメーターの値をクライアントに送信します。When the method call executes, SignalR sends the method name and the parameter values to the client. クライアントが名前に一致するメソッドの場合、そのメソッドが呼び出され、パラメーターの値が渡されました。If the client has a method that matches the name, that method is called and the parameter values are passed to it. クライアントに一致するメソッドが見つからない場合、エラーは発生しません。If no matching method is found on the client, no error is raised. 詳細についてを参照してくださいASP.NET SignalR ハブ API ガイドします。For more information, refer to ASP.NET SignalR Hubs API Guide.

  11. 開く、 TriviaController.cs内でページ、コント ローラーフォルダー以下を追加しますディレクティブを使用します。Open the TriviaController.cs page inside the Controllers folder and add the following using directives.

    using GeekQuiz.Services;
    
  12. 次の強調表示されたコードを追加、 Postアクション メソッド。Add the following highlighted code to the Post action method.

    (コード スニペット - RealTimeSignalR - Ex1 - NotifyUpdatesCall)(Code Snippet - RealTimeSignalR - Ex1 - NotifyUpdatesCall)

    public async Task<IHttpActionResult> Post(TriviaAnswer answer)
    {
        if (!ModelState.IsValid)
        {
             return this.BadRequest(this.ModelState);
        }
    
        answer.UserId = User.Identity.Name;
    
        var isCorrect = await this.StoreAsync(answer);
    
        var statisticsService = new StatisticsService(this.db);
        await statisticsService.NotifyUpdates();
    
        return this.Ok<bool>(isCorrect);
    }
    
  13. 開く、 Statistics.cshtml内でページ、ビュー |ホームフォルダー。Open the Statistics.cshtml page inside the Views | Home folder. 検索、スクリプトセクションし、セクションの先頭に次のスクリプト参照を追加します。Locate the Scripts section and add the following script references at the beginning of the section.

    (コード スニペット - RealTimeSignalR - Ex1 - SignalRScriptReferences)(Code Snippet - RealTimeSignalR - Ex1 - SignalRScriptReferences)

    @section Scripts {
        @Scripts.Render("~/Scripts/jquery.signalR-2.0.2.min.js");
        @Scripts.Render("~/signalr/hubs");
        ...
    }
    

    Note

    SignalR およびその他のスクリプト ライブラリを Visual Studio プロジェクトに追加すると、パッケージ マネージャーはこのトピックに示すバージョンよりも新しい SignalR スクリプト ファイルのバージョンをインストール可能性があります。When you add SignalR and other script libraries to your Visual Studio project, the Package Manager might install a version of the SignalR script file that is more recent than the version shown in this topic. コード内のスクリプト参照がプロジェクトにインストールされているスクリプト ライブラリのバージョンと一致することを確認します。Make sure that the script reference in your code matches the version of the script library installed in your project.

  14. SignalR ハブにクライアントを接続し、新しいメッセージがハブから受信したときに、統計データを更新する次の強調表示されたコードを追加します。Add the following highlighted code to connect the client to the SignalR hub and update the statistics data when a new message is received from the hub.

    (コード スニペット - RealTimeSignalR - Ex1 - SignalRClientCode)(Code Snippet - RealTimeSignalR - Ex1 - SignalRClientCode)

    @section Scripts {
        ...
        <script>
            ...
    
            var connection = $.hubConnection();
            var hub = connection.createHubProxy("StatisticsHub");
            hub.on("updateStatistics", function (statistics) {
                    statisticsData = statistics;
                    $("#correctAnswersCounter").text(statistics.CorrectAnswers);
                    $("#incorrectAnswersCounter").text(statistics.IncorrectAnswers);
    
                    showCharts(statisticsData);
              });
    
            connection.start();
        </script>
    }
    

    このコードではハブ プロキシの作成され、サーバーによって送信されたメッセージをリッスンするイベント ハンドラーを登録します。In this code, you are creating a Hub Proxy and registering an event handler to listen for messages sent by the server. 経由で送信メッセージをリッスンするこの例では、 updateStatisticsメソッド。In this case, you listen for messages sent through the updateStatistics method.

タスク 3 – ソリューションの実行Task 3 – Running the Solution

このタスクでは、新しい質問に回答した後は、SignalR を使用して自動的に統計情報 ビューを更新することを確認するソリューションを実行します。In this task, you will run the solution to verify that the statistics view is updated automatically using SignalR after answering a new question.

  1. キーを押してF5ソリューションを実行します。Press F5 to run the solution.

    Note

    場合は、アプリケーションにまだログインして、タスク 1 で作成したユーザーでログインします。If not already logged in to the application, log in with the user you created in Task 1.

  2. 開く、統計新しいウィンドウでページし、配置、ホームページと統計タスク 1 で行ったように、サイド バイ サイドをページします。Open the Statistics page in a new window and put the Home page and Statistics page side-by-side as you did in Task 1.

  3. ホーム ページで、オプションのいずれかをクリックして、質問に回答します。In the Home page, answer the question by clicking one of the options.

    別の質問に答えるAnswering another question

    別の質問に答えるAnswering another question

  4. ボタンのいずれかをクリックした後、応答が表示されます。After clicking one of the buttons, the answer should appear. ページ全体を更新することがなく最新の情報を質問に回答した後、ページ上の統計情報が自動的に更新されることを確認します。Notice that the Statistics information on the page is updated automatically after answering the question with the updated information without the need to refresh the entire page.

    応答の後に統計情報のページが更新されるStatistics page refreshed after answer

    応答の後に更新された統計情報ページStatistics page refreshed after answer

演習 2:SQL Server を使用したスケール アウトExercise 2: Scaling Out Using SQL Server

選択できます一般に、web アプリケーションをスケーリングするときにスケール アップスケール アウトオプション。When scaling a web application, you can generally choose between scaling up and scaling out options. スケール アップ中にその他のリソース (CPU、RAM など) で大規模なサーバーを使用することを意味スケール アウト負荷を処理するサーバーを追加することを意味します。Scale up means using a larger server, with more resources (CPU, RAM, etc.) while scale out means adding more servers to handle the load. 後者の場合、問題は、クライアント別のサーバーにルーティングできることです。The problem with the latter is that the clients can get routed to different servers. 1 つのサーバーに接続されているクライアントは、別のサーバーから送信されたメッセージを受信しません。A client that is connected to one server will not receive messages sent from another server.

呼ばれるコンポーネントを使用してこれらの問題を解決できるバック プレーンサーバー間でメッセージを転送するようにします。You can solve these issues by using a component called backplane, to forward messages between servers. 有効になっているバック プレーン、各アプリケーション インスタンスが、バック プレーンにメッセージを送信し、バック プレーンの他のアプリケーション インスタンスに転送します。With a backplane enabled, each application instance sends messages to the backplane, and the backplane forwards them to the other application instances.

現在は、SignalR のバック プレーンの 3 つの種類があります。There are currently three types of backplanes for SignalR:

  • Windows Azure Service Busします。Windows Azure Service Bus. Service Bus は、メッセージング インフラストラクチャを使用する疎結合のメッセージを送信するコンポーネントです。Service Bus is a messaging infrastructure that allows components to send loosely coupled messages.
  • SQL Serverします。SQL Server. SQL Server バック プレーンでは、SQL テーブルにメッセージを書き込みます。The SQL Server backplane writes messages to SQL tables. バック プレーンでは、効率的なメッセージングを Service Broker を使用します。The backplane uses Service Broker for efficient messaging. ただし、これは Service Broker が有効になっていない場合にも機能します。However, it also works if Service Broker is not enabled.
  • Redisします。Redis. Redis はメモリ内のキー値ストアです。Redis is an in-memory key-value store. Redis では、メッセージを送信するため、(「パブリッシュ/サブスクライブ」) の発行/サブスクライブ パターンをサポートしています。Redis supports a publish/subscribe ("pub/sub") pattern for sending messages.

すべてのメッセージは、メッセージ バスを通じて送信されます。Every message is sent through a message bus. メッセージ バス実装、 IMessageBusインターフェイスで、パブリッシュ/サブスクライブ抽象化を提供します。A message bus implements the IMessageBus interface, which provides a publish/subscribe abstraction. 既定値を置き換えることで、バック プレーンの動作IMessageBusバス バック プレーンに対するに設計されています。The backplanes work by replacing the default IMessageBus with a bus designed for that backplane.

各サーバー インスタンスは、バスを介してバック プレーンに接続します。Each server instance connects to the backplane through the bus. メッセージが送信されると、バック プレーンに移動して、バック プレーンのすべてのサーバーに送信します。When a message is sent, it goes to the backplane, and the backplane sends it to every server. サーバーは、バック プレーンからメッセージを受信したときに、そのローカル キャッシュ内で、メッセージを格納します。When a server receives a message from the backplane, it stores the message in its local cache. サーバーはし、そのローカル キャッシュから、クライアントにメッセージを配信します。The server then delivers messages to clients from its local cache.

SignalR のバック プレーンの動作は、こちらの詳細については記事します。For more information about how the SignalR backplane works, read this article.

Note

バック プレーンがボトルネックになることがいくつかのシナリオがあります。There are some scenarios where a backplane can become a bottleneck. SignalR の一般的なシナリオを次に示します。Here are some typical SignalR scenarios:

  • サーバー ブロードキャスト(株価情報など)。バック プレーンがこのシナリオに動作するは、サーバー メッセージが送信される速度を制御するためです。Server broadcast (e.g., stock ticker): Backplanes work well for this scenario, because the server controls the rate at which messages are sent.
  • クライアントで(チャットなど)。このシナリオでバック プレーン場合があります、ボトルネックのメッセージの数に合わせてクライアントの数メッセージの数が増加した場合は、それに比例して増えるクライアントが参加します。Client-to-client (e.g., chat): In this scenario, the backplane might be a bottleneck if the number of messages scales with the number of clients; that is, if the rate of messages grows proportionally as more clients join.
  • 高頻度リアルタイム メッセージング(リアルタイムのゲームなど)。このシナリオでは、バック プレーンは推奨されません。High-frequency realtime (e.g., real-time games): A backplane is not recommended for this scenario.

この演習では使用してSQL Server間でメッセージを配布する、ギーク Quizアプリケーション。In this exercise, you will use SQL Server to distribute messages across the Geek Quiz application. 完全な効果を取得するために、構成を設定する方法については、1 つのテスト マシンでこれらのタスクを実行するは、SignalR アプリケーションを 2 つまたは複数のサーバーをデプロイする必要があります。You will run these tasks on a single test machine to learn how to set up the configuration, but in order to get the full effect, you will need to deploy the SignalR application to two or more servers. サーバーのいずれか、または別の専用サーバーでは、SQL Server をインストールすることもする必要があります。You must also install SQL Server on one of the servers, or on a separate dedicated server.

SQL Server の図を使用してスケール

タスク 1 - シナリオを理解します。Task 1 - Understanding the Scenario

このタスクでは、2 つのインスタンスを実行するギーク Quizインスタンスをローカル コンピューターに複数の IIS をシミュレートします。In this task, you will run 2 instances of Geek Quiz simulating multiple IIS instances on your local machine. この場合、1 つのアプリケーションのトリビアの質問に応答するときは、2 番目のインスタンスの統計情報 ページで更新プログラムを通知しません。In this scenario, when answering trivia questions on one application, update won't be notified on the statistics page of the second instance. このシミュレーションよう、アプリケーションが複数のインスタンスに配置される場所、環境と通信するロード バランサーを使用します。This simulation resembles an environment where your application is deployed on multiple instances and using a load balancer to communicate with them.

  1. 開く、 Begin.slnソリューション、ソース/Ex2-ScalingOutWithSQLServer/開始フォルダー。Open the Begin.sln solution located in the Source/Ex2-ScalingOutWithSQLServer/Begin folder. 読み込まれた後に表示されます、サーバー エクスプ ローラー構造体が異なる名前のソリューションには、同一である 2 つのプロジェクトが含まれています。Once loaded, you will notice on the Server Explorer that the solution has two projects with identical structures but different names. これは、ローカル コンピューターに、同じアプリケーションの 2 つのインスタンスを実行しているシミュレートします。This will simulate running two instances of the same application on your local machine.

    コンピューターおたくクイズの 2 つのインスタンスをシミュレートするソリューションの開始Begin Solution Simulating 2 Instances of Geek Quiz

    コンピューターおたくクイズの 2 つのインスタンスをシミュレートするソリューションを開始します。Begin Solution Simulating 2 Instances of Geek Quiz

  2. ソリューション ノードを右クリックして、ソリューションのプロパティ ページを開くプロパティします。Open the properties page of the solution by right-clicking the solution node and selecting Properties. スタートアップ プロジェクトを選択しますマルチ スタートアップ プロジェクトを変更して、アクション両方のプロジェクトに対して値開始します。Under Startup Project, select Multiple startup projects and change the Action value for both projects to Start.

    複数のプロジェクトを開始Starting Multiple Projects

    複数のプロジェクトを開始Starting Multiple Projects

  3. キーを押してF5ソリューションを実行します。Press F5 to run the solution. アプリケーションが 2 つのインスタンスを起動ギーク Quiz別々 のポートで同じアプリケーションの複数のインスタンスをシミュレートします。The application will launch two instances of Geek Quiz in different ports, simulating multiple instances of the same application. 左辺と他の画面の右側で、ブラウザーのいずれかをピン留めします。Pin one of the browsers on left and the other on the right of your screen. 資格情報でログインするか、新しいユーザーを登録します。Log in with your credentials or register a new user. ログインすると、左側のトリビアのページを保持しに移動、統計右側のブラウザーでページ。Once logged in, keep the Trivia page on the left and go to the Statistics page in the browser on the right.

    サイド バイ サイドのおたくクイズ

    サイド バイ サイドのおたくクイズGeek Quiz Side by Side

    別のポートのおたくのクイズ

    別のポートのおたくのクイズGeek Quiz in Different Ports

  4. 左側のブラウザーでの質問に回答を起動し、表示になります、統計適切なブラウザーでページが更新されません。Start answering questions in the left browser and you will notice that the Statistics page in the right browser is not being updated. これは、ためSignalRクライアント間でメッセージを配布する、ローカル キャッシュの使用、このシナリオでは、複数のインスタンスをシミュレートします。 そのため、キャッシュはそれらの間で共有されません。This is because SignalR uses a local cache to distribute messages across their clients and this scenario is simulating multiple instances, therefore the cache is not shared between them. 確認できますSignalRで同じ手順をテストが 1 つのアプリを使用して、動作します。You can verify that SignalR is working by testing the same steps but using a single app. 次のタスクでは、インスタンス間でメッセージをレプリケート バック プレーンを構成します。In the following tasks you will configure a backplane to replicate the messages across instances.

  5. Visual Studio に戻るし、デバッグを停止します。Go back to Visual Studio and stop debugging.

タスク 2 – SQL Server のバック プレーンの作成Task 2 – Creating the SQL Server Backplane

このタスクでのバック プレーンとして使用するデータベースを作成するが、ギーク Quizアプリケーション。In this task, you will create a database that will serve as a backplane for the Geek Quiz application. 使用するSQL Server オブジェクト エクスプ ローラーをサーバーを参照し、データベースを初期化します。You will use SQL Server Object Explorer to browse your server and initialize the database. さらに、有効にする、 Service Brokerします。Additionally, you will enable the Service Broker.

  1. Visual Studio開き、メニュービュー選択とSQL Server オブジェクト エクスプ ローラーします。In Visual Studio, open menu View and select SQL Server Object Explorer.

  2. 右クリックして、LocalDB インスタンスへの接続、 SQL Serverノードと選択SQL Server の追加. オプション。Connect to your LocalDB instance by right-clicking the SQL Server node and selecting Add SQL Server... option.

    SQL Server のインスタンスを追加するAdding a SQL Server Instance

    SQL Server オブジェクト エクスプ ローラーへの SQL Server インスタンスの追加Adding a SQL Server instance to SQL Server Object Explorer

  3. 設定、サーバー名(localdb) \v11.0してWindows 認証認証モードとして。Set the server name to (localdb)\v11.0 and leave Windows Authentication as your authentication mode. クリックしてConnectを続行します。Click Connect to continue.

    LocalDB への接続Connecting to LocalDB

    LocalDB への接続Connecting to LocalDB

  4. これで、LocalDB インスタンスに接続すると、SignalR の SQL Server バック プレーンを表すデータベースを作成する必要があります。Now that you are connected to your LocalDB instance, you will need to create a database that will represent the SQL Server backplane for SignalR. これを行うを右クリックし、データベースノード新しいデータベースの追加します。To do this, right-click the Databases node and select Add New Database.

    新しいデータベースを追加するAdding a new database

    新しいデータベースを追加します。Adding a new database

  5. データベース名を設定SignalR をクリックOKを作成します。Set the database name to SignalR and click OK to create it.

    SignalR のデータベースを作成するCreating the SignalR database

    SignalR のデータベースを作成します。Creating the SignalR database

    Note

    データベースの任意の名前を選択できます。You can choose any name for the database.

  6. バック プレーンからより効率的に更新プログラムを受信するには、データベースの Service Broker を有効にすることをお勧めします。To receive updates more efficiently from the backplane, it is recommended to enable Service Broker for the database. Service Broker では、メッセージングと SQL Server でのキューのネイティブ サポートを提供します。Service Broker provides native support for messaging and queuing in SQL Server. バック プレーンは、Service Broker なくも機能します。The backplane also works without Service Broker. クリックし、データベースを右クリックして新しいクエリを開く新しいクエリします。Open a new query by right-clicking the database and select New Query.

    新しいクエリを開いて、Opening a New Query

    新しいクエリを開くOpening a New Query

  7. Service Broker が有効になっているかどうかを確認するには、クエリ、は_broker_有効になっている内の列、 sys.databasesカタログ ビューです。To check whether Service Broker is enabled, query the is_broker_enabled column in the sys.databases catalog view. 最近開いたクエリ ウィンドウで、次のスクリプトを実行します。Execute the following script in the recently opened query window.

    SELECT [name], [service_broker_guid], [is_broker_enabled] FROM [master].[sys].[databases]
    

    サービス ブローカーの状態を照会Querying the Service Broker Status

    サービス ブローカーの状態のクエリを実行します。Querying the Service Broker Status

  8. 場合の値、は_broker_有効になっている、データベース内の列が"0"、有効にする、次のコマンドを使用します。If the value of the is_broker_enabled column in your database is "0", use the following command to enable it. 置換 <、データベース> データベースを作成するときに設定した名前 (例:。SignalR)。Replace <YOUR-DATABASE> with the name you set when creating the database (e.g.: SignalR).

    ALTER DATABASE <YOUR-DATABASE> SET ENABLE_BROKER
    

    Service Broker を有効にするEnabling Service Broker

    Service Broker を有効にします。Enabling Service Broker

    Note

    このクエリは、デッドロックを確認が表示された場合、DB に接続されているアプリケーションはありません。If this query appears to deadlock, make sure there are no applications connected to the DB.

タスク 3 – SignalR アプリケーションを構成します。Task 3 – Configuring the SignalR Application

このタスクでは、構成ギーク Quiz SQL Server バック プレーンに接続します。In this task, you will configure Geek Quiz to connect to the SQL Server backplane. 最初に、追加、 SignalR.SqlServerバック プレーン データベースに NuGet パッケージと、接続設定の文字列します。You will first add the SignalR.SqlServer NuGet package and set the connection string to your backplane database.

  1. 開く、パッケージ マネージャー コンソールからツール > NuGet パッケージ マネージャーします。Open the Package Manager Console from Tools > NuGet Package Manager. 確認しますGeekQuizでプロジェクトを選択、既定のプロジェクトドロップダウン リスト。Make sure that GeekQuiz project is selected in the Default project drop-down list. インストールするには、次のコマンドを入力、 Microsoft.AspNet.SignalR.SqlServer NuGet パッケージ。Type the following command to install the Microsoft.AspNet.SignalR.SqlServer NuGet package.

    Install-Package Microsoft.AspNet.SignalR.SqlServer
    
  2. プロジェクトに対してこの時間が、前の手順を繰り返しますGeekQuiz2します。Repeat the previous step but this time for project GeekQuiz2.

  3. SQL Server バック プレーンを構成するには、開く、 Startup.csのファイル、 GeekQuizプロジェクトし、次のコードを追加、構成メソッド。To configure the SQL Server backplane, open the Startup.cs file of the GeekQuiz project and add the following code to the Configure method. 置換 <YOUR DATABASE> を SQL Server バック プレーンを作成するときに使用したデータベース名。Replace <YOUR-DATABASE> with your database name you used when creating the SQL Server backplane. この手順を繰り返します、 GeekQuiz2プロジェクト。Repeat this step for the GeekQuiz2 project.

    (コード スニペット - RealTimeSignalR - Ex2 - StartupConfiguration)(Code Snippet - RealTimeSignalR - Ex2 - StartupConfiguration)

    public class Startup 
    {   
        public void Configuration(IAppBuilder app) 
        {           
            var sqlConnectionString = @"Server=(localdb)\v11.0;Database=<YOUR-DATABASE>;Integrated Security=True;";
            GlobalHost.DependencyResolver.UseSqlServer(sqlConnectionString); 
            this.ConfigureAuth(app);
            app.MapSignalR();
        }
    }
    
  4. これで、両方のプロジェクトは、SQL Server バック プレーンを使用する構成は、次のようにキーを押してF5それらを同時に実行します。Now that both projects are configured to use the SQL Server backplane, press F5 to run them simultaneously.

  5. ここでも、 Visual Studioの 2 つのインスタンスが起動ギーク Quizで別のポート。Again, Visual Studio will launch two instances of Geek Quiz in different ports. 他の画面の右側および左側に、ブラウザーのいずれかをピン留めし、資格情報でログインします。Pin one of the browsers on the left and the other on the right of your screen and log in with your credentials. 左側のトリビアのページを保持しに移動統計ページイン適切なブラウザー。Keep the Trivia page on the left and go to Statistics pagein the right browser.

  6. 左側のブラウザーでの質問に答えることを開始します。Start answering questions in the left browser. 今回は、統計バック プレーンに協力してくれたページが更新されます。This time, the Statistics page is updated thanks to the backplane. アプリケーションを切り替える (統計、左側のようになりましたが、トリビアが右側) ことが、両方のインスタンスの動作を検証するテストを繰り返すとします。Switch between applications (Statistics is now on the left, and Trivia is on the right) and repeat the test to validate that it is working for both instances. バック プレーンとして、共有キャッシュ、接続されている各サーバーと各サーバーのメッセージは、メッセージを保存する接続されているクライアントに配布するための独自のローカル キャッシュです。The backplane serves as a shared cache of messages for each connected server, and each server will store the messages in their own local cache to distribute to connected clients.

  7. Visual Studio に戻るし、デバッグを停止します。Go back to Visual Studio and stop debugging.

  8. SQL Server のバック プレーン コンポーネントには、指定したデータベースで必要なテーブルが自動的に生成されます。The SQL Server backplane component automatically generates the necessary tables on the specified database. SQL Server オブジェクト エクスプ ローラーパネルで、バック プレーン用に作成したデータベースを開きます (例。SignalR) し、そのテーブルを展開します。In the SQL Server Object Explorer panel, open the database you created for the backplane (e.g.: SignalR) and expand its tables. 次の表が表示されます。You should see the following tables:

    生成されたテーブルのバック プレーン

    生成されたテーブルのバック プレーンBackplane Generated Tables

  9. 右クリックし、 SignalR.Messages_0テーブルを選択ビュー データします。Right-click the SignalR.Messages_0 table and select View Data.

    SignalR のバック プレーン メッセージ テーブルな表示

    SignalR のバック プレーン メッセージ テーブルな表示View SignalR Backplane Messages Table

  10. 送信されたさまざまなメッセージを表示、ハブトリビアの質問に答えるときです。You can see the different messages sent to the Hub when answering the trivia questions. バック プレーンでは、接続されている任意のインスタンスにこれらのメッセージを配布します。The backplane distributes these messages to any connected instance.

    バック プレーン メッセージ テーブル

    バック プレーン メッセージ テーブルBackplane Messages Table


まとめSummary

このハンズオン ラボでは、追加する方法を説明しましたSignalRを使用して、接続されているクライアントをサーバーからアプリケーションおよび送信通知にHubsします。In this hands-on lab, you have learned how to add SignalR to your application and send notifications from the server to your connected clients using Hubs. さらを使用して、アプリケーションをスケーリングする方法について説明しました、バック プレーンコンポーネントの複数の IIS インスタンスで、アプリケーションがデプロイされた場合。Additionally, you learned how to scale out your application by using a backplane component when your application is deployed in multiple IIS instances.