ASP.NET SignalR Hubs API ガイド - JavaScript クライアント

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

警告

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

このドキュメントでは、ブラウザーや Windows ストア (WinJS) アプリケーションなどの JavaScript クライアントで SignalR バージョン 2 用の Hubs API を使用する方法の概要について説明します。

SignalR Hubs API を使用すると、サーバーから接続されているクライアント、およびクライアントからサーバーへのリモートプロシージャコール (RPC) を行うことができます。サーバーコードでは、クライアントが呼び出すことができるメソッドを定義し、クライアントで実行されるメソッドを呼び出します。クライアントコードでは、サーバーから呼び出すことができるメソッドを定義し、サーバー上で実行されるメソッドを呼び出します。 SignalR は、すべてのクライアントとサーバーの組み合てを処理します。

SignalR には、永続的な接続と呼ばれる下位レベルの API も用意されています。 SignalR、Hubs、および永続的な接続の概要については、「 SignalR の概要」を参照してください。

このトピックで使用するソフトウェアのバージョン

Visual Studio 2017

.NET 4.5

SignalR バージョン 2

このトピックの以前のバージョン

SignalR の以前のバージョンの詳細については、「 SignalR の古いバージョン」を参照してください。

質問とコメント

このチュートリアルを気に入った方法と、ページの下部にあるコメントで改善できる内容に関するフィードバックをお寄せください。チュートリアルに直接関連していない質問がある場合は、 ASP.NET SignalR フォーラムまたは StackOverflow.com に投稿できます。

概要

このドキュメントは、次のトピックに分かれています。

生成されたプロキシとその機能
- 生成されたプロキシを使用するタイミング
クライアントセットアップ
- 動的に生成されたプロキシを参照する方法
- SignalR で生成されたプロキシの物理ファイルを作成する方法
接続を確立する方法
- $.connection.hub は$.hubConnection() が作成するオブジェクトと同じです
- start メソッドの非同期実行
クロスドメイン接続を確立する方法
接続を構成する方法
- クエリ文字列パラメーターを指定する方法
- トランスポート方法を指定する方法
ハブクラスのプロキシを取得する方法
サーバーが呼び出すことができるメソッドをクライアントで定義する方法
クライアントからサーバーメソッドを呼び出す方法
接続の有効期間イベントを処理する方法
エラーを処理する方法
クライアント側のログ記録を有効にする方法

サーバーまたは .NET クライアントをプログラミングする方法のドキュメントについては、次のリソースを参照してください。

SignalR 2 サーバーコンポーネントは、.NET 4.5 でのみ使用できます (ただし、.NET 4.0 には SignalR 2 用の .NET クライアントがあります)。

生成されたプロキシとその機能

SignalR が生成するプロキシの有無にかかわらず、SignalR サービスと通信するように JavaScript クライアントをプログラミングできます。プロキシで行う処理は、接続に使用するコードの構文を簡略化し、サーバーが呼び出すメソッドを記述し、サーバー上でメソッドを呼び出します。

サーバーメソッドを呼び出すコードを記述する場合、生成されたプロキシを使用すると、ローカル関数を実行しているかのように見える構文を使用できます。代わりに invoke('serverMethod', arg1, arg2)を記述serverMethod(arg1, arg2)できます。生成されたプロキシ構文を使用すると、サーバーメソッド名を誤って入力した場合に、すぐにわかりやすいクライアント側エラーが発生します。また、プロキシを定義するファイルを手動で作成する場合は、サーバーメソッドを呼び出すコードを記述するための IntelliSense のサポートを受けることもできます。

たとえば、サーバーに次の Hub クラスがあるとします。

public class ContosoChatHub : Hub
{
    public void NewContosoChatMessage(string name, string message)
    {
        Clients.All.addContosoChatMessageToPage(name, message);
    }
}

次のコード例は、サーバーでメソッドを呼び出し、サーバーからメソッドの NewContosoChatMessage 呼び出し addContosoChatMessageToPage を受信する JavaScript コードの外観を示しています。

生成されたプロキシを使用する

var contosoChatHubProxy = $.connection.contosoChatHub;
contosoChatHubProxy.client.addContosoChatMessageToPage = function (name, message) {
    console.log(name + ' ' + message);
};
$.connection.hub.start().done(function () {
    // Wire up Send button to call NewContosoChatMessage on the server.
    $('#newContosoChatMessage').click(function () {
         contosoChatHubProxy.server.newContosoChatMessage($('#displayname').val(), $('#message').val());
         $('#message').val('').focus();
     });
});

