チュートリアル: SignalR 1.x と MVC 4 の概要

[アーティクル]
05/15/2024

警告

このドキュメントは、最新版の SignalR を対象としていません。 ASP.NET Core SignalR に関する記事を参照してください。

このチュートリアルでは、ASP.NET SignalR を使用してリアルタイムのチャットアプリケーションを作成する方法を示します。 SignalR を MVC 4 アプリケーションに追加し、メッセージを送信および表示するチャットビューを作成します。

概要

このチュートリアルでは、ASP.NET SignalR と ASP.NET MVC 4 を使用したリアルタイムの Web アプリケーション開発について説明します。このチュートリアルでは SignalR の概要チュートリアルと同じチャットアプリケーションコードを使用しますが、これをインターネットテンプレートに基づいて MVC 4 アプリケーションに追加する方法を示します。

このトピックでは、次の SignalR 開発タスクについて説明します。

SignalR ライブラリを MVC 4 アプリケーションに追加する。
クライアントにコンテンツをプッシュするハブクラスを作成する。
Web ページで SignalR jQuery ライブラリを使用して、ハブからメッセージを送信し、更新プログラムを表示する。

次のスクリーンショットは、ブラウザーで実行されている、完成したチャットアプリケーションを示しています。

Chat instances

セクション:

プロジェクトをセットアップする
サンプルを実行する
コードを確認する
次のステップ

プロジェクトをセットアップする

前提条件:

Visual Studio 2010 SP1、Visual Studio 2012、または Visual Studio 2012 Express。 Visual Studio をお持ちでない場合は、ASP.NET のダウンロードに関するページを参照して、無料の Visual Studio 2012 Express 開発ツールを入手してください。
Visual Studio 2010 の場合は、ASP.NET MVC 4 をインストールしてください。

このセクションでは、ASP.NET MVC 4 アプリケーションを作成し、SignalR ライブラリを追加し、チャットアプリケーションを作成する方法を示します。

1. Visual Studio で、ASP.NET MVC 4 アプリケーションを作成し、SignalRChat という名前を付け、[OK] をクリックします。
  
  Note
  
  VS 2010 では、[Framework バージョン] ドロップダウンコントロールで [.NET Framework 4] を選択します。 SignalR コードは、.NET Framework バージョン 4 および 4.5 で動作します。
  
  2.Internet Application テンプレートを選択し、[単体テストプロジェクトを作成する] オプションをオフにして、[OK] をクリックします。
  
  3.[ツール] > [NuGet パッケージマネージャー] > [パッケージマネージャーコンソール] を開き、次のコマンドを実行します。この手順により、SignalR 機能を有効にする一連のスクリプトファイルとアセンブリ参照がプロジェクトに追加されます。
  
  install-package Microsoft.AspNet.SignalR -Version 1.1.3 4.ソリューションエクスプローラーで Scripts フォルダーを展開します。 SignalR のスクリプトライブラリがプロジェクトに追加されていることに注意してください。
  
  5.ソリューションエクスプローラーでプロジェクトを右クリックし、[追加] | [新しいフォルダー]を選択し、Hubs という名前の新しいフォルダーを追加します。 6.Hubs フォルダーを右クリックし、[追加] | [クラス] をクリックし、ChatHub.cs という名前の新しい C# クラスを作成します。このクラスは、すべてのクライアントにメッセージを送信する SignalR サーバーハブとして使用します。

Note

Visual Studio 2012 を使用しており、ASP.NET および Web Tools 2012.2 更新プログラムがインストールされている場合は、新しい SignalR 項目テンプレートを使用してハブクラスを作成できます。これを行うには、Hubs フォルダーを右クリックし、[追加] | [新しい項目] をクリックし、[SignalR ハブクラス (v1)] を選択し、このクラスに ChatHub.cs という名前を付けます。

ChatHub クラスのコードを、次のコードに置き換えます。

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);
        }
    }
}

プロジェクトの Global.asax ファイルを開き、Application_Start メソッド内のコードの最初の行として RouteTable.Routes.MapHubs(); メソッドへの呼び出しを追加します。このコードにより、SignalR ハブの既定のルートが登録されます。このコードは、その他任意のルートを登録する前に呼び出す必要があります。完成した Application_Start メソッドは、次の例のようになります。
```
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();
}
```
Controllers/HomeController.cs 内で見つかった HomeController クラスを編集し、このクラスに次のメソッドを追加します。このメソッドは、後の手順で作成するチャット ビューを返します。
```
public ActionResult Chat()
{
    return View();
}
```
先ほど作成した Chat メソッド内で右クリックし、[ビューの追加] をクリックして新しいビューファイルを作成します。
[ビューの追加] ダイアログで、[レイアウトまたはマスターページを使用する] チェックボックスがオンになっていることを確認し (その他のチェックボックスはオフにし)、[追加] をクリックします。

Chat.cshtml という名前の新しいビューファイルを編集します。 <h2> タグの後で、次の <div> セクションと @section scripts コードブロックをページに貼り付けます。このスクリプトを使用すると、ページでチャットメッセージを送信し、サーバーからのメッセージを表示できます。チャットビューの完全なコードは、次のコードブロックに表示されます。

重要

SignalR やその他のスクリプトライブラリを Visual Studio プロジェクトに追加すると、パッケージマネージャーにより、このトピックに示されているバージョンよりも新しいバージョンのスクリプトがインストールされる場合があります。コード内のスクリプト参照が、プロジェクトにインストールされているスクリプトライブラリのバージョンと一致していることを確認してください。

