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

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

Note

この記事では、ASP.NET SignalR を指します。This article refers to ASP.NET SignalR. SignalR を使用して、Java、Node.js、またはサーバーレス シナリオでは、リアルタイムのシナリオを有効にする方法と思う場合を見てASP.NET Core SignalRします。If you're thinking about using SignalR to enable real-time scenarios with Java, Node.js, or in a serverless scenario, take a look at ASP.NET Core SignalR. 既に ASP.NET SignalR を使用した場合を見て、のバージョンの違いバージョンの違いと ASP.NET Core SignalR での機能強化を理解するページ。If you've already used ASP.NET SignalR, take a look at the version differences page to understand the differences in the versions and the improvements in ASP.NET Core SignalR. 最後に、Microsoft Azure でリアルタイム アプリを実行することがわかっている場合を見て、 Azure SignalR サービスなど、アプリを必要とすると、クラウド ベースのスケール アウトを提供します。Finally, if you know you'll be running your real-time apps in Microsoft Azure, take a look at the Azure SignalR Service, as it provides cloud-based scale-out once your apps need it.

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

概要Overview

このチュートリアルでは、ASP.NET SignalR、ASP.NET MVC 4 とリアルタイムの web アプリケーションの開発について説明します。This tutorial introduces you to real-time web application development with ASP.NET SignalR and ASP.NET MVC 4. チュートリアルと同じのチャット アプリケーションのコードを使用して、 SignalR 作業開始のチュートリアルが、インターネットのテンプレートに基づく、MVC 4 アプリケーションに追加する方法を示しています。The tutorial uses the same chat application code as the SignalR Getting Started tutorial, but shows how to add it to an MVC 4 application based on the Internet template.

このトピックでは、次の SignalR 開発タスクを学習します。In this topic you will learn the following SignalR development tasks:

  • MVC 4 アプリケーション、SignalR ライブラリに追加します。Adding the SignalR library to an MVC 4 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 completed chat application running in a browser.

チャット インスタンス

セクション:Sections:

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

必要条件:Prerequisites:

  • Visual Studio 2010 SP1、Visual Studio 2012、または Visual Studio 2012 Express。Visual Studio 2010 SP1, Visual Studio 2012, or Visual Studio 2012 Express. 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.
  • Visual Studio 2010 では、インストールASP.NET MVC 4します。For Visual Studio 2010, install ASP.NET MVC 4.

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

    1. Visual Studio で ASP.NET MVC 4 アプリケーションを作成し、SignalRChat、という名前を付けます [ok] をクリックします。In Visual Studio create an ASP.NET MVC 4 application, name it SignalRChat, and click OK.

      Note

      VS 2010 では、次のように選択します。 .NET Framework 4 Framework のバージョンのドロップダウン コントロール。In VS 2010, select .NET Framework 4 in the Framework version dropdown control. SignalR のコードは、.NET Framework version 4 および 4.5 で実行されます。SignalR code runs on .NET Framework versions 4 and 4.5.

      Mvc の web を作成します。 2. インターネット アプリケーション テンプレートを選択して、オプションをオフに単体テスト プロジェクトを作成、[ok] をクリックします。Select the Internet Application template, clear the option to Create a unit test project, and click OK.

      Mvc のインターネット サイトを作成します。 3. 開く、ツール > NuGet パッケージ マネージャー > パッケージ マネージャー コンソールし、次のコマンドを実行します。Open the Tools > NuGet Package Manager > Package Manager Console and run the following command. この手順では、一連のスクリプト ファイルと SignalR の機能を有効にするアセンブリ参照をプロジェクトに追加します。This step adds to the project a set of script files and assembly references that enable SignalR functionality.

      install-package Microsoft.AspNet.SignalR -Version 1.1.3 4. ソリューション エクスプ ローラー Scripts フォルダーを展開します。In Solution Explorer expand the Scripts folder. SignalR のスクリプト ライブラリがプロジェクトに追加されていることに注意してください。Note that script libraries for SignalR have been added to the project.

      ライブラリの参照 5. ソリューション エクスプ ローラー、プロジェクトを右クリックし、選択追加 |新しいフォルダー、という名前の新しいフォルダーを追加およびHubsします。In Solution Explorer, right-click the project, select Add | New Folder, and add a new folder named Hubs. 6. 右クリックし、 Hubsフォルダー、をクリックして追加 |クラス、新しい C# という名前のクラスを作成およびChatHub.csします。Right-click the Hubs folder, click Add | Class, and create a new C# class named ChatHub.cs. このクラスは、すべてのクライアントにメッセージを送信する SignalR サーバー ハブとして使用されます。You will use this class as a SignalR server hub that sends messages to all clients.