生成されたプロキシがない場合

var connection = $.hubConnection();
var contosoChatHubProxy = connection.createHubProxy('contosoChatHub');
contosoChatHubProxy.on('addContosoChatMessageToPage', function(name, message) {
    console.log(name + ' ' + message);
});
connection.start().done(function() {
    // Wire up Send button to call NewContosoChatMessage on the server.
    $('#newContosoChatMessage').click(function () {
        contosoChatHubProxy.invoke('newContosoChatMessage', $('#displayname').val(), $('#message').val());
        $('#message').val('').focus();
                });
    });

生成されたプロキシを使用するタイミング

サーバーが呼び出すクライアントメソッドに対して複数のイベントハンドラーを登録する場合は、生成されたプロキシを使用できません。それ以外の場合は、生成されたプロキシを使用するか、コーディング設定に基づいて使用しないことを選択できます。使用しない場合は、クライアントコード内の要素内 script の "signalr/hubs" URL を参照する必要はありません。

クライアントのセットアップ

JavaScript クライアントでは、jQuery と SignalR コア JavaScript ファイルへの参照が必要です。 jQuery のバージョンは、1.6.4 以降のバージョン (1.7.2、1.8.2、1.9.1 など) である必要があります。生成されたプロキシを使用する場合は、SignalR で生成されたプロキシ JavaScript ファイルへの参照も必要です。次の例は、生成されたプロキシを使用する HTML ページでの参照の外観を示しています。

<script src="Scripts/jquery-1.10.2.min.js"></script>
<script src="Scripts/jquery.signalR-2.1.0.min.js"></script>
<script src="signalr/hubs"></script>

これらの参照は、jQuery first、その後の SignalR コア、SignalR プロキシの最後の順序で含める必要があります。

動的に生成されたプロキシを参照する方法

前の例では、SignalR で生成されたプロキシへの参照は、物理ファイルではなく、動的に生成された JavaScript コードです。 SignalR はプロキシの JavaScript コードをその場で作成し、"/signalr/hubs" URL に応答してクライアントに提供します。メソッドで MapSignalR サーバー上の SignalR 接続に別のベース URL を指定した場合、動的に生成されるプロキシファイルの URL はカスタム URL で、"/hubs" が追加されます。

Note

Windows 8 (Windows ストア) JavaScript クライアントの場合は、動的に生成される代わりに物理プロキシファイルを使用します。詳細については、このトピックで後述する「SignalR で生成されたプロキシの物理ファイルを作成する方法」を参照してください。

ASP.NET MVC 4 または 5 Razor ビューで、チルダを使用して、プロキシファイル参照のアプリケーションルートを参照します。

<script src="~/signalr/hubs"></script>

MVC 5 での SignalR の使用の詳細については、「SignalR と MVC 5 を使用したはじめに」を参照してください。

ASP.NET MVC 3 Razor ビューで、プロキシファイル参照にを使用 Url.Content します。

<script src="@Url.Content("~/signalr/hubs")"></script>

ASP.NET Web Forms アプリケーションでは、プロキシファイル参照にを使用ResolveClientUrlするか、アプリルートの相対パス (チルダから始まる) を使用して ScriptManager を使用して登録します。

<script src='<%: ResolveClientUrl("~/signalr/hubs") %>'></script>

一般的な規則として、CSS または JavaScript ファイルに使用する "/signalr/hubs" URL を指定する場合と同じ方法を使用します。チルダを使用せずに URL を指定した場合、一部のシナリオでは、IIS Express を使用して Visual Studio でテストすると、アプリケーションは正しく動作しますが、完全な IIS に展開すると 404 エラーで失敗します。詳細については、MSDN サイトの「ASP.NET Web プロジェクト用の Visual Studio の Web サーバーでのRoot-Levelリソースへの参照の解決」を参照してください。

Visual Studio 2017 でデバッグモードで Web プロジェクトを実行し、ブラウザーとしてインターネットエクスプローラーを使用している場合は、[スクリプト] のソリューションエクスプローラーにプロキシファイルが表示されます。

ファイルの内容を表示するには、 ハブをダブルクリックします。 Visual Studio 2012 または 2013 とインターネットエクスプローラーを使用していない場合、またはデバッグモードでない場合は、"/signalR/hubs" URL を参照してファイルの内容を取得することもできます。たとえば、サイトがで http://localhost:56699実行されている場合は、ブラウザーでに http://localhost:56699/SignalR/hubs 移動します。

SignalR で生成されたプロキシの物理ファイルを作成する方法

動的に生成されたプロキシの代わりに、プロキシコードを持ち、そのファイルを参照する物理ファイルを作成できます。キャッシュまたはバンドルの動作を制御したり、サーバーメソッドの呼び出しをコーディングするときに IntelliSense を取得したりすることもできます。

プロキシファイルを作成するには、次の手順に従います。

Microsoft.AspNet.SignalR.Utils NuGet パッケージをインストールします。
コマンドプロンプトを開き、SignalR.exe ファイルを含む ツール フォルダーを参照します。 tools フォルダーは次の場所にあります。

[your solution folder]\packages\Microsoft.AspNet.SignalR.Utils.2.1.0\tools
次のコマンドを入力します。

signalr ghp /path:[path to the .dll that contains your Hub class]

通常、.dllへのパスは、プロジェクトフォルダー内の bin フォルダーです。

このコマンドは、と同じフォルダーに server.js という名前のファイル signalr.exe作成します。
server.js ファイルをプロジェクト内の適切なフォルダーに配置し、アプリケーションに適した名前に変更し、"signalr/hubs" 参照の代わりに参照を追加します。

接続を確立する方法

接続を確立するには、接続オブジェクトを作成し、プロキシを作成し、サーバーから呼び出すことができるメソッドのイベントハンドラーを登録する必要があります。プロキシとイベントハンドラーが設定されたら、メソッドを呼び出して接続を start 確立します。

生成されたプロキシを使用している場合は、生成されたプロキシコードによって自動的に行われるため、独自のコードで接続オブジェクトを作成する必要はありません。

接続を確立する (生成されたプロキシを使用)

var contosoChatHubProxy = $.connection.contosoChatHub;
contosoChatHubProxy.client.addContosoChatMessageToPage = function (name, message) {
    console.log(userName + ' ' + message);
};
$.connection.hub.start()
    .done(function(){ console.log('Now connected, connection ID=' + $.connection.hub.id); })
    .fail(function(){ console.log('Could not Connect!'); });

接続を確立する (生成されたプロキシを使用しない)

var connection = $.hubConnection();
var contosoChatHubProxy = connection.createHubProxy('contosoChatHub');
contosoChatHubProxy.on('addContosoChatMessageToPage', function(userName, message) {
    console.log(userName + ' ' + message);
});
connection.start()
    .done(function(){ console.log('Now connected, connection ID=' + connection.id); })
    .fail(function(){ console.log('Could not connect'); });

サンプルコードでは、既定の "/signalr" URL を使用して SignalR サービスに接続します。別のベース URL を指定する方法については、「 ASP.NET SignalR Hubs API ガイド - サーバー - /signalr URL」を参照してください。

既定では、ハブの場所は現在のサーバーです。別のサーバーに接続する場合は、次の例に示すように、メソッドを start 呼び出す前に URL を指定します。

$.connection.hub.url = '<yourbackendurl>;

Note

通常は、メソッドを呼び出して接続を確立する前に start 、イベントハンドラーを登録します。接続の確立後にいくつかのイベントハンドラーを登録する場合は、それを行うことができますが、メソッドを呼び出す前に、少なくとも 1 つのイベントハンドラーを登録する start 必要があります。その理由の 1 つは、アプリケーションに多数のハブが存在する可能性があるが、そのうちの 1 つに対してのみ使用する場合は、すべてのハブでイベントをトリガー OnConnected したくないということです。接続が確立されると、ハブのプロキシにクライアントメソッドが存在することが、SignalR にイベントをトリガー OnConnected するように指示します。メソッドを呼び出す前にイベントハンドラーを start 登録しない場合は、ハブでメソッドを呼び出すことができますが、ハブの OnConnected メソッドは呼び出されないため、サーバーからクライアントメソッドは呼び出されません。

$.connection.hub は$.hubConnection() が作成するオブジェクトと同じです

例からわかるように、生成されたプロキシを使用すると、 $.connection.hub は接続オブジェクトを参照します。これは、生成されたプロキシを使用していないときにを呼び出 $.hubConnection() すことで取得するオブジェクトと同じです。生成されたプロキシコードは、次のステートメントを実行して接続を作成します。

生成されたプロキシファイルでの接続の作成

生成されたプロキシを使用している場合は、生成されたプロキシを使用していない場合に接続オブジェクトでできることは何でも $.connection.hub できます。

start メソッドの非同期実行

メソッドは start 非同期的に実行されます。 jQuery Deferred オブジェクトが返されます。つまり、などのpipedoneメソッドを呼び出すことでコールバック関数をfail追加できます。サーバーメソッドの呼び出しなど、接続が確立された後に実行するコードがある場合は、そのコードをコールバック関数に配置するか、コールバック関数から呼び出します。 .doneコールバックメソッドは、接続が確立された後、およびサーバー上のイベントハンドラーメソッドにあるOnConnectedコードの実行が完了した後に実行されます。

(コールバックconsole.logではなく.done) メソッド呼び出しの後startに、前の例の "Now connected" ステートメントを次のコード行として配置すると、次の例に示すように、接続が確立される前に行が実行されます。

接続が確立された後に実行されるコードを記述する間違った方法

クロスドメイン接続を確立する方法

通常、ブラウザーがから http://contoso.comページを読み込む場合、SignalR 接続はの同じドメインにあります http://contoso.com/signalr。のページ http://contoso.com がへの http://fabrikam.com/signalr接続を確立する場合、これはクロスドメイン接続です。セキュリティ上の理由から、クロスドメイン接続は既定で無効になっています。

SignalR 1.x では、クロスドメイン要求は 1 つの EnableCrossDomain フラグによって制御されていました。このフラグは、JSONP 要求と CORS 要求の両方を制御しました。柔軟性を高めるために、SignalR のサーバーコンポーネントからすべての CORS サポートが削除され (ブラウザーでサポートされていることが検出された場合、JavaScript クライアントは CORS を通常どおり使用します)、これらのシナリオをサポートするために新しい OWIN ミドルウェアが使用できるようになりました。

(古いブラウザーでクロスドメイン要求をサポートするために) クライアントで JSONP が必要な場合は、次に示すように、オブジェクトtrueにをに設定HubConfigurationEnableJSONPして明示的に有効にする必要があります。 JSONP は CORS よりも安全性が低く、既定では無効になっています。

Microsoft.Owin.Cors をプロジェクトに追加する: このライブラリをインストールするには、パッケージマネージャーコンソールで次のコマンドを実行します。

Install-Package Microsoft.Owin.Cors

このコマンドを実行すると、パッケージの 2.1.0 バージョンがプロジェクトに追加されます。

UseCors の呼び出し

次のコードスニペットは、SignalR 2 でクロスドメイン接続を実装する方法を示しています。

SignalR 2 でのクロスドメイン要求の実装

次のコードは、SignalR 2 プロジェクトで CORS または JSONP を有効にする方法を示しています。このコードサンプルでは、 MapSignalRではなくと RunSignalR を使用Mapして、CORS ミドルウェアが CORS サポートを必要とする SignalR 要求に対してのみ実行されるようにします (でMapSignalR指定されたパスのすべてのトラフィックに対して実行されるのではなく)。Map は、アプリケーション全体ではなく、特定の URL プレフィックスに対して実行する必要がある他のミドルウェアにも使用できます。

using Microsoft.AspNet.SignalR;
using Microsoft.Owin.Cors;
using Owin;
namespace MyWebApplication
{
    public class Startup
    {
        public void Configuration(IAppBuilder app)
        {
            // Branch the pipeline here for requests that start with "/signalr"
            app.Map("/signalr", map =>
            {
                // Setup the CORS middleware to run before SignalR.
                // By default this will allow all origins. You can 
                // configure the set of origins and/or http verbs by
                // providing a cors options with a different policy.
                map.UseCors(CorsOptions.AllowAll);
                var hubConfiguration = new HubConfiguration 
                {
                    // You can enable JSONP by uncommenting line below.
                    // JSONP requests are insecure but some older browsers (and some
                    // versions of IE) require JSONP to work cross domain
                    // EnableJSONP = true
                };
                // Run the SignalR pipeline. We're not using MapSignalR
                // since this branch already runs under the "/signalr"
                // path.
                map.RunSignalR(hubConfiguration);
            });
        }
    }
}

Note

コードで true に設定 jQuery.support.cors しないでください。

SignalR は CORS の使用を処理します。を true に設定 jQuery.support.cors すると、ブラウザーで CORS がサポートされていると SignalR が想定されるため、JSONP は無効になります。
localhost URL に接続する場合、インターネットエクスプローラー 10 ではクロスドメイン接続とは見なされないため、サーバーでクロスドメイン接続を有効にしていない場合でも、アプリケーションは IE 10 でローカルに動作します。
インターネットエクスプローラー 9 でのクロスドメイン接続の使用については、こちらの StackOverflow スレッドを参照してください。
Chrome でクロスドメイン接続を使用する方法については、こちらの StackOverflow スレッドを参照してください。
サンプルコードでは、既定の "/signalr" URL を使用して SignalR サービスに接続します。別のベース URL を指定する方法については、「 ASP.NET SignalR Hubs API ガイド - サーバー - /signalr URL」を参照してください。

