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

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

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

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

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.

必須コンポーネントPrerequisites

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

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

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

    Web を作成します。

  2. 新しい ASP.NET プロジェクト - SignalRChat ウィンドウのままにを選択し、選択OKIn the New ASP.NET Project - SignalRChat window, leave Empty selected and select OK.

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

  4. 新しい項目の追加 - 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).

  5. クラスの名前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.

  6. 新しいコードを置き換える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 broadcastMessage method to update clients.
                Clients.All.broadcastMessage(name, message);
            }
        }
    }
    
  7. ソリューション エクスプ ローラープロジェクトを右クリックし、選択、追加 > 新しい項目のします。In Solution Explorer, right-click the project and select Add > New Item.

  8. 新しい項目の追加 - SignalRChat選択インストール済み > Visual C# > Webし選択OWIN Startup クラスします。In Add New Item - SignalRChat select Installed > Visual C# > Web and then select OWIN Startup Class.

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

  10. ソリューション エクスプ ローラープロジェクトを右クリックし、選択、追加 > HTML ページします。In Solution Explorer, right-click the project and select Add > HTML Page.

  11. 名前を新しいページインデックスを選択し、 OKします。Name the new page index and select OK.

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

  13. このコードでは、HTML ページの既定のコードを置き換えます。Replace the default code in the HTML page with this 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-3.1.1.min.js" ></script>
        <!--Reference the SignalR library. -->
        <script src="Scripts/jquery.signalR-2.2.1.min.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>
    
  14. ソリューション エクスプ ローラー、展開スクリプトします。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.

  15. コード ブロック内のスクリプト参照がプロジェクト内のスクリプト ファイルのバージョンに対応することを確認します。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. -->
    <!--Reference the jQuery library. -->
    <script src="Scripts/jquery-3.1.1.min.js" ></script>
    <!--Reference the SignalR library. -->
    <script src="Scripts/jquery.signalR-2.2.1.min.js"></script>
    
  16. 一致しない場合は、更新、 .htmlファイル。If they don't match, update the .html file.

  17. メニュー バーから選択ファイル > すべて保存します。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

SignalRChat アプリケーションでは、2 つの基本的な SignalR 開発タスクを示します。The SignalRChat 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 above, 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 use 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.broadcastMessageします。The hub then sends the message to all clients by calling Clients.All.broadcastMessage.

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.

  • クライアントで関数を呼び出す (など、broadcastMessage関数) クライアントを更新します。Call a function on the client (like 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 と、index.html で jQuerySignalR and jQuery in the index.html

Index.htmlページ コード サンプルでは、SignalR jQuery ライブラリを使用して、SignalR hub と通信する方法を示しています。The index.html page 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 declares a proxy to reference 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 でサーバー クラスとそのメンバーへの参照は camelCase が。In JavaScript the reference to the server class and its members has to be 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.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 hub class on the server calls this function to push content updates to each client. 2 つの行を HTML エンコード、コンテンツを表示する前に省略可能で、スクリプト インジェクションを防止する優れた方法を表示します。The two lines that HTML-encode the content before displaying it are optional and show a good 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 the code establishes a connection before the event handler executes.

コードが接続を開始しのクリック イベントを処理する関数に渡します、送信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.

コードを取得する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

SignalR と MVC 5 を使用する方法については、次の記事に進んでください。Advance to the next article to learn how to use SignalR and MVC 5.