チュートリアル: SignalR 2 と MVC 5 を使用したリアルタイムのチャットTutorial: Real-time chat with SignalR 2 and MVC 5

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

このチュートリアルでは、次の作業を行いました。In this tutorial, you:

  • プロジェクトを設定します。Set up the project
  • サンプルを実行します。Run the sample
  • コードを確認しますExamine the code

Warning

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

必須コンポーネントPrerequisites

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

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

  1. Visual Studio で、C# ASP.NET アプリケーションを作成するには、.NET Framework 4.5 を対象として、SignalRChat、という名前を付けます [ok] をクリックします。In Visual Studio, create a C# ASP.NET application that targets .NET Framework 4.5, name it SignalRChat, and click OK.

    Web を作成します。

  2. 新しい ASP.NET Web アプリケーション - SignalRMvcChatを選択しますMVC選び認証の変更します。In New ASP.NET Web Application - SignalRMvcChat, select MVC and then select Change Authentication.

  3. 認証の変更を選択します認証なし をクリックOKします。In Change Authentication, select No Authentication and click OK.

    認証なし を選択します。

  4. 新しい ASP.NET Web アプリケーション - SignalRMvcChatOKIn New ASP.NET Web Application - SignalRMvcChat, select OK.

  5. ソリューション エクスプ ローラープロジェクトを右クリックし、選択、追加 > 新しい項目のします。In Solution Explorer, right-click the project and select Add > New Item.

  6. 新しい項目の追加 - SignalRChatインストール済み > Visual C# > Web > SignalR選びSignalR ハブ クラス (v2) します。In Add New Item - SignalRChat, select Installed > Visual C# > Web > SignalR and then select SignalR Hub Class (v2).

  7. クラスの名前ChatHubし、プロジェクトに追加します。Name the class ChatHub and add it to the project.

    この手順で作成、 ChatHub.csクラス ファイルとスクリプト ファイルとプロジェクトに SignalR をサポートするアセンブリ参照のセットを追加します。This step creates the ChatHub.cs class file and adds a set of script files and assembly references that support SignalR to the project.

  8. 新しいコードを置き換えるChatHub.cs次のコードでクラス ファイル。Replace the code in the new ChatHub.cs class file with this 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);
            }
        }
    }
    
  9. ソリューション エクスプ ローラープロジェクトを右クリックし、選択、追加 > クラスします。In Solution Explorer, right-click the project and select Add > Class.

  10. 新しいクラスの名前スタートアップし、プロジェクトに追加します。Name the new class Startup and add it to the project.

  11. コードに置き換えます、 Startup.cs次のコードでクラス ファイル。Replace the code in the Startup.cs class file with this code:

    using Owin;
    using Microsoft.Owin;
    [assembly: OwinStartup(typeof(SignalRChat.Startup))]
    namespace SignalRChat
    {
        public class Startup
        {
            public void Configuration(IAppBuilder app)
            {
                // Any connection or hub wire up and configuration should go here
                app.MapSignalR();
            }
        }
    }
    
  12. ソリューション エクスプ ローラーコント ローラー > HomeController.csします。In Solution Explorer, select Controllers > HomeController.cs.

  13. このメソッドを追加、 HomeController.csします。Add this method to the HomeController.cs.

    public ActionResult Chat()
    {
        return View();
    }
    

    このメソッドが戻る、チャット後の手順で作成するビュー。This method returns the Chat view that you create in a later step.

  14. ソリューション エクスプ ローラー、右クリックビュー > ホーム、選び追加 > ビューします。In Solution Explorer, right-click Views > Home, and select Add > View.

  15. ビューの追加、新しいビューを指定してチャット選択追加します。In Add View, name the new view Chat and select Add.

  16. 内容を置き換えるChat.cshtml次のコードで。Replace the contents of Chat.cshtml with this code:

    @{
        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-2.1.0.min.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>
    }
    
  17. ソリューション エクスプ ローラー、展開スクリプトします。In Solution Explorer, expand Scripts.

    JQuery と SignalR 用のスクリプト ライブラリは、プロジェクトに表示されます。Script libraries for jQuery and SignalR are visible in the project.

    Important

    パッケージ マネージャーは、以降のバージョンの SignalR スクリプトをインストールがある可能性があります。The package manager may have installed a later version of the SignalR scripts.

  18. コード ブロック内のスクリプト参照がプロジェクト内のスクリプト ファイルのバージョンに対応することを確認します。Check that the script references in the code block correspond to the versions of the script files in the project.

    スクリプトの元のコード ブロックからの参照。Script references from the original code block:

    <!--Script references. -->
    <!--The jQuery library is required and is referenced by default in _Layout.cshtml. -->
    <!--Reference the SignalR library. -->
    <script src="~/Scripts/jquery.signalR-2.1.0.min.js"></script>
    
  19. 一致しない場合は、更新、 .cshtmlファイル。If they don't match, update the .cshtml file.

  20. メニュー バーから選択ファイル > すべて保存します。From the menu bar, select File > Save All.

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

  1. ツールバーで、有効にするスクリプトのデバッグし、サンプルをデバッグ モードで実行する [再生] ボタンを選択します。In the toolbar, turn on Script Debugging and then select the play button to run the sample in Debug mode.

    ユーザー名の入力

  2. ブラウザーが開いたら、チャット、id の名前を入力します。When the browser opens, enter a name for your chat identity.

  3. ブラウザーから URL をコピーし、他の 2 つのブラウザーを開き、アドレス バーに Url を貼り付けます。Copy the URL from the browser, open two other browsers, and paste the URLs into the address bars.

  4. 各ブラウザーでは、一意の名前を入力します。In each browser, enter a unique name.

  5. ここで、追加、コメントを送信します。Now, add a comment and select Send. 他のブラウザーでは繰り返しません。Repeat that in the other browsers. コメントは、リアルタイムで表示されます。The comments appear in real time.

    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.

    次の 3 つのさまざまなブラウザーでのチャット アプリケーションの実行方法を参照してください。See how the chat application runs in three different browsers. Tom、Anand、Susan は、メッセージを送信して、すべてのブラウザーはリアルタイムで更新します。When Tom, Anand, and Susan send messages, all browsers update in real time:

    次の 3 つのすべてのブラウザーが同じチャットの履歴を表示します。

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

    スクリプト ドキュメント ノード内の自動生成されたハブのスクリプト

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

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

