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

Warning

このドキュメントは SignalR の最新バージョンはありません。This documentation isn't for the latest version of SignalR. 見てASP.NET Core SignalRします。Take a look at ASP.NET Core SignalR.

このドキュメントでは、ブラウザーや Windows ストア (WinJS) アプリケーションなど、JavaScript クライアントで、バージョン 2 の SignalR ハブ API を使用するように紹介します。This document provides an introduction to using the Hubs API for SignalR version 2 in JavaScript clients, such as browsers and Windows Store (WinJS) applications.

SignalR ハブの API では、サーバーからに接続されているクライアントとサーバーのクライアントからのリモート プロシージャ コール (Rpc) を作成することができます。The SignalR Hubs API enables you to make remote procedure calls (RPCs) from a server to connected clients and from clients to the server. サーバー コードで、クライアントから呼び出すことができるメソッドを定義して、クライアント上で実行されるメソッドを呼び出します。In server code, you define methods that can be called by clients, and you call methods that run on the client. クライアント コードで、サーバーから呼び出すことができるメソッドを定義して、サーバー上で実行されるメソッドを呼び出します。In client code, you define methods that can be called from the server, and you call methods that run on the server. SignalR は、のすべてのクライアントとサーバーが処理されます。SignalR takes care of all of the client-to-server plumbing for you.

SignalR では、永続的な接続と呼ばれる下位レベル API も提供します。SignalR also offers a lower-level API called Persistent Connections. SignalR、ハブ、および永続的な接続の概要については、次を参照してください。 SignalR 入門します。For an introduction to SignalR, Hubs, and Persistent Connections, see Introduction to SignalR.

このトピックで使用されるソフトウェアのバージョンSoftware versions used in this topic

このトピックの以前のバージョンPrevious versions of this topic

SignalR の以前のバージョンについては、次を参照してください。以前のバージョンの SignalRします。For information about earlier versions of SignalR, see SignalR Older Versions.

意見やご質問Questions and comments

このチュートリアルの良い点に関するフィードバックや、ページ下部にあるコメントで改善できる点をお知らせください。Please leave feedback on how you liked this tutorial and what we could improve in the comments at the bottom of the page. チュートリアルに直接関係のない質問がある場合は、ASP.NET SignalR フォーラムまたはStackOverflow.comにて投稿してください。If you have questions that are not directly related to the tutorial, you can post them to the ASP.NET SignalR forum or StackOverflow.com.

概要Overview

このドキュメントは、次のトピックに分かれています。This document contains the following sections:

サーバーや .NET クライアントをプログラミングする方法に関するドキュメントについては、次のリソースを参照してください。For documentation on how to program the server or .NET clients, see the following resources:

SignalR 2 のサーバー コンポーネントを .NET 4.5 でできるは、(.NET 4.0 で SignalR 2 の .NET クライアントがある) 場合だけです。The SignalR 2 server component is only available on .NET 4.5 (though there is a .NET client for SignalR 2 on .NET 4.0).

生成されたプロキシとは何をします。The generated proxy and what it does for you

SignalR で生成されるプロキシの有無は、SignalR サービスと通信する JavaScript クライアントをプログラミングできます。You can program a JavaScript client to communicate with a SignalR service with or without a proxy that SignalR generates for you. プロキシが何は、接続、サーバーを呼び出すと、書き込みメソッドを使用して、サーバーでメソッドを呼び出すコードの構文を簡略化します。What the proxy does for you is simplify the syntax of the code you use to connect, write methods that the server calls, and call methods on the server.

サーバー メソッドを呼び出すコードを記述する場合、生成されたプロキシを使用すると、次のローカル関数を実行した場合と同様の構文を使用: 書き込めるserverMethod(arg1, arg2)の代わりにinvoke('serverMethod', arg1, arg2)します。When you write code to call server methods, the generated proxy enables you to use syntax that looks as though you were executing a local function: you can write serverMethod(arg1, arg2) instead of invoke('serverMethod', arg1, arg2). 生成されたプロキシ構文では、サーバーのメソッド名を入力し間違えた場合は、イミディ エイト ウィンドウと判読クライアント側のエラーもできます。The generated proxy syntax also enables an immediate and intelligible client-side error if you mistype a server method name. サーバーのメソッドを呼び出すコードを記述するため、IntelliSense のサポートも取得できます、プロキシを定義するファイルを手動で作成する場合。And if you manually create the file that defines the proxies, you can also get IntelliSense support for writing code that calls server methods.

たとえば、次のようなハブ クラスをサーバー上にあるとします。For example, suppose you have the following Hub class on the server:

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

などを呼び出すための JavaScript コードは次のコード例を表示する、NewContosoChatMessageサーバーとの呼び出しを受信するメソッド、addContosoChatMessageToPageサーバーからのメソッド。The following code examples show what JavaScript code looks like for invoking the NewContosoChatMessage method on the server and receiving invocations of the addContosoChatMessageToPage method from the server.

生成されたプロキシを使用しました。With the generated proxy

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