@{
    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>
}

プロジェクトの [すべて保存] を選択します。

サンプルを実行する

F5 を押し、プロジェクトをデバッグモードで実行します。
ブラウザーのアドレス行で、プロジェクトの既定のページの URL に /home/chat を追加します。チャットページがブラウザーインスタンスに読み込まれ、ユーザー名の入力が求められます。
ユーザー名を入力します。
ブラウザーのアドレス行から URL をコピーし、それを使用してさらに 2 つのブラウザーインスタンスを開きます。ブラウザーインスタンスごとに、一意のユーザー名を入力します。
ブラウザーインスタンスごとに、コメントを追加し、[送信] をクリックします。これらのコメントは、すべてのブラウザーインスタンスに表示されます。

Note

このシンプルなチャットアプリケーションは、サーバー上のディスカッションコンテキストを保持しません。ハブは、現在のすべてのユーザーにコメントをブロードキャストします。後でチャットに参加したユーザーには、参加した時点から追加されたメッセージが表示されます。
次のスクリーンショットは、ブラウザーで実行されているチャットアプリケーションを示しています。
ソリューションエクスプローラーで、実行中のアプリケーションの [スクリプトドキュメント] ノードを調べます。ブラウザーとして Internet Explorer を使用している場合、このノードはデバッグモードで表示されます。 SignalR ライブラリが実行時に動的に生成する hubs という名前のスクリプトファイルがあります。このファイルは、jQuery スクリプトとサーバー側コード間の通信を管理します。 Internet Explorer 以外のブラウザーを使用している場合は、動的な hubs ファイルを直接参照してアクセスすることもできます(例: http://mywebsite/signalr/hubs.)。

コードを確認する

SignalR チャットアプリケーションでは、2 つの基本的な SignalR 開発タスクを示します。すなわち、サーバー上のメインの調整オブジェクトとしてハブを作成するタスクと、SignalR jQuery ライブラリを使用してメッセージを送受信するタスクです。

SignalR Hubs

コードサンプルでは、ChatHub クラスは Microsoft.AspNet.SignalR.Hub クラスから派生しています。 Hub クラスからの派生は、SignalR アプリケーションを構築するのに便利な方法です。ハブクラスにパブリックメソッドを作成し、Web ページ内の jQuery スクリプトからそれらのメソッドを呼び出してアクセスできます。

チャットコードでは、クライアントが新しいメッセージを送信するために ChatHub.Send メソッドを呼び出します。次に、ハブが、Clients.All.addNewMessageToPage を呼び出してすべてのクライアントにメッセージを送信します。

Send メソッドは、いくつかのハブの概念を示しています。

クライアントがパブリックメソッドを呼び出すことができるように、ハブでそのメソッドを宣言します。
Microsoft.AspNet.SignalR.Hub.Clients プロパティを使用して、このハブに接続されているすべてのクライアントにアクセスします。

クライアントで jQuery 関数 (addNewMessageToPage 関数など) を呼び出して、クライアントを更新します。

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

SignalR と jQuery

コードサンプルの Chat.cshtml ビューファイルは、SignalR jQuery ライブラリを使用して SignalR ハブと通信する方法を示しています。コードの重要なタスクは、ハブの自動生成されたプロキシへの参照を作成すること、サーバーがクライアントにコンテンツをプッシュするために呼び出すことができる関数を宣言すること、ハブにメッセージを送信するための接続を開始することです。

次のコードでは、ハブのプロキシを宣言します。

var chat = $.connection.chatHub;

Note

jQuery では、サーバークラスとそのメンバーへの参照はキャメルケースで記述します。コードサンプルの jQuery では、C# の ChatHub クラスを chatHub として参照しています。 C# の場合と同様に、従来のパスカルケースを使用して jQuery の ChatHub クラスを参照する場合は、ChatHub.cs クラスファイルを編集します。 Microsoft.AspNet.SignalR.Hubs 名前空間を参照するための using ステートメントを追加します。次に、ChatHub クラスに HubName 属性を追加します (例: [HubName("ChatHub")])。最後に、ChatHub クラスに対する jQuery 参照を更新します。

次のコードは、スクリプトでコールバック関数を作成する方法を示しています。サーバー上のハブクラスは、この関数を呼び出して、各クライアントにコンテンツの更新をプッシュします。 htmlEncode 関数への省略可能な呼び出しは、スクリプトの挿入を防ぐ方法として、メッセージをページに表示する前にその内容を HTML エンコードする方法を示しています。

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

次のコードは、ハブを使用して接続を開く方法を示しています。このコードは接続を開始し、[チャット] ページの [送信] ボタンのクリックイベントを処理する関数を渡します。

Note

この方法を使用すると、イベントハンドラーが実行する前に接続が確立されます。

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

次のステップ

SignalR はリアルタイムの Web アプリケーションを構築するためのフレームワークであることを学習しました。また、SignalR を ASP.NET アプリケーションに追加する方法、ハブクラスを作成する方法、ハブとメッセージを送受信する方法など、複数の SignalR 開発タスクについても学習しました。

より高度な SignalR 開発の概念については、以下のサイトで SignalR に関するソースコードとリソースを参照してください。

次の方法で共有

チュートリアル: SignalR 1.x と MVC 4 の概要

概要

プロジェクトをセットアップする

サンプルを実行する

コードを確認する

SignalR Hubs

SignalR と jQuery

次のステップ

フィードバック

その他のリソース