チュートリアル: SignalR 1.x の概要Tutorial: Getting Started with SignalR 1.x

によってPatrick FletcherTim Teebkenby Patrick Fletcher, Tim Teebken

Warning

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

このチュートリアルでは、SignalR を使用してリアルタイムのチャット アプリケーションを作成する方法を示します。This tutorial shows how to use SignalR to create a real-time chat application. SignalR を空の ASP.NET web アプリケーションに追加し、送信し、メッセージを表示する HTML ページを作成します。You will add SignalR to an empty ASP.NET web application and create an HTML page to send and display messages.

概要Overview

このチュートリアルでは、ブラウザー ベースの単純なチャット アプリケーションを構築する方法を示す、SignalR の開発について説明します。This tutorial introduces SignalR development by showing how to build a simple browser-based chat application. SignalR ライブラリ空の ASP.NET web アプリケーションを追加、クライアントにメッセージを送信するためのハブ クラスを作成、およびユーザー チャット メッセージを送受信できるようにする HTML ページが作成されます。You will add the SignalR library to an empty ASP.NET web application, create a hub class for sending messages to clients, and create an HTML page that lets users send and receive chat messages. MVC 4 のチャット アプリケーションを作成する方法を示しています、MVC ビューを使用して類似のチュートリアルを参照してください。 SignalR と MVC 4 の概要します。For a similar tutorial that shows how to create a chat application in MVC 4 using an MVC view, see Getting Started with SignalR and MVC 4.

Note

このチュートリアルでは、SignalR のリリース (1.x) バージョンを使用します。This tutorial uses the release (1.x) version of SignalR. SignalR の間の変更の詳細についての 1.x と 2.0 を参照してください。アップグレード SignalR 1.x プロジェクトします。For details on changes between SignalR 1.x and 2.0, see Upgrading SignalR 1.x Projects.

SignalR はライブ ユーザーとの対話やリアルタイムのデータの更新プログラムを必要とする web アプリケーションを構築するためのオープン ソース .NET ライブラリです。SignalR is an open-source .NET library for building web applications that require live user interaction or real-time data updates. 例には、ソーシャル アプリケーション、ゲームのマルチ ユーザー、ビジネス コラボレーション、およびニュース、天気、またはアプリケーションの財務の更新が含まれます。Examples include social applications, multiuser games, business collaboration, and news, weather, or financial update applications. これらは多くの場合、リアルタイム アプリケーションと呼ばれます。These are often called real-time applications.

SignalR は、リアルタイム アプリケーションの構築プロセスを簡略化します。SignalR simplifies the process of building real-time applications. これには、ASP.NET のサーバー ライブラリとクライアント サーバー接続を管理し、クライアントにコンテンツの更新をプッシュするが簡単に JavaScript クライアント ライブラリが含まれます。It includes an ASP.NET server library and a JavaScript client library to make it easier to manage client-server connections and push content updates to clients. SignalR ライブラリは、リアルタイムの機能を利用する既存の ASP.NET アプリケーションを追加できます。You can add the SignalR library to an existing ASP.NET application to gain real-time functionality.

このチュートリアルでは、次の SignalR 開発タスクを示しています。The tutorial demonstrates the following SignalR development tasks:

  • ASP.NET web アプリケーションに SignalR ライブラリを追加します。Adding the SignalR library to an ASP.NET web application.
  • クライアントにコンテンツをプッシュするハブ クラスを作成します。Creating a hub class to push content to clients.
  • Web ページで、SignalR jQuery ライブラリを使用して、メッセージを送信し、ハブから更新プログラムを表示します。Using the SignalR jQuery library in a web page to send messages and display updates from the hub.

次のスクリーン ショットは、ブラウザーで実行されているチャット アプリケーションを示しています。The following screen shot shows the chat application running in a browser. 各新規ユーザー コメントを投稿でき、ユーザーがチャットに参加した後に追加されたコメントを参照してください。Each new user can post comments and see comments added after the user joins the chat.

チャット インスタンス

セクション:Sections:

プロジェクトを設定します。Set up the Project

SignalR を追加するこのセクションでは、空の ASP.NET web アプリケーションを作成する方法を示していて、チャット アプリケーションを作成します。This section shows how to create an empty ASP.NET web application, add SignalR, and create the chat application.