生成されたプロキシを使用せずWithout the generated proxy

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

生成されたプロキシを使用する場合When to use the generated proxy

サーバーを呼び出すクライアント メソッドの複数のイベント ハンドラーを登録する場合は、生成されたプロキシを使用できません。If you want to register multiple event handlers for a client method that the server calls, you can't use the generated proxy. それ以外の場合、生成されたプロキシを使用することができますか、コーディングの基本設定に基づいていません。Otherwise, you can choose to use the generated proxy or not based on your coding preference. これを使用しないように選択した場合は、「signalr ハブ」の URL を参照する必要はありません、scriptクライアント コード内の要素。If you choose not to use it, you don't have to reference the "signalr/hubs" URL in a script element in your client code.

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

JavaScript クライアントでは、jQuery、および SignalR core の JavaScript ファイルへの参照が必要です。A JavaScript client requires references to jQuery and the SignalR core JavaScript file. JQuery バージョンは、1.6.4 または 1.7.2、1.8.2、1.9.1 など、主要な以降のバージョンである必要があります。The jQuery version must be 1.6.4 or major later versions, such as 1.7.2, 1.8.2, or 1.9.1. 生成されたプロキシを使用する場合は、SignalR が生成されたプロキシの JavaScript ファイルへの参照を必要もあります。If you decide to use the generated proxy, you also need a reference to the SignalR generated proxy JavaScript file. 次の例では、生成されたプロキシを使用して HTML ページに表示される参照を示します。The following example shows what the references might look like in an HTML page that uses the generated proxy.

<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 最初に、その後、SignalR core と SignalR プロキシが最後です。These references must be included in this order: jQuery first, SignalR core after that, and SignalR proxies last.

動的に生成されたプロキシを参照する方法How to reference the dynamically generated proxy

前の例では、SignalR が生成されたプロキシへの参照は、物理ファイルが、動的に生成された JavaScript コードが。In the preceding example, the reference to the SignalR generated proxy is to dynamically generated JavaScript code, not to a physical file. SignalR では、その場でプロキシの JavaScript コードを作成し、それを「/signalr ハブ」URL への応答でクライアントに提供します。SignalR creates the JavaScript code for the proxy on the fly and serves it to the client in response to the "/signalr/hubs" URL. サーバーでは、SignalR 接続の場合は、さまざまなベース URL を指定したかどうか、MapSignalRメソッドを動的に生成されるプロキシ ファイルの URL は、カスタムの URL に"/ハブ"が追加されます。If you specified a different base URL for SignalR connections on the server in your MapSignalR method, the URL for the dynamically generated proxy file is your custom URL with "/hubs" appended to it.

Note

Windows 8 (Windows ストア) JavaScript クライアントは、動的に生成されたものではなく、物理プロキシ ファイルを使用します。For Windows 8 (Windows Store) JavaScript clients, use the physical proxy file instead of the dynamically generated one. 詳細については、次を参照してください。 SignalR の物理ファイルを作成する方法は、プロキシを生成このトピックで後述します。For more information, see How to create a physical file for the SignalR generated proxy later in this topic.

ASP.NET MVC 4 または 5 の Razor ビューでは、チルダを使用して、アプリケーション ルートに、プロキシ ファイルのリファレンスを参照してください。In an ASP.NET MVC 4 or 5 Razor view, use the tilde to refer to the application root in your proxy file reference:

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

MVC 5 で SignalR を使用する方法の詳細については、次を参照してください。 SignalR と MVC 5 の概要します。For more information about using SignalR in MVC 5, see Getting Started with SignalR and MVC 5.

ASP.NET MVC 3 Razor ビューで使用してUrl.Contentファイル参照用プロキシに。In an ASP.NET MVC 3 Razor view, use Url.Content for your proxy file reference:

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

ASP.NET Web フォーム アプリケーションで使用ResolveClientUrlプロキシ ファイルの参照または (ティルダ以降)、アプリケーション ルートの相対パスを使用して、scriptmanager コントロールを使用して登録します。In an ASP.NET Web Forms application, use ResolveClientUrl for your proxies file reference or register it via the ScriptManager using an app root relative path (starting with a tilde):

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

一般的な規則としては、CSS または JavaScript ファイルを使用する「/signalr ハブ」の URL を指定するため、同じメソッドを使用します。As a general rule, use the same method for specifying the "/signalr/hubs" URL that you use for CSS or JavaScript files. URL を指定するには、チルダを使用せず、一部のシナリオで、アプリケーションは正しく動作 IIS Express を使用して Visual Studio でのテストが完全な IIS に展開するときは、404 エラーで失敗する際にします。If you specify a URL without using a tilde, in some scenarios your application will work correctly when you test in Visual Studio using IIS Express but will fail with a 404 error when you deploy to full IIS. 詳細については、次を参照してください。ルート レベルのリソースへの参照を解決するASP.NET Web プロジェクト用の Visual Studio で Web サーバー MSDN サイト。For more information, see Resolving References to Root-Level Resources in Web Servers in Visual Studio for ASP.NET Web Projects on the MSDN site.