Note

Visual Studio 2012 を使用して、インストールされている場合、 ASP.NET and Web Tools 2012.2 update、ハブ クラスを作成する新しい SignalR 項目テンプレートを使用することができます。If you use Visual Studio 2012 and have installed the ASP.NET and Web Tools 2012.2 update, you can use the new SignalR item template to create the hub class. 右クリックし、 Hubsフォルダー、をクリックして追加 |新しい項目のSignalR ハブ クラス (v1)、クラスの名前とChatHub.csします。To do that, right-click the Hubs folder, click Add | New Item, select SignalR Hub Class (v1), and name the class ChatHub.cs.

  1. コードに置き換えます、 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 addNewMessageToPage method to update clients.
                Clients.All.addNewMessageToPage(name, message);
            }
        }
    }
    
  2. 開く、 Global.asax 、プロジェクトのファイルを開き、メソッドの呼び出しを追加RouteTable.Routes.MapHubs();内のコードの最初の行として、Application_Startメソッド。Open the Global.asax file for the project, and add a call to the method RouteTable.Routes.MapHubs(); as the first line of code in the Application_Start method. このコードでは、SignalR ハブの既定のルートを登録し、他のルートを登録する前に呼び出す必要があります。This code registers the default route for SignalR hubs and must be called before you register any other routes. 完成したApplication_Startメソッドは次のようになります。The completed Application_Start method looks like the following example.

    protected void Application_Start()
    {
        RouteTable.Routes.MapHubs();
        AreaRegistration.RegisterAllAreas();
    
        WebApiConfig.Register(GlobalConfiguration.Configuration);
        FilterConfig.RegisterGlobalFilters(GlobalFilters.Filters);
        RouteConfig.RegisterRoutes(RouteTable.Routes);
        BundleConfig.RegisterBundles(BundleTable.Bundles);
        AuthConfig.RegisterAuth();
    }
    
  3. 編集、HomeControllerクラスControllers/HomeController.csクラスに次のメソッドを追加します。Edit the HomeController class found in Controllers/HomeController.cs and add the following method to the class. このメソッドが戻る、チャット後の手順で作成するビュー。This method returns the Chat view that you will create in a later step.

    public ActionResult Chat()
    {
        return View();
    }
    
  4. 内で右クリック、Chatメソッドだけに作成されるとクリックしてビューの追加ビューの新しいファイルを作成します。Right-click within the Chat method you just created, and click Add View to create a new view file.

  5. ビューの追加ダイアログ ボックスで、チェック ボックスが選択されていることを確認しますレイアウトまたはマスター ページを使用して(他のチェック ボックスをオフ)、順にクリックします追加します。In the Add View dialog, make sure the check box is selected to Use a layout or master page (clear the other check boxes), and then click Add.

    ビューを追加する

  6. という名前の新しいビュー ファイルを編集Chat.cshtmlします。Edit the new view file named Chat.cshtml. 後に、 <h2>タグに、次を貼り付けます<div>セクションと@section scriptsページにコード ブロックです。After the <h2> tag, paste the following <div> section and @section scripts code block into the page. このスクリプトでは、チャット メッセージを送信し、サーバーからメッセージを表示するページが有効にします。This script enables the page to send chat messages and display messages from the server. チャット ビューの完全なコードは、次のコード ブロックに表示されます。The complete code for the chat view appears in the following code block.

    Important

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

    @{
        ViewBag.Title = "Chat";
    }
    
    <h2>Chat</h2>
    
    <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>
    
    @section scripts {
        <!--Script references. -->
        <!--The jQuery library is required and is referenced by default in _Layout.cshtml. -->
        <!--Reference the SignalR library. -->
        <script src="~/Scripts/jquery.signalR-1.0.1.js"></script>
        <!--Reference the autogenerated SignalR hub script. -->
        <script src="~/signalr/hubs"></script>
        <!--SignalR script to update the chat page and send messages.--> 
        <script>
            $(function () {
                // Reference the auto-generated proxy for the hub.  
                var chat = $.connection.chatHub;
                // Create a function that the hub can call back to display messages.
                chat.client.addNewMessageToPage = function (name, message) {
                    // Add the message to the page. 
                    $('#discussion').append('<li><strong>' + htmlEncode(name) 
                        + '</strong>: ' + htmlEncode(message) + '</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();
                    });
                });
            });
            // This optional function html-encodes messages for display in the page.
            function htmlEncode(value) {
                var encodedValue = $('<div />').text(value).html();
                return encodedValue;
            }
        </script>
    }
    
  7. すべて保存プロジェクト。Save All for the project.

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

  1. F5 キーを押して、デバッグ モードで、プロジェクトを実行します。Press F5 to run the project in debug mode.

  2. ブラウザーのアドレスの行の追加 /ホーム/チャットプロジェクトの既定のページの URL にします。In the browser address line, append /home/chat to the URL of the default page for the project. ブラウザーのインスタンスとユーザー名のプロンプトで、チャット ページが読み込まれます。The Chat page loads in a browser instance and prompts for a user name.

    ユーザー名の入力

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

  4. ブラウザーのアドレスの行から 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.

  5. 各ブラウザー インスタンスでコメントを追加し、をクリックして送信します。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.

  6. 次のスクリーン ショットは、ブラウザーで実行されているチャット アプリケーションを示しています。The following screen shot shows the chat application running in a browser.

    チャット ブラウザー

  7. ソリューション エクスプ ローラー、検査、スクリプト ドキュメント実行中のアプリケーションのノード。In Solution Explorer, inspect the Script Documents node for the running application. お使いのブラウザーとして Internet Explorer を使用している場合、このノードはデバッグ モードに表示されます。This node is visible in debug mode if you are using Internet Explorer as your browser. という名前のスクリプト ファイルがある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. Internet Explorer 以外のブラウザーを使用する場合は、動的もアクセスできるhubsファイルを参照して直接、たとえば http://mywebsite/signalr/hubsします。If you use a browser other than Internet Explorer, you can also access the dynamic hubs file by browsing to it directly, for example http://mywebsite/signalr/hubs.

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