必要条件:Prerequisites:

  • Visual Studio 2010 SP1 または 2012。Visual Studio 2010 SP1 or 2012. Visual Studio がないを参照してください。 ASP.NET ダウンロード無料 Visual Studio 2012 Express 開発ツールを取得します。If you do not have Visual Studio, see ASP.NET Downloads to get the free Visual Studio 2012 Express Development Tool.
  • Microsoft ASP.NET および Web Tools 2012.2します。Microsoft ASP.NET and Web Tools 2012.2. Visual Studio 2012 の場合は、このインストーラーは、Visual Studio に SignalR テンプレートを含む ASP.NET の新機能を追加します。For Visual Studio 2012, this installer adds new ASP.NET features including SignalR templates to Visual Studio. Visual Studio 2010 SP1 では、インストーラーは使用できませんが、セットアップ手順」の説明に従って、SignalR の NuGet パッケージをインストールすることで、チュートリアルを行うことができます。For Visual Studio 2010 SP1, an installer is not available but you can complete the tutorial by installing the SignalR NuGet package as described in the setup steps.

次の手順では、空の ASP.NET Web アプリケーションを作成し、SignalR ライブラリを追加する Visual Studio 2012 を使用します。The following steps use Visual Studio 2012 to create an ASP.NET Empty Web Application and add the SignalR library:

  1. Visual Studio では、空の ASP.NET Web アプリケーションを作成します。In Visual Studio create an ASP.NET Empty Web Application.

    空の web を作成します。

  2. 開く、パッケージ マネージャー コンソールを選択してツール |NuGet パッケージ マネージャー |パッケージ マネージャー コンソールします。Open the Package Manager Console by selecting Tools | NuGet Package Manager | Package Manager Console. コンソール ウィンドウには、次のコマンドを入力します。Enter the following command into the console window:

    Install-Package Microsoft.AspNet.SignalR -Version 1.1.3

    このコマンドは、SignalR の最新バージョンをインストールします。 1.x します。This command installs the latest version of SignalR 1.x.

  3. ソリューション エクスプ ローラー、プロジェクトを右クリックし、選択追加 |クラスします。In Solution Explorer, right-click the project, select Add | Class. 新しいクラスの名前ChatHubします。Name the new class ChatHub.

  4. ソリューション エクスプ ローラースクリプト ノードを展開します。In Solution Explorer expand the Scripts node. JQuery と SignalR 用のスクリプト ライブラリは、プロジェクトに表示されます。Script libraries for jQuery and SignalR are visible in the project.

    ライブラリの参照

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

    using System;
    using System.Web;
    using Microsoft.AspNet.SignalR;
    namespace SignalRChat
    {
        public class ChatHub : Hub
        {
            public void Send(string name, string message)
            {
                // Call the broadcastMessage method to update clients.
                Clients.All.broadcastMessage(name, message);
            }
        }
    }
    
  6. ソリューション エクスプ ローラープロジェクトを右クリックし、クリックして追加 |新しい項目のします。In Solution Explorer, right-click the project, then click Add | New Item. 新しい項目の追加ダイアログ ボックスで、グローバル アプリケーション クラスクリック追加します。In the Add New Item dialog, select Global Application Class and click Add.

    グローバルの追加します。

  7. 次の追加using後にある、指定されたステートメントusingGlobal.asax.cs クラス内のステートメント。Add the following using statements after the provided using statements in the Global.asax.cs class.

    using System.Web.Routing;
    using Microsoft.AspNet.SignalR;
    
  8. 次のコードの行を追加、 Application_Start SignalR ハブの既定のルートを登録するグローバル クラスのメソッド。Add the following line of code in the Application_Start method of the Global class to register the default route for SignalR hubs.

    // Register the default hubs route: ~/signalr/hubs
    RouteTable.Routes.MapHubs();
    
  9. ソリューション エクスプ ローラープロジェクトを右クリックし、クリックして追加 |新しい項目のします。In Solution Explorer, right-click the project, then click Add | New Item. 新しい項目の追加ダイアログ、選択の Html ページとクリック追加します。In the Add New Item dialog, select Html Page and click Add.

  10. ソリューション エクスプ ローラーで作成した HTML ページを右クリックし、をクリックしてスタート ページとして設定します。In Solution Explorer, right-click the HTML page you just created and click Set as Start Page.

  11. HTML ページの既定のコードを次のコードに置き換えます。Replace the default code in the HTML page with the following code.

    <!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-1.1.4.js"></script>
        <!--Reference the autogenerated SignalR hub script. -->
        <script src="/signalr/hubs"></script>
        <!--Add script to update the page and send messages.--> 
        <script type="text/javascript">
            $(function () {
                // Declare a proxy to reference the hub. 
                var chat = $.connection.chatHub;
                // Create a function that the hub can call to broadcast messages.
                chat.client.broadcastMessage = 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>
    
  12. すべて保存プロジェクト。Save All for the project.

サンプルを実行します。Run the Sample

  1. F5 キーを押して、デバッグ モードで、プロジェクトを実行します。Press F5 to run the project in debug mode. ブラウザーのインスタンスとユーザー名のプロンプトで、HTML ページが読み込まれます。The HTML page loads in a browser instance and prompts for a user name.

    ユーザー名の入力

  2. ユーザー名を入力します。Enter a user name.

  3. ブラウザーのアドレスの行から URL をコピーし、2 つのブラウザー インスタンスを開くために使用します。Copy the URL from the address line of the browser and use it to open two more browser instances. 各ブラウザー インスタンスでは、一意のユーザー名を入力します。In each browser instance, enter a unique user name.

  4. 各ブラウザー インスタンスでコメントを追加し、をクリックして送信します。In each browser instance, add a comment and click Send. すべてのブラウザー インスタンスで、コメントが表示されます。The comments should display in all browser instances.

    Note

    この簡単なチャット アプリケーションでは、サーバー上のディスカッション コンテキストは保持されません。This simple chat application does not maintain the discussion context on the server. ハブは、現在のすべてのユーザーへのコメントをブロードキャストします。The hub broadcasts comments to all current users. 後で、チャットに参加するユーザーは、参加する時点から追加されたメッセージに表示されます。Users who join the chat later will see messages added from the time they join.

    次のスクリーン ショットは、1 つのインスタンス メッセージを送信するすべての更新は、次の 3 つのブラウザー インスタンスで実行されるチャット アプリケーションを示しています。The following screen shot shows the chat application running in three browser instances, all of which are updated when one instance sends a message:

    チャット ブラウザー

  5. ソリューション エクスプ ローラー、検査、スクリプト ドキュメント実行中のアプリケーションのノード。In Solution Explorer, inspect the Script Documents node for the running application. という名前のスクリプト ファイルがあるhubs SignalR ライブラリは、実行時に動的に生成します。There is a script file named hubs that the SignalR library dynamically generates at runtime. このファイルは、jQuery スクリプトとサーバー側コード間の通信を管理します。This file manages the communication between jQuery script and server-side code.

    生成されたハブのスクリプト

コードを確認しますExamine the Code

SignalR チャット アプリケーションを 2 つの基本的な SignalR 開発タスクを示します。 サーバーで、主要な調整オブジェクトとしてハブを作成し、メッセージを送受信する SignalR jQuery ライブラリを使用します。The SignalR chat application demonstrates two basic SignalR development tasks: creating a hub as the main coordination object on the server, and using the SignalR jQuery library to send and receive messages.

SignalR HubsSignalR Hubs

コード サンプルでは、 ChatHubクラスから派生、 Microsoft.AspNet.SignalR.Hubクラス。In the code sample the ChatHub class derives from the Microsoft.AspNet.SignalR.Hub class. 派生する、ハブクラスは、SignalR アプリケーションを構築する便利な方法です。Deriving from the Hub class is a useful way to build a SignalR application. ハブ クラスにパブリック メソッドを作成し、web ページに jQuery スクリプトから呼び出すことによってこれらのメソッドにアクセスできます。You can create public methods on your hub class and then access those methods by calling them from jQuery scripts in a web page.

クライアントが呼び出すチャットのコードで、 ChatHub.Sendメソッドを新しいメッセージを送信します。In the chat code, clients call the ChatHub.Send method to send a new message. ハブに送信メッセージのすべてのクライアントを呼び出してClients.All.broadcastMessageします。The hub in turn sends the message to all clients by calling Clients.All.broadcastMessage.

送信メソッドがいくつかのハブの概念を示します。The Send method demonstrates several hub concepts :

  • クライアントが呼び出すことができるように、ハブ上のパブリック メソッドを宣言します。Declare public methods on a hub so that clients can call them.

  • 使用して、 Microsoft.AspNet.SignalR.Hub.Clientsこの hub に接続されているすべてのクライアントにアクセスする動的プロパティ。Use the Microsoft.AspNet.SignalR.Hub.Clients dynamic property to access all clients connected to this hub.

  • クライアントの jQuery 関数を呼び出す (など、broadcastMessage関数) クライアントを更新します。Call a jQuery function on the client (such as the broadcastMessage function) to update clients.

    public class ChatHub : Hub
    {
        public void Send(string name, string message)
        {
            // Call the broadcastMessage method to update clients.
            Clients.All.broadcastMessage(name, message);
        }
    }
    

SignalR と jQuerySignalR and jQuery

コード サンプルでは、HTML ページは、SignalR jQuery ライブラリを使用して、SignalR hub と通信する方法を示しています。The HTML page in the code sample shows how to use the SignalR jQuery library to communicate with a SignalR hub. コードで基本的なタスクは、プロキシをクライアントにコンテンツをプッシュするサーバーを呼び出すことができる関数を宣言して、ハブにメッセージを送信する接続を開始、ハブの参照を宣言することです。The essential tasks in the code are declaring a proxy to reference the hub, declaring a function that the server can call to push content to clients, and starting a connection to send messages to the hub.

次のコードは、ハブのプロキシを宣言します。The following code declares a proxy for a hub.

var chat = $.connection.chatHub;

Note

JQuery でサーバー クラスとそのメンバーへの参照がキャメル ケースです。In jQuery the reference to the server class and its members is in camel case. コード サンプルを参照して、C# ChatHubクラスとしての jquery chatHubします。The code sample references the C# ChatHub class in jQuery as chatHub.

次のコードは、スクリプトのコールバック関数を作成する方法です。The following code is how you create a callback function in the script. サーバー上のハブ クラスは、各クライアントにコンテンツの更新をプッシュするには、この関数を呼び出します。The hub class on the server calls this function to push content updates to each client. HTML が表示する前にコンテンツをエンコードする 2 つの行は省略可能ですし、スクリプト インジェクションを防止する簡単な方法を表示します。The two lines that HTML encode the content before displaying it are optional and show a simple way to prevent script injection.

chat.client.broadcastMessage = 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>');
    };

次のコードでは、ハブとの接続を開く方法を示します。The following code shows how to open a connection with the hub. コードが接続を開始しのクリック イベントを処理する関数に渡します、送信HTML ページにボタンをクリックします。The code starts the connection and then passes it a function to handle the click event on the Send button in the HTML page.

Note

このアプローチでは、イベント ハンドラーが実行される前に、接続が確立されていることを保証します。This approach insures that the connection is established before the event handler executes.

$.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();
        });
    });