SignalR ハブで、ChatHub.csSignalR Hubs in the ChatHub.cs

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

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

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

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

SignalR と jQuery Chat.cshtmlSignalR and jQuery Chat.cshtml

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 code carries out many important tasks. ハブの自動生成されたプロキシへの参照を作成しをクライアントにコンテンツをプッシュするサーバーを呼び出すことができ、ハブにメッセージを送信への接続を開始する関数を宣言します。It creates a reference to the autogenerated proxy for the hub, declares a function that the server can call to push content to clients, and it starts a connection to send messages to the hub.

var chat = $.connection.chatHub;

Note

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

このコード ブロックでは、スクリプト内のコールバック関数を作成します。In this code block, you create a callback function in the script.

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

サーバー上のハブ クラスは、各クライアントにコンテンツの更新をプッシュするには、この関数を呼び出します。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. スクリプト インジェクションを防止する方法になります。It's a way to prevent script injection.

このコードは、ハブとの接続を開きます。This code opens a connection with the hub.

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

Note

このアプローチによりイベント ハンドラーが実行される前に、接続を確立するようになります。This approach ensures that you establish a connection before the event handler executes.

コードが接続を開始しのクリック イベントを処理する関数に渡します、送信チャット ページ ボタン。The code starts the connection and then passes it a function to handle the click event on the Send button in the Chat page.

コードを取得するGet the code

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

その他の技術情報Additional resources

詳細については、SignalR は、次のリソースを参照してください。For more about SignalR, see the following resources:

次の手順Next steps

このチュートリアルでは、次の作業を行いました。In this tutorial, you:

  • プロジェクトを設定します。Set up the project
  • サンプルの実行Ran the sample
  • コードを調べるExamined the code

ASP.NET SignalR 2 を使用して、頻度の高いメッセージング機能を提供する web アプリケーションを作成する方法については、次の記事に進んでください。Advance to the next article to learn how to create a web application that uses ASP.NET SignalR 2 to provide high-frequency messaging functionality.