Visual Studio 2017 でデバッグ モードで web プロジェクトを実行すると、お使いのブラウザーとして Internet Explorer を使用する場合は、プロキシ ファイルを確認できますソリューション エクスプ ローラー スクリプトします。When you run a web project in Visual Studio 2017 in debug mode, and if you use Internet Explorer as your browser, you can see the proxy file in Solution Explorer under Scripts.

ファイルの内容を表示するをダブルクリックしてhubsします。To see the contents of the file, double-click hubs. Visual Studio 2012 または 2013 および Internet Explorer で使用しない場合、またはデバッグ モードでない場合は、「/signalR ハブ」の URL を参照してファイルの内容を取得することもできます。If you are not using Visual Studio 2012 or 2013 and Internet Explorer, or if you are not in debug mode, you can also get the contents of the file by browsing to the "/signalR/hubs" URL. サイトが実行されている場合などhttp://localhost:56699に移動して、http://localhost:56699/SignalR/hubsお使いのブラウザーでします。For example, if your site is running at http://localhost:56699, go to http://localhost:56699/SignalR/hubs in your browser.

生成されたプロキシの SignalR の物理ファイルを作成する方法How to create a physical file for the SignalR generated proxy

動的に生成されたプロキシを代わりは、プロキシ コードを含む物理ファイルを作成し、そのファイルを参照します。As an alternative to the dynamically generated proxy, you can create a physical file that has the proxy code and reference that file. そのためにキャッシュまたはバンドルの動作を制御する場合またはサーバー メソッドの呼び出しをコーディングするときに、IntelliSense を取得することができます。You might want to do that for control over caching or bundling behavior, or to get IntelliSense when you are coding calls to server methods.

プロキシ ファイルを作成するには、次の手順を実行します。To create a proxy file, perform the following steps:

  1. インストール、 Microsoft.AspNet.SignalR.Utils NuGet パッケージ。Install the Microsoft.AspNet.SignalR.Utils NuGet package.

  2. コマンド プロンプトを開きを参照、ツールSignalR.exe ファイルを含むフォルダー。Open a command prompt and browse to the tools folder that contains the SignalR.exe file. [ツール] フォルダーは、次の場所には。The tools folder is at the following location:

    [your solution folder]\packages\Microsoft.AspNet.SignalR.Utils.2.1.0\tools

  3. 次のコマンドを入力します。Enter the following command:

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

    パス、 .dllは通常、 binプロジェクト フォルダー内のフォルダー。The path to your .dll is typically the bin folder in your project folder.

    このコマンドは、という名前のファイルを作成します。 server.jsと同じフォルダーにsignalr.exeします。This command creates a file named server.js in the same folder as signalr.exe.

  4. 配置、 server.jsプロジェクトの適切なフォルダーにファイル、アプリケーションの適切な名前を変更および「signalr ハブ」参照の代わりにへの参照を追加します。Put the server.js file in an appropriate folder in your project, rename it as appropriate for your application, and add a reference to it in place of the "signalr/hubs" reference.

接続を確立する方法How to establish a connection

接続を確立する前に、接続オブジェクトを作成、プロキシを作成し、サーバーから呼び出すことができるメソッドのイベント ハンドラーを登録する必要があります。Before you can establish a connection, you have to create a connection object, create a proxy, and register event handlers for methods that can be called from the server. プロキシとイベント ハンドラーが設定されているときに呼び出すことによって、接続の確立、startメソッド。When the proxy and event handlers are set up, establish the connection by calling the start method.

生成されたプロキシを使用している場合は、生成されたプロキシ コードによって処理されるため、独自のコードで接続オブジェクトを作成する必要はありません。If you are using the generated proxy, you don't have to create the connection object in your own code because the generated proxy code does it for you.

(生成されたプロキシ) との接続を確立します。Establish a connection (with the generated proxy)

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

(なし、生成されたプロキシ) の接続を確立します。Establish a connection (without the generated proxy)

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"SignalR サービスに接続するための URL。The sample code uses the default "/signalr" URL to connect to your SignalR service. 別の基本 URL を指定する方法については、次を参照してください。 ASP.NET SignalR ハブ API ガイド - サーバー -/signalr URLします。For information about how to specify a different base URL, see ASP.NET SignalR Hubs API Guide - Server - The /signalr URL.

既定では、ハブの場所には、現在のサーバー別のサーバーに接続する場合は、呼び出す前に URL を指定、startメソッドを次の例に示すようにします。By default, the hub location is the current server; if you are connecting to a different server, specify the URL before calling the start method, as shown in the following example:

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

Note