次の手順Next Steps

SignalR がリアルタイムの web アプリケーションを構築するためのフレームワークについて説明しました。You learned that SignalR is a framework for building real-time web applications. いくつかの SignalR 開発タスクも学習しました。 SignalR を ASP.NET アプリケーションを追加する方法、ハブ クラスを作成する方法と、ハブからメッセージを送受信する方法。You also learned several SignalR development tasks: how to add SignalR to an ASP.NET application, how to create a hub class, and how to send and receive messages from the hub.

利用できるサンプル アプリケーションは、このチュートリアルやその他の SignalR アプリケーションで、インターネット経由でしてホスティング プロバイダーにデプロイすること。You can make the sample application in this tutorial or other SignalR applications available over the Internet by deploying them to a hosting provider. Microsoft 提供の無料 web ホスティングを無料で最大 10 個の web サイトをWindows Azure トライアル アカウントします。Microsoft offers free web hosting for up to 10 web sites in a free Windows Azure trial account. サンプルの SignalR アプリケーションをデプロイする方法のチュートリアルは、次を参照してください。 、SignalR 入門サンプルとして Windows Azure の Web サイトを発行します。For a walkthrough on how to deploy the sample SignalR application, see Publish the SignalR Getting Started Sample as a Windows Azure Web Site. Visual Studio web プロジェクトを Windows Azure の Web サイトにデプロイする方法の詳細については、次を参照してください。 ASP.NET アプリケーションを Windows Azure Web サイトを展開するします。For detailed information about how to deploy a Visual Studio web project to a Windows Azure Web Site, see Deploying an ASP.NET Application to a Windows Azure Web Site. (メモ: WebSocket トランスポートでは、Windows Azure の Web サイトは現在サポートされていません。(Note: The WebSocket transport is not currently supported for Windows Azure Web Sites. ときに WebSocket トランスポートを使用できません、SignalR のトランスポートのセクションで説明したように、その他の利用可能なトランスポートを使用して、 SignalR のトピックで初めに)。When WebSocket transport is not available, SignalR uses the other available transports as described in the Transports section of the Introduction to SignalR topic.)

高度な SignalR 開発の概念については、SignalR のソース コードおよびリソースは、次のサイトを参照してください。To learn more advanced SignalR developments concepts, visit the following sites for SignalR source code and resources: