SignalR 1.x ハブ API ガイド - JavaScript クライアント
作成者: Patrick Fletcher、Tom Dykstra
警告
このドキュメントは、SignalR の最新バージョン用ではありません。 SignalR の ASP.NET Coreを見てみましょう。
このドキュメントでは、ブラウザーや Windows ストア (WinJS) アプリケーションなどの JavaScript クライアントで SignalR バージョン 1.1 用の Hubs API を使用する方法について説明します。
SignalR Hubs API を使用すると、サーバーから接続されたクライアント、およびクライアントからサーバーへのリモート プロシージャ コール (RPC) を実行できます。 サーバー コードでは、クライアントが呼び出すことができるメソッドを定義し、クライアントで実行されるメソッドを呼び出します。 クライアント コードでは、サーバーから呼び出すことができるメソッドを定義し、サーバーで実行されるメソッドを呼び出します。 SignalR は、クライアントからサーバーへのすべての配管を処理します。
SignalR には、永続的な接続と呼ばれる下位レベルの API も用意されています。 SignalR、Hubs、および永続的な接続の概要、または完全な SignalR アプリケーションを構築する方法を示すチュートリアルについては、「SignalR - はじめに」を参照してください。
概要
このドキュメントは、次のトピックに分かれています。
サーバーまたは .NET クライアントをプログラムする方法のドキュメントについては、次のリソースを参照してください。
API リファレンス トピックへのリンクは、API の .NET 4.5 バージョンに関するページです。 .NET 4 を使用している場合は、 .NET 4 バージョンの API トピックを参照してください。
生成されたプロキシとその動作
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.6.4.min.js"></script>
<script src="Scripts/jquery.signalR-1.0.1.min.js"></script>
<script src="signalr/hubs"></script>
これらの参照は、jQuery first、その後の SignalR コア、SignalR プロキシの最後の順に含める必要があります。
動的に生成されたプロキシを参照する方法
前の例では、SignalR で生成されたプロキシへの参照は、物理ファイルではなく、動的に生成された JavaScript コードです。 SignalR はプロキシの JavaScript コードを即座に作成し、"/signalr/hubs" URL に応答してクライアントに提供します。 メソッドで MapHubs
サーバー上の SignalR 接続に別のベース URL を指定した場合、動的に生成されるプロキシ ファイルの URL は、"/hubs" が追加されたカスタム URL です。
Note
Windows 8 (Windows ストア) JavaScript クライアントの場合は、動的に生成されるプロキシ ファイルではなく、物理プロキシ ファイルを使用します。 詳細については、このトピックで後述 する「SignalR で生成されたプロキシの物理ファイルを作成する方法 」を参照してください。
ASP.NET MVC 4 Razor ビューで、チルダを使用して、プロキシ ファイル参照のアプリケーション ルートを参照します。
<script src="~/signalr/hubs"></script>
MVC 4 での SignalR の使用の詳細については、「SignalR と MVC 4 を使用したはじめに」を参照してください。
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 サイトの「Visual Studio for ASP.NET Web プロジェクトの Web サーバーでのRoot-Levelリソースへの参照の解決」を参照してください。
Visual Studio 2012 でデバッグ モードで Web プロジェクトを実行し、ブラウザーとしてインターネット エクスプローラーを使用している場合は、次の図に示すように、[スクリプト ドキュメント] のソリューション エクスプローラーにプロキシ ファイルを表示できます。
ファイルの内容を表示するには、 ハブをダブルクリックします。 Visual Studio 2012 とインターネット エクスプローラーを使用していない場合、またはデバッグ モードでない場合は、"/signalR/hubs" URL を参照してファイルの内容を取得することもできます。 たとえば、サイトが で http://localhost:56699
実行されている場合は、ブラウザーで に http://localhost:56699/SignalR/hubs
移動します。
SignalR で生成されたプロキシの物理ファイルを作成する方法
動的に生成されたプロキシの代わりに、プロキシ コードを持ち、そのファイルを参照する物理ファイルを作成できます。 キャッシュまたはバンドルの動作を制御したり、サーバー メソッドの呼び出しをコーディングするときに IntelliSense を取得したりすることもできます。
プロキシ ファイルを作成するには、次の手順を実行します。
Microsoft.AspNet.SignalR.Utils NuGet パッケージをインストールします。
コマンド プロンプトを開き、SignalR.exe ファイルを含む ツール フォルダーを参照します。 ツール フォルダーは次の場所にあります。
[your solution folder]\packages\Microsoft.AspNet.SignalR.Utils.1.0.1\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」を参照してください。
Note
通常は、 メソッドを呼び出して接続を確立する前に start
、イベント ハンドラーを登録します。 接続の確立後にいくつかのイベント ハンドラーを登録する場合は、それを行うことができますが、メソッドを呼び出す前に、少なくとも 1 つのイベント ハンドラーを登録する start
必要があります。 その理由の 1 つは、アプリケーションに多数のハブが存在する可能性があるが、そのうちの 1 つに対してのみ使用する場合は、すべてのハブでイベントをトリガー OnConnected
したくないということです。 接続が確立されると、ハブのプロキシにクライアント メソッドが存在することが、SignalR にイベントをトリガー OnConnected
するように指示します。 メソッドを呼び出す前にイベント ハンドラーを start
登録しない場合は、ハブでメソッドを呼び出すことができますが、ハブの OnConnected
メソッドは呼び出されないため、サーバーからクライアント メソッドは呼び出されません。
$.connection.hub は$.hubConnection() が作成するオブジェクトと同じです
例からわかるように、生成されたプロキシを使用すると、 $.connection.hub
は接続オブジェクトを参照します。 これは、生成されたプロキシを使用していないときに を呼び出 $.hubConnection()
すことで取得するオブジェクトと同じです。 生成されたプロキシ コードは、次のステートメントを実行して接続を作成します。
生成されたプロキシを使用している場合は、生成されたプロキシを使用していない場合に接続オブジェクトでできることは何でも $.connection.hub
できます。
start メソッドの非同期実行
メソッドは start
非同期的に実行されます。 jQuery Deferred オブジェクトが返されます。つまり、 などのpipe
done
メソッドを呼び出すことでコールバック関数をfail
追加できます。 サーバー メソッドの呼び出しなど、接続が確立された後に実行するコードがある場合は、そのコードをコールバック関数に配置するか、コールバック関数から呼び出します。 .done
コールバック メソッドは、接続が確立された後、およびサーバー上のイベント ハンドラー メソッドにあるOnConnected
コードの実行が完了した後に実行されます。
(コールバックconsole.log
ではなく.done
) メソッド呼び出しの後start
に、前の例の "Now connected" ステートメントを次のコード行として配置すると、次の例に示すように、接続が確立される前に行が実行されます。
クロスドメイン接続を確立する方法
通常、ブラウザーが から http://contoso.com
ページを読み込む場合、SignalR 接続は の同じドメインにあります http://contoso.com/signalr
。 のページ http://contoso.com
が への http://fabrikam.com/signalr
接続を確立する場合、これはクロスドメイン接続です。 セキュリティ上の理由から、クロスドメイン接続は既定で無効になっています。 クロスドメイン接続を確立するには、サーバーでクロスドメイン接続が有効になっていることを確認し、接続オブジェクトの作成時に接続 URL を指定します。 SignalR は、 JSONP や CORS などのクロスドメイン接続に適切なテクノロジを使用します。
サーバーで、 メソッドを呼び出すときにそのオプションを選択して、クロスドメイン接続を MapHubs
有効にします。
var hubConfiguration = new HubConfiguration();
hubConfiguration.EnableCrossDomain = true;
RouteTable.Routes.MapHubs(hubConfiguration);
クライアントで、(生成されたプロキシを使用せずに) 接続オブジェクトを作成するとき、または開始メソッド (生成されたプロキシを使用して) を呼び出す前に、URL を指定します。
クロスドメイン接続を指定するクライアント コード (生成されたプロキシを使用)
$.connection.hub.url = 'http://fabrikam.com/signalr'
$.connection.hub.start().done(init);
クロスドメイン接続を指定するクライアント コード (生成されたプロキシなし)
var connection = $.hubConnection('http://fabrikam.com/');
コンストラクターを$.hubConnection
使用する場合は、 として指定useDefaultUrl
false
しない限り、自動的に追加されるため、URL に を含めるsignalr
必要はありません。
異なるエンドポイントへの複数の接続を作成できます。
var connection1 = $.hubConnection('http://contoso.com/');
var connection2 = $.hubConnection('http://fabrikam.com/');
Note
コードで true に設定
jQuery.support.cors
しないでください。SignalR は、JSONP または 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;
RouteTable.Routes.MapHubs(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 を使用したサーバー ブロードキャスト - ログ記録を有効にする」を参照してください。
フィードバック
https://aka.ms/ContentUserFeedback」を参照してください。
以下は間もなく提供いたします。2024 年を通じて、コンテンツのフィードバック メカニズムとして GitHub の issue を段階的に廃止し、新しいフィードバック システムに置き換えます。 詳細については、「フィードバックの送信と表示