呼び出しの前にイベント ハンドラーを登録する通常、startメソッドは、接続を確立します。Normally you register event handlers before calling the start method to establish the connection. 接続の確立後にいくつかのイベント ハンドラーを登録すると、それを行うことができますが、少なくとも 1 つの呼び出しの前に、イベントを負いますを登録する必要があります、startメソッド。If you want to register some event handlers after establishing the connection, you can do that, but you must register at least one of your event handler(s) before calling the start method. この理由の 1 つがあります多くのハブ アプリケーションをトリガーする必要はありませんが、OnConnectedうち 1 つを使用しようとするのみの場合は、すべてハブのイベント。One reason for this is that there can be many Hubs in an application, but you wouldn't want to trigger the OnConnected event on every Hub if you are only going to use to one of them. ハブのプロキシのクライアント メソッドの存在では、SignalR をトリガーするコードを指定は、接続が確立されたときに、OnConnectedイベント。When the connection is established, the presence of a client method on a Hub's proxy is what tells SignalR to trigger the OnConnected event. 呼び出しの前に、イベント ハンドラーを登録しない場合、startメソッド、ことができます、ハブはハブのメソッドを呼び出すOnConnectedメソッドは呼び出されません、サーバーからクライアントのメソッドは呼び出されません。If you don't register any event handlers before calling the start method, you will be able to invoke methods on the Hub, but the Hub's OnConnected method won't be called and no client methods will be invoked from the server.

$connection.hub が同じオブジェクトのその $.hubConnection() を作成します。$.connection.hub is the same object that $.hubConnection() creates

生成されたプロキシを使用する場合の例では、ご覧のとおり$.connection.hub接続オブジェクトを参照します。As you can see from the examples, when you use the generated proxy, $.connection.hub refers to the connection object. これは、同じオブジェクトを呼び出して取得する$.hubConnection()生成されたプロキシを使用していない場合。This is the same object that you get by calling $.hubConnection() when you aren't using the generated proxy. 生成されたプロキシ コードは、次のステートメントを実行することによって自動的に接続を作成します。The generated proxy code creates the connection for you by executing the following statement:

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

生成されたプロキシを使用しているときに操作を実行すると$.connection.hub生成されたプロキシを使用していないときに、接続オブジェクトで実行できます。When you're using the generated proxy, you can do anything with $.connection.hub that you can do with a connection object when you're not using the generated proxy.

Start メソッドの非同期実行Asynchronous execution of the start method

startメソッドを非同期的に実行します。The start method executes asynchronously. 返します、 jQuery 遅延オブジェクトなどのメソッドを呼び出すことによってコールバック関数を追加するには、つまりpipedonefailします。It returns a jQuery Deferred object, which means that you can add callback functions by calling methods such as pipe, done, and fail. 接続が確立された後に実行するコードがあればなど、サーバー メソッドへの呼び出し、コールバック関数でそのコードを配置またはコールバック関数から呼び出すことです。If you have code that you want to execute after the connection is established, such as a call to a server method, put that code in a callback function or call it from a callback function. .done接続が確立されているしにあるいずれかのコードを後でコールバック メソッドが実行される、OnConnectedサーバー上のイベント ハンドラー メソッドの実行が終了します。The .done callback method is executed after the connection has been established, and after any code that you have in your OnConnected event handler method on the server finishes executing.

後のコードの次の行として前の例の「接続されているようになりました」ステートメントを配置した場合、startメソッドの呼び出し (ではなく、.doneコールバック)、console.log行は、接続が確立される前に、次に示すように、実行されます例:If you put the "Now connected" statement from the preceding example as the next line of code after the start method call (not in a .done callback), the console.log line will execute before the connection is established, as shown in the following example:

接続が確立された後に実行されるコードを記述する方法を正しくないです。

ドメイン間の接続を確立する方法How to establish a cross-domain connection

通常、ブラウザーがからページを読み込む場合http://contoso.com、SignalR 接続が同じドメイン内ではhttp://contoso.com/signalrします。Typically if the browser loads a page from http://contoso.com, the SignalR connection is in the same domain, at http://contoso.com/signalr. 場合、ページからhttp://contoso.comへの接続は、http://fabrikam.com/signalrドメイン間の接続されています。If the page from http://contoso.com makes a connection to http://fabrikam.com/signalr, that is a cross-domain connection. セキュリティ上の理由から、ドメイン間の接続が既定で無効になります。For security reasons, cross-domain connections are disabled by default.

SignalR では 1.x では、クロス ドメイン要求が 1 つの EnableCrossDomain フラグによって制御されます。In SignalR 1.x, cross domain requests were controlled by a single EnableCrossDomain flag. このフラグ JSONP と CORS の両方の要求を制御します。This flag controlled both JSONP and CORS requests. すべての CORS をサポートする柔軟性を高め、SignalR のサーバー コンポーネントから削除されました (JavaScript クライアントも CORS 通常、ブラウザーがサポートすることが検出された場合) を使用し、新しい OWIN ミドルウェアをこれらのシナリオをサポートするために使用しました。For greater flexibility, all CORS support has been removed from the server component of SignalR (JavaScript clients still use CORS normally if it is detected that the browser supports it), and new OWIN middleware has been made available to support these scenarios.

