チュートリアル: SignalR セルフホストTutorial: SignalR Self-Host

提供者: Patrick Fletcherby Patrick Fletcher

Warning

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

完成したプロジェクトのダウンロードDownload Completed Project

このチュートリアルでは、SignalR 2 の自己ホスト型サーバーを作成する方法と、JavaScript クライアントで接続する方法を説明します。This tutorial shows how to create a self-hosted SignalR 2 server, and how to connect to it with a JavaScript client.

このチュートリアルで使用されるソフトウェアのバージョンSoftware versions used in the tutorial

このチュートリアルで Visual Studio 2012 の使用Using Visual Studio 2012 with this tutorial

このチュートリアルでは、Visual Studio 2012 を使用するには、次の操作を行います。To use Visual Studio 2012 with this tutorial, do the following:

  • 更新プログラム、パッケージ マネージャー最新バージョンにします。Update your Package Manager to the latest version.
  • インストール、 Web プラットフォーム インストーラーします。Install the Web Platform Installer.
  • Web Platform Installer で検索してインストールASP.NET と Visual Studio 2012 for Web Tools 2013.1します。In the Web Platform Installer, search for and install ASP.NET and Web Tools 2013.1 for Visual Studio 2012. SignalR クラスの Visual Studio テンプレートなどのインストールはこのハブします。This will install Visual Studio templates for SignalR classes such as Hub.
  • 一部のテンプレート (などOWIN Startup クラス) はできなくなります。 これらの場合には、クラス ファイルを代わりに使用します。Some templates (such as OWIN Startup Class) will not be available; for these, use a Class file instead.

意見やご質問Questions and comments

このチュートリアルの良い点に関するフィードバックや、ページ下部にあるコメントで改善できる点をお知らせください。Please leave feedback on how you liked this tutorial and what we could improve in the comments at the bottom of the page. チュートリアルに直接関係のない質問がある場合は、ASP.NET SignalR フォーラムまたはStackOverflow.comにて投稿してください。If you have questions that are not directly related to the tutorial, you can post them to the ASP.NET SignalR forum or StackOverflow.com.

概要Overview

SignalR のサーバーは通常、IIS で ASP.NET アプリケーションでホストされているが、自己ホスト型にも (コンソール アプリケーションまたは Windows サービスなど)、自己ホスト ライブラリを使用します。A SignalR server is usually hosted in an ASP.NET application in IIS, but it can also be self-hosted (such as in a console application or Windows service) using the self-host library. SignalR 2 のすべてと同様に、このライブラリは OWIN 上に構築 (Open Web Interface for .NET)。This library, like all of SignalR 2, is built on OWIN (Open Web Interface for .NET). OWIN は、.NET の web サーバーおよび web アプリケーション間の抽象化を定義します。OWIN defines an abstraction between .NET web servers and web applications. OWIN により、OWIN の IIS の外部の独自のプロセスで web アプリケーションを自己ホストするために最適ですが、サーバーから web アプリケーションを分離します。OWIN decouples the web application from the server, which makes OWIN ideal for self-hosting a web application in your own process, outside of IIS.

IIS でホストしていない理由は次のとおりです。Reasons for not hosting in IIS include:

  • IIS が利用できないか、IIS なしの既存のサーバー ファームなどの望ましい環境。Environments where IIS is not available or desirable, such as an existing server farm without IIS.
  • IIS のパフォーマンスのオーバーヘッドを回避する必要があります。The performance overhead of IIS needs to be avoided.
  • SignalR の機能では、Windows サービス、Azure worker ロール、またはその他のプロセスで実行されている既存のアプリケーションに追加します。SignalR functionality is to be added to an existing application that runs in a Windows Service, Azure worker role, or other process.

ソリューションは、パフォーマンス上の理由から自己ホストとして開発されているが場合、ことをお勧めもテストを IIS でホストされているアプリケーションでパフォーマンスの向上を特定します。If a solution is being developed as self-host for performance reasons, it's recommended to also test the application hosted in IIS to determine the performance benefit.

