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

[アーティクル]
07/13/2023

警告

このドキュメントは、SignalR の最新バージョン用ではありません。 SignalR の ASP.NET Coreを見てみましょう。

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

概要

このチュートリアルでは、簡単なブラウザーベースのチャットアプリケーションを構築する方法を示して、SignalR 開発について説明します。 SignalR ライブラリを空の ASP.NET Web アプリケーションに追加し、クライアントにメッセージを送信するためのハブクラスを作成し、ユーザーがチャットメッセージを送受信できるようにする HTML ページを作成します。 MVC ビューを使用して MVC 4 でチャットアプリケーションを作成する方法を示す同様のチュートリアルについては、「SignalR と MVC 4 を使用したはじめに」を参照してください。

Note

このチュートリアルでは、SignalR のリリース (1.x) バージョンを使用します。 SignalR 1.x と 2.0 の間の変更の詳細については、「 SignalR 1.x プロジェクトのアップグレード」を参照してください。

SignalR は、ライブユーザー操作またはリアルタイムデータ更新を必要とする Web アプリケーションを構築するためのオープンソースの .NET ライブラリです。たとえば、ソーシャルアプリケーション、マルチユーザーゲーム、ビジネスコラボレーション、ニュース、天気、財務更新アプリケーションなどがあります。これらは、多くの場合、リアルタイムアプリケーションと呼ばれます。

SignalR を使用すると、リアルタイムアプリケーションを構築するプロセスが簡略化されます。これには、ASP.NET サーバーライブラリと JavaScript クライアントライブラリが含まれており、クライアントとサーバーの接続の管理とクライアントへのコンテンツ更新のプッシュを容易にします。 SignalR ライブラリを既存の ASP.NET アプリケーションに追加して、リアルタイム機能を利用できます。

このチュートリアルでは、次の SignalR 開発タスクについて説明します。

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

次のスクリーンショットは、ブラウザーで実行されているチャットアプリケーションを示しています。新しい各ユーザーは、コメントを投稿し、ユーザーがチャットに参加した後に追加されたコメントを表示できます。

チャットインスタンス

セクション:

プロジェクトを設定する
サンプルを実行する
コードを調べる
次の手順

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

このセクションでは、空の ASP.NET Web アプリケーションを作成し、SignalR を追加し、チャットアプリケーションを作成する方法について説明します。

前提条件:

Visual Studio 2010 SP1 または 2012。 Visual Studio をお持ちでない場合は、「 ASP.NET ダウンロード」を参照して、無料の Visual Studio 2012 Express Development Tool を入手してください。
Microsoft ASP.NET and Web Tools 2012.2. Visual Studio 2012 の場合、このインストーラーは SignalR テンプレートを含む新しい ASP.NET 機能を Visual Studio に追加します。 Visual Studio 2010 SP1 の場合、インストーラーは使用できませんが、セットアップ手順の説明に従って SignalR NuGet パッケージをインストールすることでチュートリアルを完了できます。

次の手順では、Visual Studio 2012 を使用して ASP.NET 空の Web アプリケーションを作成し、SignalR ライブラリを追加します。

Visual Studio で、ASP.NET 空の Web アプリケーションを作成します。
[ツール] を選択して パッケージマネージャーコンソール を開く |NuGet パッケージマネージャー |パッケージマネージャーコンソール。コンソールウィンドウに次のコマンドを入力します。

Install-Package Microsoft.AspNet.SignalR -Version 1.1.3

このコマンドは、SignalR 1.x の最新バージョンをインストールします。
ソリューションエクスプローラーで、プロジェクトを右クリックし、追加 |クラス。新しいクラスに ChatHub という名前を付けます。
[ソリューションエクスプローラースクリプト] ノードを展開します。 jQuery と SignalR のスクリプトライブラリがプロジェクトに表示されます。

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 broadcastMessage method to update clients.
            Clients.All.broadcastMessage(name, message);
        }
    }
}

