ASP.NET Core SignalR JavaScript クライアントASP.NET Core SignalR JavaScript client

作成者: Rachel AppelBy Rachel Appel

ASP.NET Core SignalR JavaScript クライアント ライブラリでは、サーバー側ハブのコードを呼び出すことができます。The ASP.NET Core SignalR JavaScript client library enables developers to call server-side hub code.

サンプル コードを表示またはダウンロードします (ダウンロード方法)。View or download sample code (how to download)

SignalR クライアント パッケージをインストールします。Install the SignalR client package

SignalR JavaScript クライアント ライブラリとして提供される、 npmパッケージ。The SignalR JavaScript client library is delivered as an npm package. Visual Studio を使用している場合は、実行npm installから、パッケージ マネージャー コンソールルート フォルダー内で。If you're using Visual Studio, run npm install from the Package Manager Console while in the root folder. Visual Studio Code でからのコマンドを実行、統合ターミナルします。For Visual Studio Code, run the command from the Integrated Terminal.

npm init -y
npm install @aspnet/signalr

npm のインストール パッケージの内容を node_modules\@aspnet\signalr\dist\browser フォルダー。npm installs the package contents in the node_modules\@aspnet\signalr\dist\browser folder. という名前の新しいフォルダーを作成するsignalr下、 wwwroot\libフォルダー。Create a new folder named signalr under the wwwroot\lib folder. コピー、 signalr.jsファイルをwwwroot\lib\signalrフォルダー。Copy the signalr.js file to the wwwroot\lib\signalr folder.

SignalR JavaScript クライアントを使用します。Use the SignalR JavaScript client

SignalR JavaScript クライアントでの参照、<script>要素。Reference the SignalR JavaScript client in the <script> element.

<script src="~/lib/signalr/signalr.js"></script>

ハブへの接続します。Connect to a hub

次のコードでは、作成し、接続を開始します。The following code creates and starts a connection. ハブの名前は大文字小文字を区別します。The hub's name is case insensitive.

const connection = new signalR.HubConnectionBuilder()
    .withUrl("/chatHub")
    .configureLogging(signalR.LogLevel.Information)
    .build();

connection.start().then(function () {
    console.log("connected");
});

クロス オリジンの接続Cross-origin connections

通常、ブラウザーでは、要求されたページと同じドメインから接続を読み込みます。Typically, browsers load connections from the same domain as the requested page. ただし、状況が別のドメインへの接続が必要な場合があります。However, there are occasions when a connection to another domain is required.

悪意のあるサイトが別のサイトから機密データを読み取ることを防ぐためにクロス オリジン接続は既定で無効になります。To prevent a malicious site from reading sensitive data from another site, cross-origin connections are disabled by default. クロス オリジン要求を許可することで有効にする、Startupクラス。To allow a cross-origin request, enable it in the Startup class.

using Microsoft.AspNetCore.Builder;
using Microsoft.AspNetCore.Hosting;
using Microsoft.AspNetCore.Http;
using Microsoft.Extensions.Configuration;
using Microsoft.Extensions.DependencyInjection;
using SignalRChat.Hubs;

namespace SignalRChat
{
    public class Startup
    {
        public Startup(IConfiguration configuration)
        {
            Configuration = configuration;
        }

        public IConfiguration Configuration { get; }

        public void ConfigureServices(IServiceCollection services)
        {
            services.Configure<CookiePolicyOptions>(options =>
            {
                options.CheckConsentNeeded = context => true;
                options.MinimumSameSitePolicy = SameSiteMode.None;
            });

            services.AddMvc();

            services.AddCors(options => options.AddPolicy("CorsPolicy", 
            builder => 
            {
                builder.AllowAnyMethod().AllowAnyHeader()
                       .WithOrigins("http://localhost:55830")
                       .AllowCredentials();
            }));

            services.AddSignalR();
        }

        public void Configure(IApplicationBuilder app, IHostingEnvironment env)
        {
            if (env.IsDevelopment())
            {
                app.UseBrowserLink();
                app.UseDeveloperExceptionPage();
            }
            else
            {
                app.UseExceptionHandler("/Error");
                app.UseHsts();
            }

            app.UseHttpsRedirection();
            app.UseStaticFiles();
            app.UseCookiePolicy();
            app.UseCors("CorsPolicy");
            app.UseSignalR(routes => 
            {
                routes.MapHub<ChatHub>("/chathub");
            });
            app.UseMvc();            
        }
    }
}

クライアントからのハブ メソッドの呼び出しCall hub methods from client

JavaScript クライアントは、ハブ経由でのパブリック メソッドを呼び出して、呼び出すのメソッド、 HubConnectionします。JavaScript clients call public methods on hubs via the invoke method of the HubConnection. invokeメソッドは 2 つの引数を受け取ります。The invoke method accepts two arguments:

  • ハブ メソッドの名前。The name of the hub method. 次の例では、ハブのメソッド名はSendMessageします。In the following example, the method name on the hub is SendMessage.

  • ハブ メソッドで定義されている引数。Any arguments defined in the hub method. 次の例では引数名はmessageします。In the following example, the argument name is message. コード例では、現在のバージョンの Internet Explorer を除くすべての主要ブラウザーでサポートされている矢印関数の構文を使用します。The example code uses arrow function syntax that is supported in current versions of all major browsers except Internet Explorer.

    connection.invoke("SendMessage", user, message).catch(err => console.error(err.toString()));
    