このチュートリアルには、次のセクションが含まれています。This tutorial contains the following sections:

サーバーの作成Creating the server

このチュートリアルでは、コンソール アプリケーションでホストされているサーバーを作成しますが、サーバーは、あらゆる種類の Windows サービスまたは Azure ワーカー ロールなどのプロセスでホストできます。In this tutorial, you'll create a server that's hosted in a console application, but the server can be hosted in any sort of process, such as a Windows service or Azure worker role. Windows サービスで SignalR のサーバーをホストするためのサンプル コードを参照してください。 Windows サービスで Self-Hosting SignalRします。For sample code for hosting a SignalR server in a Windows Service, see Self-Hosting SignalR in a Windows Service.

  1. 管理者特権で Visual Studio 2013 を開きます。Open Visual Studio 2013 with administrator privileges. 選択ファイル新しいプロジェクトします。Select File, New Project. 選択Windows下、 Visual c# 内のノード、テンプレートペイン、および選択、コンソール アプリケーションテンプレート。Select Windows under the Visual C# node in the Templates pane, and select the Console Application template. 新しいプロジェクトの名前を"SignalRSelfHost"にしてOKします。Name the new project "SignalRSelfHost" and click OK.

  2. 選択して、NuGet パッケージ マネージャー コンソールを開きますツール > NuGet パッケージ マネージャー > パッケージ マネージャー コンソールします。Open the NuGet package manager console by selecting Tools > NuGet Package Manager > Package Manager Console.

  3. パッケージ マネージャー コンソールで、次のコマンドを入力します。In the package manager console, enter the following command:

    Install-Package Microsoft.AspNet.SignalR.SelfHost
    

    このコマンドは、プロジェクトに SignalR 2 Self-Host ライブラリを追加します。This command adds the SignalR 2 Self-Host libraries to the project.

  4. パッケージ マネージャー コンソールで、次のコマンドを入力します。In the package manager console, enter the following command:

    Install-Package Microsoft.Owin.Cors
    

    このコマンドは、Microsoft.Owin.Cors ライブラリをプロジェクトに追加します。This command adds the Microsoft.Owin.Cors library to the project. このライブラリは、SignalR と web ページのクライアントに別のドメインをホストしているアプリケーションに必要なクロス ドメインのサポートに使用されます。This library will be used for cross-domain support, which is required for applications that host SignalR and a web page client in different domains. つまり、SignalR サーバーと異なるポートを web クライアントがホストするとします、ために、クロス ドメインは、これらのコンポーネント間の通信を有効にする必要があります。Since you'll be hosting the SignalR server and the web client on different ports, this means that cross-domain must be enabled for communication between these components.

  5. Program.cs の内容を次のコードで置き換えます。Replace the contents of Program.cs with the following code.

    using System;
    using Microsoft.AspNet.SignalR;
    using Microsoft.Owin.Hosting;
    using Owin;
    using Microsoft.Owin.Cors;
    
    namespace SignalRSelfHost
    {
        class Program
        {
            static void Main(string[] args)
            {
                // This will *ONLY* bind to localhost, if you want to bind to all addresses
                // use http://*:8080 to bind to all addresses. 
                // See http://msdn.microsoft.com/library/system.net.httplistener.aspx 
                // for more information.
                string url = "http://localhost:8080";
                using (WebApp.Start(url))
                {
                    Console.WriteLine("Server running on {0}", url);
                    Console.ReadLine();
                }
            }
        }
        class Startup
        {
            public void Configuration(IAppBuilder app)
            {
                app.UseCors(CorsOptions.AllowAll);
                app.MapSignalR();
            }
        }
        public class MyHub : Hub
        {
            public void Send(string name, string message)
            {
                Clients.All.addMessage(name, message);
            }
        }
    }
    

    上記のコードには、3 つのクラスが含まれています。The above code includes three classes:

    • プログラムなど、 Mainメソッドの実行のプライマリ パスを定義します。Program, including the Main method defining the primary path of execution. このメソッドでは、型の web アプリケーションでスタートアップが開始されて、指定した URL (http://localhost:8080)。In this method, a web application of type Startup is started at the specified URL (http://localhost:8080). エンドポイントのセキュリティが必要な場合は、SSL を実装できます。If security is required on the endpoint, SSL can be implemented. 方法:SSL 証明書でポートを構成詳細についてはします。See How to: Configure a Port with an SSL Certificate for more information.
    • スタートアップ、SignalR のサーバーの構成を含むクラス (このチュートリアルでは、のみの構成への呼び出しは、 UseCors) への呼び出しMapSignalRハブのすべてのオブジェクトのルート プロジェクトを作成します。Startup, the class containing the configuration for the SignalR server (the only configuration this tutorial uses is the call to UseCors), and the call to MapSignalR, which creates routes for any Hub objects in the project.
    • MyHubアプリケーションをクライアントに提供する SignalR ハブ クラス。MyHub, the SignalR Hub class that the application will provide to clients. このクラスは 1 つのメソッド、送信、接続されている他のすべてのクライアントにメッセージをブロードキャストするクライアントが呼び出すことです。This class has a single method, Send, that clients will call to broadcast a message to all other connected clients.
  6. アプリケーションをコンパイルして実行します。Compile and run the application. サーバーを実行しているアドレスは、コンソール ウィンドウに表示されます。The address that the server is running should show in a console window.

  7. 例外によって実行が失敗した場合System.Reflection.TargetInvocationException was unhandled、管理者特権で Visual Studio を再起動する必要があります。If execution fails with the exception System.Reflection.TargetInvocationException was unhandled, you will need to restart Visual Studio with administrator privileges.

  8. 次のセクションに進む前にアプリケーションを停止します。Stop the application before proceeding to the next section.

JavaScript クライアントとサーバーへのアクセスAccessing the server with a JavaScript client

このセクションでは、同じ JavaScript クライアントから使用します、チュートリアル入門します。In this section, you'll use the same JavaScript client from the Getting Started tutorial. これは、ハブの URL を明示的に定義すると、クライアントに 1 つの変更のみしましょう。We'll only make one modification to the client, which is to explicitly define the hub URL. 自己ホスト型アプリケーションでは、サーバー必ずしも URL (リバース プロキシとロード バランサー) のための接続と同じアドレスでこれを明示的に定義の URL は。With a self-hosted application, the server may not necessarily be at the same address as the connection URL (due to reverse proxies and load balancers), so the URL needs to be defined explicitly.

  1. ソリューション エクスプ ローラーソリューションを右クリックし、選択、追加新しいプロジェクトします。In Solution Explorer, right-click on the solution and select Add, New Project. 選択、 Webノード、および選択、 ASP.NET Web アプリケーションテンプレート。Select the Web node, and select the ASP.NET Web Application template. プロジェクトに"JavascriptClient"という名前にしてOKします。Name the project "JavascriptClient" and click OK.

  2. 選択、テンプレート、および残りのオプションがオフのままにします。Select the Empty template, and leave the remaining options unselected. 選択プロジェクトを作成するします。Select Create Project.

  3. パッケージ マネージャー コンソールで"JavascriptClient"プロジェクトを選択、既定のプロジェクトドロップダウンで、次のコマンドを実行します。In the package manager console, select the "JavascriptClient" project in the Default project drop-down, and execute the following command:

    Install-Package Microsoft.AspNet.SignalR.JS
    

    このコマンドは、クライアントにする必要があります、SignalR と JQuery ライブラリをインストールします。This command installs the SignalR and JQuery libraries that you'll need in the client.

  4. クリックし、プロジェクトを右クリックして追加新しい項目のします。Right-click on your project and select Add, New Item. 選択、 Webノード、および HTML ページを選択します。Select the Web node, and select HTML Page. ページの名前を付けますDefault.htmlします。Name the page Default.html.

  5. 新しい HTML ページの内容を次のコードに置き換えます。Replace the contents of the new HTML page with the following code. ここで、スクリプト参照がプロジェクトの Scripts フォルダー内のスクリプトと一致することを確認します。Verify that the script references here match the scripts in the Scripts folder of the project.

    <!DOCTYPE html>
    <html>
    <head>
        <title>SignalR Simple Chat</title>
        <style type="text/css">
            .container {
                background-color: #99CCFF;
                border: thick solid #808080;
                padding: 20px;
                margin: 20px;
            }
        </style>
    </head>
    <body>
        <div class="container">
            <input type="text" id="message" />
            <input type="button" id="sendmessage" value="Send" />
            <input type="hidden" id="displayname" />
            <ul id="discussion"></ul>
        </div>
        <!--Script references. -->
        <!--Reference the jQuery library. -->
        <script src="Scripts/jquery-1.6.4.min.js"></script>
        <!--Reference the SignalR library. -->
        <script src="Scripts/jquery.signalR-2.1.0.min.js"></script>
        <!--Reference the autogenerated SignalR hub script. -->
        <script src="http://localhost:8080/signalr/hubs"></script>
        <!--Add script to update the page and send messages.-->
        <script type="text/javascript">
            $(function () {
            //Set the hubs URL for the connection
                $.connection.hub.url = "http://localhost:8080/signalr";
                
                // Declare a proxy to reference the hub.
                var chat = $.connection.myHub;
                
                // Create a function that the hub can call to broadcast messages.
                chat.client.addMessage = function (name, message) {
                    // Html encode display name and message.
                    var encodedName = $('<div />').text(name).html();
                    var encodedMsg = $('<div />').text(message).html();
                    // Add the message to the page.
                    $('#discussion').append('<li><strong>' + encodedName
                        + '</strong>:&nbsp;&nbsp;' + encodedMsg + '</li>');
                };
                // Get the user name and store it to prepend to messages.
                $('#displayname').val(prompt('Enter your name:', ''));
                // Set initial focus to message input box.
                $('#message').focus();
                // Start the connection.
                $.connection.hub.start().done(function () {
                    $('#sendmessage').click(function () {
                        // Call the Send method on the hub.
                        chat.server.send($('#displayname').val(), $('#message').val());
                        // Clear text box and reset focus for next comment.
                        $('#message').val('').focus();
                    });
                });
            });
        </script>
    </body>
    </html>
    

    次のコード (上記のコード例で強調表示) とは、(SignalR バージョン 2 の beta へのコードのアップグレード) に加えて、よろめき取得のチュートリアルで使用するクライアントに適用した追加です。The following code (highlighted in the code sample above) is the addition that you've made to the client used in the Getting Stared tutorial (in addition to upgrading the code to SignalR version 2 beta). 次のコードでは SignalR の基本的な接続 URL が明示的にサーバー上に設定します。This line of code explicitly sets the base connection URL for SignalR on the server.

    //Set the hubs URL for the connection
    $.connection.hub.url = "http://localhost:8080/signalr";
    
  6. ソリューションを右クリックしてスタートアップ プロジェクトの設定..選択、マルチ スタートアップ プロジェクトボタンをクリックし、両方のプロジェクトの設定アクション開始します。Right-click on the solution, and select Set Startup Projects.... Select the Multiple startup projects radio button, and set both projects' Action to Start.

  7. "Default.html"を右クリックし、選択スタート ページとして設定します。Right-click on "Default.html" and select Set As Start Page.

  8. アプリケーションを実行します。Run the application. サーバーおよびページが起動します。The server and page will launch. Web ページを再読み込みする必要があります (または選択続行デバッガーで) サーバーを開始する前に、ページが読み込まれる場合。You may need to reload the web page (or select Continue in the debugger) if the page loads before the server is started.

  9. ブラウザーでは、入力を求められたら、ユーザー名を提供します。In the browser, provide a username when prompted. 別のブラウザー タブまたはウィンドウに、ページの URL をコピーして、別のユーザー名を指定します。Copy the page's URL into another browser tab or window and provide a different username. チュートリアル入門のように、他の 1 つのブラウザー ウィンドウからメッセージを送信することができます。You will be able to send messages from one browser pane to the other, as in the Getting Started tutorial.