ソリューションエクスプローラーでプロジェクトを右クリックし、[追加 |新しい項目。 [ 新しい項目の追加 ] ダイアログで、[ グローバルアプリケーションクラス ] を選択し、[ 追加] をクリックします。
Global.asax.cs クラスで指定されたusingステートメントの後に、次usingのステートメントを追加します。
```
using System.Web.Routing;
using Microsoft.AspNet.SignalR;
```
Global クラスのメソッドに Application_Start 次のコード行を追加して、SignalR ハブの既定のルートを登録します。
```
// Register the default hubs route: ~/signalr/hubs
RouteTable.Routes.MapHubs();
```
ソリューションエクスプローラーでプロジェクトを右クリックし、[追加 |新しい項目。 [ 新しい項目の追加 ] ダイアログで、[Html ページ] を選択し、[ 追加] をクリックします。
ソリューションエクスプローラーで、先ほど作成した HTML ページを右クリックし、[スタートページとして設定] をクリックします。

HTML ページの既定のコードを次のコードに置き換えます。

<!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>

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

サンプルを実行する

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

Note

この単純なチャットアプリケーションでは、サーバー上のディスカッションコンテキストは維持されません。ハブは、現在のすべてのユーザーにコメントをブロードキャストします。後でチャットに参加したユーザーには、参加時から追加されたメッセージが表示されます。

次のスクリーンショットは、3 つのブラウザーインスタンスで実行されているチャットアプリケーションを示しています。これらはすべて、1 つのインスタンスがメッセージを送信したときに更新されます。
ソリューションエクスプローラーで、実行中のアプリケーションの [スクリプトドキュメント] ノードを調べます。 SignalR ライブラリが実行時に動的に生成する hubs という名前のスクリプトファイルがあります。このファイルは、jQuery スクリプトとサーバー側コードの間の通信を管理します。

コードを調べる

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

SignalR Hubs

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

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

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

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

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

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

SignalR と jQuery

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

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

var chat = $.connection.chatHub;

Note

jQuery では、サーバークラスとそのメンバーへの参照はキャメルケースです。このコードサンプルでは、jQuery の C# ChatHub クラスを chatHub として参照しています。

次のコードは、スクリプトでコールバック関数を作成する方法です。サーバー上のハブクラスは、この関数を呼び出して、各クライアントにコンテンツの更新をプッシュします。コンテンツを表示する前に HTML がエンコードする 2 行は省略可能であり、スクリプトの挿入を防ぐ簡単な方法を示します。

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

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

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 開発タスクをいくつか学習しました。SignalR を ASP.NET アプリケーションに追加する方法、ハブクラスを作成する方法、ハブからメッセージを送受信する方法についても説明しました。

このチュートリアルのサンプルアプリケーションまたは他の SignalR アプリケーションをインターネット経由で使用できるようにするには、ホスティングプロバイダーにデプロイします。 Microsoft は、無料の Windows Azure 試用版アカウントで最大 10 個の Web サイトに無料の Web ホスティングを提供しています。サンプル SignalR アプリケーションをデプロイする方法のチュートリアルについては、「SignalR はじめにサンプルを Windows Azure Web サイトとして発行する」を参照してください。 Visual Studio Web プロジェクトを Windows Azure Web サイトにデプロイする方法の詳細については、「ASP.NET アプリケーションを Windows Azure Web サイトにデプロイする」を参照してください。 (注: WebSocket トランスポートは、現在、Windows Azure Web サイトではサポートされていません。WebSocket トランスポートを使用できない場合、SignalR は、「 SignalR の概要」トピックの「トランスポート」セクションで説明されているように、他の使用可能なトランスポートを使用します)。

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

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

概要

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

サンプルを実行する

コードを調べる

SignalR Hubs

SignalR と jQuery

次の手順

フィードバック

フィードバック

その他のリソース