接続を構成する方法

接続を確立する前に、クエリ文字列パラメーターを指定するか、トランスポートメソッドを指定できます。

クエリ文字列パラメーターを指定する方法

クライアントの接続時にサーバーにデータを送信する場合は、クエリ文字列パラメーターを接続オブジェクトに追加できます。次の例は、クライアントコードでクエリ文字列パラメーターを設定する方法を示しています。

(生成されたプロキシを使用して) start メソッドを呼び出す前にクエリ文字列値を設定する

$.connection.hub.qs = { 'version' : '1.0' };

(生成されたプロキシを使用せずに) start メソッドを呼び出す前にクエリ文字列値を設定する

var connection = $.hubConnection();
connection.qs = { 'version' : '1.0' };

次の例は、サーバーコードでクエリ文字列パラメーターを読み取る方法を示しています。

public class ContosoChatHub : Hub
{
    public override Task OnConnected()
    {
        var version = Context.QueryString['version'];
        if (version != '1.0')
        {
            Clients.Caller.notifyWrongVersion();
        }
        return base.OnConnected();
    }
}

トランスポート方法を指定する方法

接続プロセスの一環として、SignalR クライアントは通常、サーバーとネゴシエートして、サーバーとクライアントの両方でサポートされる最適なトランスポートを決定します。使用するトランスポートが既にわかっている場合は、メソッドを呼び出すときにトランスポートメソッドを指定することで、このネゴシエーションプロセスを start バイパスできます。

トランスポートメソッドを指定するクライアントコード (生成されたプロキシを使用)

$.connection.hub.start( { transport: 'longPolling' });

トランスポートメソッドを指定するクライアントコード (生成されたプロキシなし)

var connection = $.hubConnection();
connection.start({ transport: 'longPolling' });

別の方法として、SignalR で試す順序で複数のトランスポートメソッドを指定できます。

カスタムトランスポートフォールバックスキームを指定するクライアントコード (生成されたプロキシを使用)

$.connection.hub.start( { transport: ['webSockets', 'longPolling'] });

カスタムトランスポートフォールバックスキームを指定するクライアントコード (生成されたプロキシなし)

var connection = $.hubConnection();
connection.start({ transport: ['webSockets', 'longPolling'] });

トランスポート方法を指定するには、次の値を使用できます。

"webSockets"
"foreverFrame"
"serverSentEvents"
"longPolling"

次の例では、接続で使用されているトランスポート方法を確認する方法を示します。

接続で使用されるトランスポートメソッドを表示するクライアントコード (生成されたプロキシを使用)

$.connection.hub.start().done(function () {
    console.log("Connected, transport = " + $.connection.hub.transport.name);
});

接続で使用されるトランスポートメソッドを表示するクライアントコード (生成されたプロキシなし)

var connection = $.hubConnection();
connection.hub.start().done(function () {
    console.log("Connected, transport = " + connection.transport.name);
});

サーバーコードでトランスポートメソッドをチェックする方法については、「ASP.NET SignalR Hubs API ガイド - サーバー - Context プロパティからクライアントに関する情報を取得する方法」を参照してください。トランスポートとフォールバックの詳細については、「 SignalR の概要 - トランスポートとフォールバック」を参照してください。

ハブクラスのプロキシを取得する方法

作成する各接続オブジェクトは、1 つ以上のハブクラスを含む SignalR サービスへの接続に関する情報をカプセル化します。 Hub クラスと通信するには、自分で作成するプロキシオブジェクト (生成されたプロキシを使用していない場合) または生成されるプロキシオブジェクトを使用します。

クライアントでは、プロキシ名は、ハブクラス名のキャメルケースバージョンです。 SignalR は、JavaScript コードが JavaScript 規則に準拠できるように、この変更を自動的に行います。

サーバー上のハブクラス

public class ContosoChatHub : Hub

ハブの生成されたクライアントプロキシへの参照を取得する

var myHubProxy = $.connection.contosoChatHub

ハブクラスのクライアントプロキシを作成する (プロキシが生成されていない)

var contosoChatHubProxy = connection.createHubProxy('contosoChatHub');

Hub クラスを属性で装飾する場合は、大文字と小文字を HubName 変更せずに正確な名前を使用します。