設定を明示的に有効にする必要があります (古いブラウザーでは、クロス ドメイン要求をサポート) をクライアントで JSONP が必要な場合EnableJSONPで、HubConfigurationオブジェクトをtrue以下に示すようにします。If JSONP is required on the client (to support cross-domain requests in older browsers), it will need to be enabled explicitly by setting EnableJSONP on the HubConfiguration object to true, as shown below. CORS より安全であるために、既定では、JSONP が無効です。JSONP is disabled by default, as it is less secure than CORS.

Microsoft.Owin.Cors をプロジェクトに追加します。 このライブラリをインストールするには、パッケージ マネージャー コンソールで、次のコマンドを実行します。Adding Microsoft.Owin.Cors to your project: To install this library, run the following command in the Package Manager Console:

Install-Package Microsoft.Owin.Cors

このコマンドは、2.1.0 を追加、プロジェクトにパッケージのバージョン。This command will add the 2.1.0 version of the package to your project.

UseCors を呼び出すCalling UseCors

次のコード スニペットでは、SignalR 2 のドメイン間の接続を実装する方法を示します。The following code snippet demonstrates how to implement cross-domain connections in SignalR 2.

SignalR 2 のクロス ドメイン要求を実装します。Implementing cross-domain requests in SignalR 2

次のコードでは、SignalR 2 のプロジェクトで CORS または JSONP を有効にする方法を示します。The following code demonstrates how to enable CORS or JSONP in a SignalR 2 project. このコード サンプルを使用してMapRunSignalRの代わりにMapSignalR、CORS ミドルウェアは、CORS のサポートを必要とする SignalR 要求に対してのみが実行されるように、(で指定されたパスにすべてのトラフィックではなくMapSignalR)。マップは、アプリケーション全体に対してではなく、特定の URL プレフィックスでは、実行する必要があるその他のミドルウェアのこともできます。This code sample uses Map and RunSignalR instead of MapSignalR, so that the CORS middleware runs only for the SignalR requests that require CORS support (rather than for all traffic at the path specified in MapSignalR.) Map can also be used for any other middleware that needs to run for a specific URL prefix, rather than for the entire application.

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

  • 設定しないjQuery.support.corsコードで true に設定します。Don't set jQuery.support.cors to true in your code.

    JQuery.support.cors を true に設定しないでください。

    SignalR では、CORS の使用を処理します。SignalR handles the use of CORS. 設定jQuery.support.corsに SignalR、ブラウザーは、CORS をサポートするいると仮定する原因になるので true JSONP を無効にします。Setting jQuery.support.cors to true disables JSONP because it causes SignalR to assume the browser supports CORS.

  • に localhost の URL に接続するときに Internet Explorer 10 は見なされませんが、ドメイン間の接続を、アプリケーションは、ローカルで IE 10 サーバー上のドメイン間の接続を有効にしていない場合でも、。When you're connecting to a localhost URL, Internet Explorer 10 won't consider it a cross-domain connection, so the application will work locally with IE 10 even if you haven't enabled cross-domain connections on the server.

  • Internet Explorer 9 を使用したドメイン間の接続方法の詳細については、次を参照してください。この StackOverflow スレッドします。For information about using cross-domain connections with Internet Explorer 9, see this StackOverflow thread.

  • Chrome を使用したドメイン間の接続方法の詳細については、次を参照してください。この StackOverflow スレッドします。For information about using cross-domain connections with Chrome, see this StackOverflow thread.

  • サンプル コードは、既定値を使用して"/signalr"SignalR サービスに接続するための URL。The sample code uses the default "/signalr" URL to connect to your SignalR service. 別の基本 URL を指定する方法については、次を参照してください。 ASP.NET SignalR ハブ API ガイド - サーバー -/signalr URLします。For information about how to specify a different base URL, see ASP.NET SignalR Hubs API Guide - Server - The /signalr URL.

接続を構成する方法How to configure the connection

接続を確立する前に、クエリ文字列パラメーターを指定またはトランスポート メソッドを指定できます。Before you establish a connection, you can specify query string parameters or specify the transport method.

クエリ文字列パラメーターを指定する方法How to specify query string parameters

クライアントが接続するときに、サーバーにデータを送信する場合は、接続オブジェクトをクエリ文字列パラメーターを追加できます。If you want to send data to the server when the client connects, you can add query string parameters to the connection object. 次の例では、クライアント コードで、クエリ文字列パラメーターを設定する方法を示します。The following examples show how to set a query string parameter in client code.

(生成されたプロキシ) を使用して start メソッドを呼び出す前に、クエリ文字列値を設定します。Set a query string value before calling the start method (with the generated proxy)

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

(生成されたプロキシ) なしの start メソッドを呼び出す前に、クエリ文字列値を設定します。Set a query string value before calling the start method (without the generated proxy)

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

次の例では、サーバー コードでクエリ文字列パラメーターを読み取る方法を示します。The following example shows how to read a query string parameter in server code.

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

トランスポート メソッドを指定する方法How to specify the transport method