注意

Azure SignalR サービスを使用している場合サーバーレス モード、クライアントからハブ メソッドを呼び出すことはできません。If you're using Azure SignalR Service in Serverless mode, you cannot call hub methods from a client. 詳細については、次を参照してください。、 SignalR サービスのドキュメントします。For more information, see the SignalR Service documentation.

ハブからのクライアント メソッドを呼び出すCall client methods from hub

ハブからメッセージを受信する定義を使用して、メソッド、のメソッド、HubConnectionします。To receive messages from the hub, define a method using the on method of the HubConnection.

  • JavaScript クライアント メソッドの名前。The name of the JavaScript client method. 次の例では、メソッド名はReceiveMessageします。In the following example, the method name is ReceiveMessage.
  • 引数は、hub は、メソッドに渡します。Arguments the hub passes to the method. 引数の値は、次の例では、messageします。In the following example, the argument value is message.
connection.on("ReceiveMessage", (user, message) => {
    const encodedMsg = user + " says " + message;
    const li = document.createElement("li");
    li.textContent = encodedMsg;
    document.getElementById("messagesList").appendChild(li);
});

上記のコードでconnection.onを使用してサーバー側コードから呼び出すときに実行される、 SendAsyncメソッド。The preceding code in connection.on runs when server-side code calls it using the SendAsync method.

public async Task SendMessage(string user, string message)
{
    await Clients.All.SendAsync("ReceiveMessage", user, message);
}

SignalR を呼び出すメソッド名を照合することによってクライアントの方法を指定してで定義されている引数SendAsyncconnection.onします。SignalR determines which client method to call by matching the method name and arguments defined in SendAsync and connection.on.

注意

ベスト プラクティスを呼び出して、開始メソッドをHubConnectiononします。As a best practice, call the start method on the HubConnection after on. これにより、すべてのメッセージを受信する前に、ハンドラーが登録されます。Doing so ensures your handlers are registered before any messages are received.

エラー処理とログ記録Error handling and logging

チェーンをcatchメソッドの末尾に、startクライアント側のエラーを処理するメソッド。Chain a catch method to the end of the start method to handle client-side errors. 使用console.errorブラウザーのコンソールにエラーを出力します。Use console.error to output errors to the browser's console.

connection.start().catch(function (err) {
    return console.error(err.toString());
});

接続が行われたときにログに記録するには、logger とイベントの種類を渡すことによって、クライアント側のログ トレースをセットアップします。Setup client-side log tracing by passing a logger and type of event to log when the connection is made. 指定されたログ レベル以降、メッセージが記録されます。Messages are logged with the specified log level and higher. 使用可能なログ レベルは次のとおりです。Available log levels are as follows:

  • signalR.LogLevel.Error – エラー メッセージ。signalR.LogLevel.Error – Error messages. ログErrorメッセージのみです。Logs Error messages only.
  • signalR.LogLevel.Warning – 可能性のあるエラーについての警告メッセージ。signalR.LogLevel.Warning – Warning messages about potential errors. ログWarning、およびErrorメッセージ。Logs Warning, and Error messages.
  • signalR.LogLevel.Information – ステータス メッセージがエラーなし。signalR.LogLevel.Information – Status messages without errors. ログInformationWarning、およびErrorメッセージ。Logs Information, Warning, and Error messages.
  • signalR.LogLevel.Trace – メッセージをトレースします。signalR.LogLevel.Trace – Trace messages. ハブとクライアント間で転送されるデータを含め、すべてログに記録します。Logs everything, including data transported between hub and client.

使用して、 configureLoggingメソッドHubConnectionBuilderログ レベルを構成します。Use the configureLogging method on HubConnectionBuilder to configure the log level. メッセージは、ブラウザーのコンソールに記録されます。Messages are logged to the browser console.

const connection = new signalR.HubConnectionBuilder()
    .withUrl("/chatHub")
    .configureLogging(signalR.LogLevel.Information)
    .build();

クライアントを再接続します。Reconnect clients

SignalR JavaScript クライアントは自動的に再接続しません。The JavaScript client for SignalR doesn't automatically reconnect. クライアントを手動で再接続するコードを記述する必要があります。You must write code that will reconnect your client manually. 次のコードでは、再接続の一般的なアプローチを示します。The following code demonstrates a typical reconnection approach:

  1. 関数 (ここで、start関数)、接続を開始するが作成されます。A function (in this case, the start function) is created to start the connection.
  2. 呼び出す、start関数で、接続のoncloseイベント ハンドラー。Call the start function in the connection's onclose event handler.
async function start() {
    try {
        await connection.start();
        console.log("connected");
    } catch (err) {
        console.log(err);
        setTimeout(() => start(), 5000);
    }
};

connection.onclose(async () => {
    await start();
});

実際の実装は、指数バックオフを使用して、または断念する前に指定された回数を再試行してください。A real-world implementation would use an exponential back-off or retry a specified number of times before giving up.

その他の技術情報Additional resources