HubName 属性を持つサーバー上のハブクラス

[HubName("ContosoChatHub")]
public class ChatHub : Hub

ハブの生成されたクライアントプロキシへの参照を取得する

var contosoChatHubProxy = $.connection.ContosoChatHub

ハブクラスのクライアントプロキシを作成する (プロキシが生成されていない)

var contosoChatHubProxy = connection.createHubProxy('ContosoChatHub');

サーバーが呼び出すことができるメソッドをクライアントで定義する方法

サーバーがハブから呼び出すことができるメソッドを定義するには、生成されたプロキシのプロパティを使用 client してハブプロキシにイベントハンドラーを追加するか、生成されたプロキシを使用していない場合はメソッドを呼び出 on します。パラメーターには、複雑なオブジェクトを指定できます。

メソッドを呼び出して接続を確立する前に、 start イベントハンドラーを追加します。 (メソッドを呼び出 start した後にイベントハンドラーを追加する場合は、このドキュメントの前半の「接続を確立する方法」のメモを参照し、生成されたプロキシを使用せずにメソッドを定義するために示されている構文を使用します)。

メソッド名の一致では、大文字と小文字は区別されません。たとえば、Clients.All.addContosoChatMessageToPageサーバーでは、クライアントで、addContosoChatMessageToPage、または addcontosochatmessagetopage が実行AddContosoChatMessageToPageされます。

(生成されたプロキシを使用して) クライアントでメソッドを定義する

var contosoChatHubProxy = $.connection.contosoChatHub;
contosoChatHubProxy.client.addContosoChatMessageToPage = function (userName, message) {
    console.log(userName + ' ' + message);
};
$.connection.hub.start()
    .done(function(){ console.log('Now connected, connection ID=' + $.connection.hub.id); })
    .fail(function(){ console.log('Could not Connect!'); });

(生成されたプロキシを使用して) クライアントでメソッドを定義する別の方法

$.extend(contosoChatHubProxy.client, {
    addContosoChatMessageToPage: function(userName, message) {
    console.log(userName + ' ' + message);
    };
});

クライアントでメソッドを定義する (生成されたプロキシがない場合、または start メソッドを呼び出した後にを追加する場合)

var connection = $.hubConnection();
var contosoChatHubProxy = connection.createHubProxy('contosoChatHub');
contosoChatHubProxy.on('addContosoChatMessageToPage', function(userName, message) {
    console.log(userName + ' ' + message);
});
connection.start()
    .done(function(){ console.log('Now connected, connection ID=' + connection.id); })
    .fail(function(){ console.log('Could not connect'); });

クライアントメソッドを呼び出すサーバーコード

public class ContosoChatHub : Hub
{
    public void NewContosoChatMessage(string name, string message)
    {
        Clients.All.addContosoChatMessageToPage(name, message);
    }
}

次の例では、複合オブジェクトをメソッドパラメーターとして含めます。

(生成されたプロキシを使用して) 複雑なオブジェクトを受け取るクライアントでメソッドを定義する

var contosoChatHubProxy = $.connection.contosoChatHub;
contosoChatHubProxy.client.addMessageToPage = function (message) {
    console.log(message.UserName + ' ' + message.Message);
});

(生成されたプロキシを使用せずに) 複雑なオブジェクトを受け取るクライアントでメソッドを定義する

var connection = $.hubConnection();
var contosoChatHubProxy = connection.createHubProxy('contosoChatHub');
chatHubProxy.on('addMessageToPage', function (message) {
    console.log(message.UserName + ' ' + message.Message);
});

複合オブジェクトを定義するサーバーコード

public class ContosoChatMessage
{
    public string UserName { get; set; }
    public string Message { get; set; }
}

複合オブジェクトを使用してクライアントメソッドを呼び出すサーバーコード

public void SendMessage(string name, string message)
{
    Clients.All.addContosoChatMessageToPage(new ContosoChatMessage() { UserName = name, Message = message });
}

クライアントからサーバーメソッドを呼び出す方法

クライアントからサーバーメソッドを呼び出すには、生成されたプロキシのプロパティを使用 server するか、生成されたプロキシを invoke 使用していない場合はハブプロキシのメソッドを使用します。戻り値またはパラメーターには、複合オブジェクトを指定できます。

ハブでキャメルケースバージョンのメソッド名を渡します。 SignalR は、JavaScript コードが JavaScript 規則に準拠できるように、この変更を自動的に行います。

次の例では、戻り値を持たないサーバーメソッドを呼び出す方法と、戻り値を持つサーバーメソッドを呼び出す方法を示します。