接続するプロセスの一環として、SignalR クライアントは、通常サーバーとクライアントの両方でサポートされている最適なトランスポートを決定する、サーバーとネゴシエートします。As part of the process of connecting, a SignalR client normally negotiates with the server to determine the best transport that is supported by both server and client. 呼び出すときに、トランスポート メソッドを指定することによってこのネゴシエーション プロセスをバイパスするには使用するトランスポートを既に知っている場合、startメソッド。If you already know which transport you want to use, you can bypass this negotiation process by specifying the transport method when you call the start method.

クライアント コード (生成されたプロキシ) を使用したトランスポート メソッドを指定します。Client code that specifies the transport method (with the generated proxy)

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

クライアント コード (せずに、生成されたプロキシ) トランスポート メソッドを指定します。Client code that specifies the transport method (without the generated proxy)

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

代わりに、SignalR を試したい順序で複数のトランスポート メソッドを指定できます。As an alternative, you can specify multiple transport methods in the order in which you want SignalR to try them:

クライアント コード (生成されたプロキシ) を使用したカスタム トランスポート フォールバック スキームを指定します。Client code that specifies a custom transport fallback scheme (with the generated proxy)

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

カスタム トランスポート フォールバック スキーム (なし、生成されたプロキシ) を指定するクライアント コードClient code that specifies a custom transport fallback scheme (without the generated proxy)

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

トランスポート メソッドを指定するため、次の値を使用できます。You can use the following values for specifying the transport method:

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

次の例では、どのトランスポート メソッドは、接続で使用されていることを見つける方法を示します。The following examples show how to find out which transport method is being used by a connection.

クライアント コード (生成されたプロキシ) との接続で使用されるトランスポート メソッドを表示します。Client code that displays the transport method used by a connection (with the generated proxy)

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

クライアント コード (せずに、生成されたプロキシ) の接続で使用されるトランスポート メソッドを表示します。Client code that displays the transport method used by a connection (without the generated proxy)

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

サーバー コードでの転送方法を確認する方法については、次を参照してください。 ASP.NET SignalR ハブ API ガイド - サーバーのコンテキスト プロパティからのクライアントに関する情報を取得する方法します。For information about how to check the transport method in server code, see ASP.NET SignalR Hubs API Guide - Server - How to get information about the client from the Context property. トランスポートとフォールバックの詳細については、次を参照してください。 SignalR のトランスポートとフォールバックの概要します。For more information about transports and fallbacks, see Introduction to SignalR - Transports and Fallbacks.

ハブ クラスのプロキシを取得する方法How to get a proxy for a Hub class

各接続オブジェクトを作成するには、1 つまたは複数のハブ クラスを含む SignalR サービスへの接続に関する情報がカプセル化します。Each connection object that you create encapsulates information about a connection to a SignalR service that contains one or more Hub classes. ハブ クラスを通信するには、(この場合、生成されたプロキシを使用していない) 自分で作成または生成するプロキシ オブジェクトを使用します。To communicate with a Hub class, you use a proxy object which you create yourself (if you're not using the generated proxy) or which is generated for you.

クライアントでは、プロキシの名前は、ハブ クラス名の camel 形式のバージョンです。On the client the proxy name is a camel-cased version of the Hub class name. SignalR では、JavaScript コードは、JavaScript の規則に従うことができるように、この変更が自動的に作成します。SignalR automatically makes this change so that JavaScript code can conform to JavaScript conventions.

サーバー上のハブ クラスHub class on server

public class ContosoChatHub : Hub

ハブの生成されたクライアント プロキシへの参照を取得します。Get a reference to the generated client proxy for the Hub

var myHubProxy = $.connection.contosoChatHub

生成されたプロキシ) を含めず、ハブ クラス用のクライアント プロキシを作成します。Create client proxy for the Hub class (without generated proxy)

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

使用してハブ クラスを修飾する場合、HubName属性、ケースを変更することがなく正確な名前を使用します。If you decorate your Hub class with a HubName attribute, use the exact name without changing case.

HubName 属性を持つサーバー上のハブ クラスHub class on server with HubName attribute

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

ハブの生成されたクライアント プロキシへの参照を取得します。Get a reference to the generated client proxy for the Hub

var contosoChatHubProxy = $.connection.ContosoChatHub

生成されたプロキシ) を含めず、ハブ クラス用のクライアント プロキシを作成します。Create client proxy for the Hub class (without generated proxy)

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

サーバーが呼び出すことができるクライアントでメソッドを定義する方法How to define methods on the client that the server can call

サーバーはハブから呼び出すことができるメソッドを定義するを使用してハブ プロキシにイベント ハンドラーを追加します。、 client 、生成されたプロキシ、または呼び出しのプロパティ、onメソッド、生成されたプロキシを使用していない場合。To define a method that the server can call from a Hub, add an event handler to the Hub proxy by using the client property of the generated proxy, or call the on method if you aren't using the generated proxy. パラメーターには、複雑なオブジェクトを指定できます。The parameters can be complex objects.

呼び出す前に、イベント ハンドラーを追加、startメソッドは、接続を確立します。Add the event handler before you call the start method to establish the connection. (呼び出した後のイベント ハンドラーを追加する場合、startメソッドの注を参照してください接続を確立する方法この前のドキュメントし、生成されたプロキシを使用せず、メソッドを定義するための構文を使用します)。(If you want to add event handlers after calling the start method, see the note in How to establish a connection earlier in this document, and use the syntax shown for defining a method without using the generated proxy.)