コードを確認します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.addNewMessageToPageします。The hub in turn sends the message to all clients by calling Clients.All.addNewMessageToPage.

送信メソッドがいくつかのハブの概念を示します。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 property to access all clients connected to this hub.

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

    public class ChatHub : Hub
    {
        public void Send(string name, string message)
        {
            Clients.All.addNewMessageToPage(name, message);
        }
    }
    

SignalR と jQuerySignalR and jQuery

Chat.cshtmlビュー ファイルのコード サンプルでは、SignalR jQuery ライブラリを使用して、SignalR hub と通信する方法を示しています。The Chat.cshtml view file 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 creating a reference to the auto-generated proxy for 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. 参照する場合、ChatHubクラス jquery では通常 pascal 形式で、C# の場合と大文字小文字の区別 ChatHub.cs クラス ファイルを編集します。If you want to reference the ChatHub class in jQuery with conventional Pascal casing as you would in C#, edit the ChatHub.cs class file. 追加、usingを参照するステートメント、Microsoft.AspNet.SignalR.Hubs名前空間。Add a using statement to reference the Microsoft.AspNet.SignalR.Hubs namespace. 追加し、HubName属性をChatHubクラス、たとえば[HubName("ChatHub")]します。Then add the HubName attribute to the ChatHub class, for example [HubName("ChatHub")]. 参照を jQuery を最後に、更新、ChatHubクラス。Finally, update your jQuery reference to the ChatHub class.

次のコードでは、スクリプトでコールバック関数を作成する方法を示します。The following code shows how to create a callback function in the script. サーバー上のハブ クラスは、各クライアントにコンテンツの更新をプッシュするには、この関数を呼び出します。The hub class on the server calls this function to push content updates to each client. 省略可能な呼び出し、 htmlEncode ページで、スクリプト インジェクションを防止する手段として表示する前に関数を HTML に方法が表示されますが、メッセージの内容をエンコードします。The optional call to the htmlEncode function shows a way to HTML encode the message content before displaying it in the page, as a way to prevent script injection.

chat.client.addNewMessageToPage = function (name, message) {
    // Add the message to the page. 
    $('#discussion').append('<li><strong>' + htmlEncode(name) 
        + '</strong>: ' + htmlEncode(message) + '</li>');
};

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

Note

このアプローチにより、イベント ハンドラーが実行される前に、接続が確立されていること。This approach ensures 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 開発の概念については、SignalR のソース コードおよびリソースは、次のサイトを参照してください。To learn more advanced SignalR developments concepts, visit the following sites for SignalR source code and resources :