HubMethodName 属性を持たないサーバーメソッド

public class ContosoChatHub : Hub
{
    public void NewContosoChatMessage(ChatMessage message)
    {
        Clients.All.addContosoChatMessageToPage(message);
    }
}

パラメーターで渡される複雑なオブジェクトを定義するサーバーコード

public class ChatMessage
{
    public string UserName { get; set; }
    public string Message { get; set; }
}

(生成されたプロキシを使用して) サーバーメソッドを呼び出すクライアントコード

contosoChatHubProxy.server.newContosoChatMessage({ UserName: userName, Message: message}).done(function () {
        console.log ('Invocation of NewContosoChatMessage succeeded');
    }).fail(function (error) {
        console.log('Invocation of NewContosoChatMessage failed. Error: ' + error);
    });

サーバーメソッドを呼び出すクライアントコード (生成されたプロキシなし)

contosoChatHubProxy.invoke('newContosoChatMessage', { UserName: userName, Message: message}).done(function () {
        console.log ('Invocation of NewContosoChatMessage succeeded');
    }).fail(function (error) {
        console.log('Invocation of NewContosoChatMessage failed. Error: ' + error);
    });

Hub メソッドを属性で修飾した場合は、大文字と小文字を HubMethodName 変更せずにその名前を使用します。

HubMethodName 属性を持つサーバーメソッド

public class ContosoChatHub : Hub
{
    [HubMethodName("NewContosoChatMessage")]
    public void NewContosoChatMessage(string name, string message)
    {
        Clients.All.addContosoChatMessageToPage(name, message);
    }
}

(生成されたプロキシを使用して) サーバーメソッドを呼び出すクライアントコード

contosoChatHubProxy.server.NewContosoChatMessage(userName, message).done(function () {
        console.log ('Invocation of NewContosoChatMessage succeeded');
    }).fail(function (error) {
        console.log('Invocation of NewContosoChatMessage failed. Error: ' + error);
    });

サーバーメソッドを呼び出すクライアントコード (生成されたプロキシなし)

contosoChatHubProxy.invoke('NewContosoChatMessage', userName, message).done(function () {
        console.log ('Invocation of NewContosoChatMessage succeeded');
    }).fail(function (error) {
        console.log('Invocation of NewContosoChatMessage failed. Error: ' + error);
    });

上記の例では、戻り値のないサーバーメソッドを呼び出す方法を示します。次の例は、戻り値を持つサーバーメソッドを呼び出す方法を示しています。

戻り値を持つメソッドのサーバーコード

public class StockTickerHub : Hub
{
    public IEnumerable<Stock> GetAllStocks()
    {
        return _stockTicker.GetAllStocks();
    }
}

戻り値に使用される Stock クラス

public class Stock
{
    public string Symbol { get; set; }
    public decimal Price { get; set; }
}

(生成されたプロキシを使用して) サーバーメソッドを呼び出すクライアントコード

function init() {
    return stockTickerProxy.server.getAllStocks().done(function (stocks) {
        $.each(stocks, function () {
            var stock = this;
            console.log("Symbol=" + stock.Symbol + " Price=" + stock.Price);
        });
    }).fail(function (error) {
        console.log('Error: ' + error);
    });
}

サーバーメソッドを呼び出すクライアントコード (生成されたプロキシなし)

function init() {
    return stockTickerProxy.invoke('getAllStocks').done(function (stocks) {
        $.each(stocks, function () {
            var stock = this;
            console.log("Symbol=" + stock.Symbol + " Price=" + stock.Price);
        });
    }).fail(function (error) {
        console.log('Error: ' + error);
    });
}

接続の有効期間イベントを処理する方法

SignalR には、処理できる次の接続有効期間イベントが用意されています。

starting: 接続経由でデータが送信される前に発生します。
received: 接続でデータを受信したときに発生します。受信したデータを提供します。
connectionSlow: クライアントが低速または頻繁に接続を削除している場合に発生します。
reconnecting: 基になるトランスポートの再接続が開始されたときに発生します。
reconnected: 基になるトランスポートが再接続されたときに発生します。
stateChanged: 接続状態が変更されたときに発生します。古い状態と新しい状態 (接続、接続、再接続、または切断) を提供します。
disconnected: 接続が切断されたときに発生します。

たとえば、顕著な遅延を引き起こす可能性のある接続の問題があるときに警告メッセージを表示する場合は、イベントを処理します connectionSlow 。