大文字と小文字が一致するメソッドの名前です。Method name matching is case-insensitive. たとえば、Clients.All.addContosoChatMessageToPageサーバーで実行AddContosoChatMessageToPageaddContosoChatMessageToPage、またはaddcontosochatmessagetopageクライアント。For example, Clients.All.addContosoChatMessageToPage on the server will execute AddContosoChatMessageToPage, addContosoChatMessageToPage, or addcontosochatmessagetopage on the client.

(生成されたプロキシ) を使用するクライアントでメソッドを定義します。Define method on client (with the generated proxy)

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

(生成されたプロキシ) を使用するクライアントでメソッドを定義する別の方法Alternate way to define method on client (with the generated proxy)

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

生成されたプロキシなし (start メソッドを呼び出した後に追加するときに) クライアントでメソッドを定義します。Define method on client (without the generated proxy, or when adding after calling the start method)

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

サーバー コードをクライアント メソッドを呼び出すServer code that calls the client method

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

次の例には、メソッド パラメーターとして、複雑なオブジェクトが含まれます。The following examples include a complex object as a method parameter.

(生成されたプロキシ) を使用した複雑なオブジェクトを取得するクライアントでメソッドを定義します。Define method on client that takes a complex object (with the generated proxy)

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

(なし、生成されたプロキシ) の複雑なオブジェクトを取得するクライアントでメソッドを定義します。Define method on client that takes a complex object (without the generated proxy)

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

複雑なオブジェクトを定義するサーバー コードServer code that defines the complex object

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

サーバー コードを複雑なオブジェクトを使用して、クライアント メソッドを呼び出すServer code that calls the client method using a complex object

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

クライアントからサーバーのメソッドを呼び出す方法How to call server methods from the client

クライアントからサーバー メソッドを呼び出しを使用して、 server 、生成されたプロキシのプロパティまたはinvoke生成されたプロキシを使用していない場合は、ハブ プロキシのメソッド。To call a server method from the client, use the server property of the generated proxy or the invoke method on the Hub proxy if you aren't using the generated proxy. 戻り値またはパラメーターには、複雑なオブジェクトを指定できます。The return value or parameters can be complex objects.

ハブのメソッド名の camel 形式でバージョンを渡します。Pass in a camel-case version of the method name on the Hub. SignalR では、JavaScript コードは、JavaScript の規則に従うことができるように、この変更が自動的に作成します。SignalR automatically makes this change so that JavaScript code can conform to JavaScript conventions.

次の例では、戻り値を持たないサーバー メソッドを呼び出す方法と戻り値がサーバー メソッドを呼び出す方法を示します。The following examples show how to call a server method that doesn't have a return value and how to call a server method that does have a return value.

HubMethodName 属性を持たないサーバー メソッドServer method with no HubMethodName attribute

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

パラメーターに渡される複雑なオブジェクトを定義するサーバー コードServer code that defines the complex object passed in a parameter

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

(生成されたプロキシ) を使用して、サーバーのメソッドを呼び出すクライアント コードClient code that invokes the server method (with the generated proxy)

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

(なし、生成されたプロキシ) サーバーのメソッドを呼び出すクライアント コードClient code that invokes the server method (without the generated proxy)

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

ハブ メソッドを修飾する場合、HubMethodName属性、ケースを変更することがなく、その名前を使用します。If you decorated the Hub method with a HubMethodName attribute, use that name without changing case.

サーバー メソッドHubMethodName 属性を持つServer method with a HubMethodName attribute

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

(生成されたプロキシ) を使用して、サーバーのメソッドを呼び出すクライアント コードClient code that invokes the server method (with the generated proxy)

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

(なし、生成されたプロキシ) サーバーのメソッドを呼び出すクライアント コードClient code that invokes the server method (without the generated proxy)

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

上記の例では、戻り値がサーバー メソッドを呼び出す方法を示しません。The preceding examples show how to call a server method that has no return value. 次の例では、戻り値を持つサーバー メソッドを呼び出す方法を示します。The following examples show how to call a server method that has a return value.

メソッドの戻り値を持つサーバー コードServer code for a method that has a return value

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

使用される Stock クラス、 戻り値The Stock class used for the return value

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

(生成されたプロキシ) を使用して、サーバーのメソッドを呼び出すクライアント コードClient code that invokes the server method (with the generated proxy)

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

(なし、生成されたプロキシ) サーバーのメソッドを呼び出すクライアント コードClient code that invokes the server method (without the generated proxy)

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

接続の有効期間イベントを処理する方法How to handle connection lifetime events

SignalR は、次の接続に処理できる有効期間イベントを提供します。SignalR provides the following connection lifetime events that you can handle:

  • starting:すべてのデータが、接続経由で送信される前に発生します。starting: Raised before any data is sent over the connection.
  • received:接続でデータを受信したときに発生します。received: Raised when any data is received on the connection. 受信したデータを提供します。Provides the received data.
  • connectionSlow:クライアントが低速または削除が頻繁に接続を検出したときに発生します。connectionSlow: Raised when the client detects a slow or frequently dropping connection.
  • reconnecting:基になるトランスポートの再接続を開始するときに発生します。reconnecting: Raised when the underlying transport begins reconnecting.
  • reconnected:基になるトランスポートが再接続されたときに発生します。reconnected: Raised when the underlying transport has reconnected.
  • stateChanged:接続状態が変更されたときに発生します。stateChanged: Raised when the connection state changes. 以前の状態と新しい状態 (接続、接続、再接続、または切断) を提供します。Provides the old state and the new state (Connecting, Connected, Reconnecting, or Disconnected).
  • disconnected:接続が切断されたときに発生します。disconnected: Raised when the connection has disconnected.

たとえば、次のように顕著な遅延を引き起こす可能性のある接続の問題が発生する警告メッセージを表示する場合、処理、connectionSlowイベント。For example, if you want to display warning messages when there are connection problems that might cause noticeable delays, handle the connectionSlow event.

(生成されたプロキシ) を使用した connectionSlow イベントを処理します。Handle the connectionSlow event (with the generated proxy)

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

(なし、生成されたプロキシ) connectionSlow イベントを処理します。Handle the connectionSlow event (without the generated proxy)

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

詳細については、次を参照してください。 SignalR の接続の有効期間イベントの処理と理解します。For more information, see Understanding and Handling Connection Lifetime Events in SignalR.

エラーを処理する方法How to handle errors

SignalR JavaScript クライアントは、提供、errorイベントのハンドラーを追加することができます。The SignalR JavaScript client provides an error event that you can add a handler for. サーバー メソッドの呼び出しに起因するエラー ハンドラーを追加するのに fail メソッドを使用することもできます。You can also use the fail method to add a handler for errors that result from a server method invocation.

場合は、サーバー上の詳細なエラー メッセージを明示的に有効にしない、SignalR が返すエラーが発生した例外オブジェクトには、エラーに関する最小限の情報が含まれています。If you don't explicitly enable detailed error messages on the server, the exception object that SignalR returns after an error contains minimal information about the error. 呼び出しなどnewContosoChatMessage失敗した場合、エラー オブジェクトにエラー メッセージが含まれています"There was an error invoking Hub method 'contosoChatHub.newContosoChatMessage'."送信の詳細なエラー メッセージを有効にする場合は、セキュリティ上の理由の詳細なエラー メッセージを運用環境でクライアントには推奨されませんトラブルシューティングのため、サーバーで次のコードを使用します。For example, if a call to newContosoChatMessage fails, the error message in the error object contains "There was an error invoking Hub method 'contosoChatHub.newContosoChatMessage'." Sending detailed error messages to clients in production is not recommended for security reasons, but if you want to enable detailed error messages for troubleshooting purposes, use the following code on the server.

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

次の例では、エラー イベントのハンドラーを追加する方法を示します。The following example shows how to add a handler for the error event.

(生成されたプロキシ) を使用して、エラー ハンドラーを追加します。Add an error handler (with the generated proxy)

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

生成されたプロキシ) (なし、エラー ハンドラーを追加します。Add an error handler (without the generated proxy)

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

次の例では、メソッドの呼び出しからエラーを処理する方法を示します。The following example shows how to handle an error from a method invocation.

(生成されたプロキシ) を使用したメソッドの呼び出しからエラーを処理します。Handle an error from a method invocation (with the generated proxy)

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

(なし、生成されたプロキシ) メソッドの呼び出しからエラーを処理します。Handle an error from a method invocation (without the generated proxy)

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

メソッドの呼び出しに失敗した場合、errorイベントが発生してもためで自分のコード、errorメソッドのハンドラーと、.failメソッドのコールバックが実行されます。If a method invocation fails, the error event is also raised, so your code in the error method handler and in the .fail method callback would execute.

クライアント側のログ記録を有効にする方法How to enable client-side logging

接続でクライアント側のログ記録を有効にするには設定、loggingを呼び出す前に、接続オブジェクトのプロパティ、startメソッドは、接続を確立します。To enable client-side logging on a connection, set the logging property on the connection object before you call the start method to establish the connection.

(生成されたプロキシ) を使用してログ記録を有効にします。Enable logging (with the generated proxy)

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

(なし、生成されたプロキシ) のログ記録を有効にします。Enable logging (without the generated proxy)

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

ログを表示するには、ブラウザーの開発者ツールを開きコンソール タブに移動します。これを行う方法を示すショット画面および詳細な手順を表示するチュートリアルについては、次を参照してください。ログ記録を有効にする - ASP.NET Signalr によるサーバー ブロードキャストします。To see the logs, open your browser's developer tools and go to the Console tab. For a tutorial that shows step-by-step instructions and screen shots that show how to do this, see Server Broadcast with ASP.NET Signalr - Enable Logging.