connectionSlow イベントを処理する (生成されたプロキシを使用)

$.connection.hub.connectionSlow(function () {
    console.log('We are currently experiencing difficulties with the connection.')
});

connectionSlow イベントを処理する (生成されたプロキシを使用しない)

var connection = $.hubConnection();
connection.connectionSlow(function () {
    console.log('We are currently experiencing difficulties with the connection.')
});

詳細については、「 SignalR の接続有効期間イベントの概要と処理」を参照してください。

エラーを処理する方法

SignalR JavaScript クライアントには、ハンドラーを error 追加できるイベントが用意されています。 fail メソッドを使用して、サーバーメソッドの呼び出しによって発生するエラーのハンドラーを追加することもできます。

サーバーで詳細なエラーメッセージを明示的に有効にしない場合、エラーの後に SignalR によって返される例外オブジェクトには、エラーに関する最小限の情報が含まれます。たとえば、の newContosoChatMessage 呼び出しが失敗した場合、エラーオブジェクトのエラーメッセージに "" がThere was an error invoking Hub method 'contosoChatHub.newContosoChatMessage'.含まれています。運用環境のクライアントに詳細なエラーメッセージを送信することは、セキュリティ上の理由から推奨されませんが、トラブルシューティングのために詳細なエラーメッセージを有効にする場合は、サーバーで次のコードを使用します。

var hubConfiguration = new HubConfiguration();
hubConfiguration.EnableDetailedErrors = true;
app.MapSignalR(hubConfiguration);

次の例は、エラーイベントのハンドラーを追加する方法を示しています。

エラーハンドラーを追加する (生成されたプロキシを使用)

$.connection.hub.error(function (error) {
    console.log('SignalR error: ' + error)
});

エラーハンドラーを追加する (生成されたプロキシを使用しない)

var connection = $.hubConnection();
connection.error(function (error) {
    console.log('SignalR error: ' + error)
});

次の例は、メソッド呼び出しからエラーを処理する方法を示しています。

メソッド呼び出しからのエラーを処理する (生成されたプロキシを使用)

contosoChatHubProxy.newContosoChatMessage(userName, message)
    .fail(function(error) { 
        console.log( 'newContosoChatMessage error: ' + error) 
    });

メソッド呼び出しからのエラーを処理する (生成されたプロキシを使用しない)

contosoChatHubProxy.invoke('newContosoChatMessage', userName, message)
    .fail(function(error) { 
        console.log( 'newContosoChatMessage error: ' + error) 
    });

メソッドの呼び出しが失敗した error 場合、イベントも発生するため、メソッドハンドラーとメソッドコールバックのコード error が .fail 実行されます。

クライアント側のログ記録を有効にする方法

接続でクライアント側のログ記録を有効にするには、メソッドを logging 呼び出して接続を確立する前に、接続オブジェクトの start プロパティを設定します。

ログ記録を有効にする (生成されたプロキシを使用)

$.connection.hub.logging = true;
$.connection.hub.start();

ログ記録を有効にする (生成されたプロキシを使用しない)

var connection = $.hubConnection();
connection.logging = true;
connection.start();

ログを表示するには、ブラウザーの開発者ツールを開き、[コンソール] タブに移動します。これを行う方法を示す詳細な手順とスクリーンショットを示すチュートリアルについては、「 ASP.NET Signalr を使用したサーバーブロードキャスト - ログ記録を有効にする」を参照してください。

ASP.NET SignalR Hubs API ガイド - JavaScript クライアント

このトピックで使用するソフトウェアのバージョン

このトピックの以前のバージョン

質問とコメント

概要

生成されたプロキシとその機能

生成されたプロキシを使用するタイミング

クライアントのセットアップ

動的に生成されたプロキシを参照する方法

SignalR で生成されたプロキシの物理ファイルを作成する方法

接続を確立する方法

$.connection.hub は$.hubConnection() が作成するオブジェクトと同じです

start メソッドの非同期実行

クロスドメイン接続を確立する方法

UseCors の呼び出し

接続を構成する方法

クエリ文字列パラメーターを指定する方法

トランスポート方法を指定する方法

ハブ クラスのプロキシを取得する方法

サーバーが呼び出すことができるメソッドをクライアントで定義する方法

クライアントからサーバー メソッドを呼び出す方法

接続の有効期間イベントを処理する方法

エラーを処理する方法

クライアント側のログ記録を有効にする方法

フィードバック

フィードバック

その他のリソース

ハブクラスのプロキシを取得する方法

クライアントからサーバーメソッドを呼び出す方法