チュートリアル: ASP.NET Core SignalR の概要

このチュートリアルでは、SignalR を使用してリアルタイム アプリをビルドするための基礎について説明します。 以下の方法について説明します。

  • Web プロジェクトを作成します。
  • SignalR クライアント ライブラリを追加します。
  • SignalR ハブを作成します。
  • SignalR を使用するようにプロジェクトを構成します。
  • 任意のクライアントから、接続されているすべてのクライアントにメッセージを送信するコードを追加します。

最後には、次のように動作するチャット アプリが作成されます。

SignalR サンプル アプリ

必須コンポーネント

Web アプリ プロジェクトを作成する

  • メニューから、 [ファイル]、[新規プロジェクト] の順に選択します。
  • [新しいプロジェクト] ダイアログで、 [ASP.NET Core Web アプリケーション][次へ] の順に選択します。
  • [新しいプロジェクトの構成] ダイアログで、プロジェクトに SignalRChat という名前を付けて、 [作成] を選択します。
  • [新しい ASP.NET Core Web アプリケーションを作成する] ダイアログで、 [.NET Core][ASP.NET Core 3.1] を選択します。
  • Razor Pages を使用するプロジェクトを作成するには [Web アプリケーション] を選択し、次に [作成] を選択します。

Visual Studio の [新しいプロジェクト] ダイアログ ボックス

SignalR クライアント ライブラリを追加する

SignalR サーバー ライブラリは、ASP.NET Core 3.1 共有フレームワークに含まれています。 JavaScript クライアント ライブラリはプロジェクトに自動的に含まれません。 このチュートリアルでは、ライブラリ マネージャー (LibMan) を使用して unpkg からクライアント ライブラリを取得します。 unpkg は、npm (Node.js パッケージ マネージャー) で見つかるものすべてを配信できるコンテンツ配信ネットワーク (CDN) です。

  • ソリューション エクスプローラー で、プロジェクトを右クリックし、 [追加] > [クライアント側のライブラリ] を選択します。
  • [Add Client-Side Library](クライアント側のライブラリの追加) ダイアログで、 [プロバイダー] に対して [unpkg] を選択します。
  • [ライブラリ] に、「@microsoft/signalr@latest」と入力します。
  • [Choose specific files](特定のファイルの選択) を選択して dist/browser フォルダーを展開し、signalr.jssignalr.min.js を選択します。
  • [ターゲットの場所]wwwroot/js/signalr/ に設定して、 [インストール] を選択します。

クライアント側のライブラリの追加ダイアログ - ライブラリの選択

LibMan によって wwwroot/js/signalr フォルダーが作成され、そこに選択したファイルがコピーされます。

SignalR ハブを作成する

ハブ はクライアント サーバー通信を処理するハイレベル パイプラインとして機能するクラスです。

  • SignalRChat プロジェクト フォルダー内で、Hubs フォルダーを作成します。
  • Hubs フォルダー内で、次のコードを使用して ChatHub.cs ファイルを作成します。
using Microsoft.AspNetCore.SignalR;
using System.Threading.Tasks;

namespace SignalRChat.Hubs
{
    public class ChatHub : Hub
    {
        public async Task SendMessage(string user, string message)
        {
            await Clients.All.SendAsync("ReceiveMessage", user, message);
        }
    }
}

ChatHub クラスは SignalR Hub クラスを継承します。 Hub クラスでは、接続、グループ、およびメッセージングが管理されます。

SendMessage メソッドは、メッセージをすべてのクライアントに送信するために、接続されたクライアントによって呼び出される場合があります。 このメソッドを呼び出す JavaScript クライアント コードは、チュートリアルの後半で示されます。 最大のスケーラビリティを実現するために、SignalR コードは非同期になっています。

SignalR を構成する

SignalR 要求が SignalR に渡されるように SignalR サーバーを構成する必要があります。

  • 次の強調表示されたコードを Startup.cs ファイルに追加します。

    using System;
    using System.Collections.Generic;
    using System.Linq;
    using System.Threading.Tasks;
    using Microsoft.AspNetCore.Builder;
    using Microsoft.AspNetCore.Hosting;
    using Microsoft.AspNetCore.HttpsPolicy;
    using Microsoft.Extensions.Configuration;
    using Microsoft.Extensions.DependencyInjection;
    using Microsoft.Extensions.Hosting;
    using SignalRChat.Hubs;
    
    namespace SignalRChat
    {
        public class Startup
        {
            public Startup(IConfiguration configuration)
            {
                Configuration = configuration;
            }
    
            public IConfiguration Configuration { get; }
    
            // This method gets called by the runtime. Use this method to add services to the container.
            public void ConfigureServices(IServiceCollection services)
            {
                services.AddRazorPages();
                services.AddSignalR();
            }
    
            // This method gets called by the runtime. Use this method to configure the HTTP request pipeline.
            public void Configure(IApplicationBuilder app, IWebHostEnvironment env)
            {
                if (env.IsDevelopment())
                {
                    app.UseDeveloperExceptionPage();
                }
                else
                {
                    app.UseExceptionHandler("/Error");
                    // The default HSTS value is 30 days. You may want to change this for production scenarios, see https://aka.ms/aspnetcore-hsts.
                    app.UseHsts();
                }
    
                app.UseHttpsRedirection();
                app.UseStaticFiles();
    
                app.UseRouting();
    
                app.UseAuthorization();
    
                app.UseEndpoints(endpoints =>
                {
                    endpoints.MapRazorPages();
                    endpoints.MapHub<ChatHub>("/chatHub");
                });
            }
        }
    }
    

    これらの変更によって、SignalR が ASP.NET Core 依存関係挿入およびルーティング システムに追加されます。

SignalR クライアント コードを追加する

  • Pages\Index.cshtml のコンテンツを次のコードに変更します。

    @page
        <div class="container">
            <div class="row">&nbsp;</div>
            <div class="row">
                <div class="col-2">User</div>
                <div class="col-4"><input type="text" id="userInput" /></div>
            </div>
            <div class="row">
                <div class="col-2">Message</div>
                <div class="col-4"><input type="text" id="messageInput" /></div>
            </div>
            <div class="row">&nbsp;</div>
            <div class="row">
                <div class="col-6">
                    <input type="button" id="sendButton" value="Send Message" />
                </div>
            </div>
        </div>
        <div class="row">
            <div class="col-12">
                <hr />
            </div>
        </div>
        <div class="row">
            <div class="col-6">
                <ul id="messagesList"></ul>
            </div>
        </div>
    <script src="~/js/signalr/dist/browser/signalr.js"></script>
    <script src="~/js/chat.js"></script>
    

    上記のコードでは次の操作が行われます。

    • 名前およびメッセージ テキスト用のテキスト ボックスと送信ボタンを作成します。
    • SignalR ハブから受信したメッセージを表示するために、id="messagesList" を使用してリストを作成します。
    • SignalR へのスクリプト参照と、次の手順で作成する chat.js アプリケーション コードを含めます。
  • wwwroot/js フォルダー内に、次のコードを使用して chat.js ファイルを作成します。

    "use strict";
    
    var connection = new signalR.HubConnectionBuilder().withUrl("/chatHub").build();
    
    //Disable send button until connection is established
    document.getElementById("sendButton").disabled = true;
    
    connection.on("ReceiveMessage", function (user, message) {
        var li = document.createElement("li");
        document.getElementById("messagesList").appendChild(li);
        // We can assign user-supplied strings to an element's textContent because it
        // is not interpreted as markup. If you're assigning in any other way, you 
        // should be aware of possible script injection concerns.
        li.textContent = `${user} says ${message}`;
    });
    
    connection.start().then(function () {
        document.getElementById("sendButton").disabled = false;
    }).catch(function (err) {
        return console.error(err.toString());
    });
    
    document.getElementById("sendButton").addEventListener("click", function (event) {
        var user = document.getElementById("userInput").value;
        var message = document.getElementById("messageInput").value;
        connection.invoke("SendMessage", user, message).catch(function (err) {
            return console.error(err.toString());
        });
        event.preventDefault();
    });
    

    上記のコードでは次の操作が行われます。

    • 接続を作成して開始します。
    • ハブにメッセージを送信するハンドラーを送信ボタンに追加します。
    • ハブからメッセージを受信してからそれをリストに追加するハンドラーを接続オブジェクトに追加します。

アプリを実行する

  • Ctrl + F5 キーを押して、デバッグを行わずにアプリを実行します。
  • アドレス バーから URL をコピーし、別のブラウザー インスタンスまたはタブを開き、アドレス バーに URL を貼り付けます。
  • いずれかのブラウザーを選択し、名前とメッセージを入力し、 [Send Message](メッセージの送信) ボタンを選択します。 次の瞬間、両方のページに名前とメッセージが表示されます。

SignalR サンプル アプリ

ヒント

  • アプリが動作しない場合は、ご利用のブラウザーの開発者ツール (F12) を開き、コンソールに移動します。 HTML および JavaScript コードに関連するエラーが発生している場合があります。 たとえば、signalr.js を指示されたフォルダーとは別のフォルダーに配置したとします。 その場合、そのファイルへの参照は機能せず、コンソールに 404 エラーが表示されます。 エラー "signalr.js が見つかりませんでした"

  • Chrome でエラー ERR_SPDY_INADEQUATE_TRANSPORT_SECURITY が発生する場合は、次のコマンドを実行して開発証明書を更新します。

    dotnet dev-certs https --clean
    dotnet dev-certs https --trust
    

このチュートリアルでは、SignalR を使用してリアルタイム アプリをビルドするための基礎について説明します。 以下の方法について説明します。

  • Web プロジェクトを作成します。
  • SignalR クライアント ライブラリを追加します。
  • SignalR ハブを作成します。
  • SignalR を使用するようにプロジェクトを構成します。
  • 任意のクライアントから、接続されているすべてのクライアントにメッセージを送信するコードを追加します。
    最後には、動作するチャット アプリが作成されます。SignalR サンプル アプリ

必須コンポーネント

  • ASP.NET および Web 開発 ワークロードを含む Visual Studio 2017 バージョン 15.9 以降。 Visual Studio 2019 を使用することもできますが、一部のプロジェクト作成手順は、このチュートリアルで示した手順とは異なります。
  • .NET Core SDK 2.2 以降

警告

Visual Studio 2017 を使用している場合、Visual Studio で動作しない .NET Core SDK のバージョンについては、dotnet/sdk issue #3124 を参照してください。

Web プロジェクトの作成

  • メニューから、 [ファイル]、[新規プロジェクト] の順に選択します。

  • [新しいプロジェクト] ダイアログで、 [インストール]、[Visual C#]、[Web]、[ASP.NET Core Web アプリケーション] の順に選択します。 プロジェクトに SignalRChat という名前を付けます。

    Visual Studio の [新しいプロジェクト] ダイアログ ボックス

  • [Web アプリケーション] を選択して、Razor Pages を使用するプロジェクトを作成します。

  • .NET Core のターゲット フレームワークを選択し、ASP.NET Core 2.2 を選択して、 [OK] をクリックします。

    Visual Studio の [新しいプロジェクト] ダイアログ ボックス

SignalR クライアント ライブラリを追加する

SignalR サーバー ライブラリは、Microsoft.AspNetCore.App メタパッケージに含まれています。 JavaScript クライアント ライブラリはプロジェクトに自動的に含まれません。 このチュートリアルでは、ライブラリ マネージャー (LibMan) を使用して unpkg からクライアント ライブラリを取得します。 unpkg は、npm (Node.js パッケージ マネージャー) で見つかるものすべてを配信できるコンテンツ配信ネットワーク (CDN) です。

  • ソリューション エクスプローラー で、プロジェクトを右クリックし、 [追加] > [クライアント側のライブラリ] を選択します。

  • [Add Client-Side Library](クライアント側のライブラリの追加) ダイアログで、 [プロバイダー] に対して [unpkg] を選択します。

  • [ライブラリ] に対して「@microsoft/signalr@3」を入力し、プレビューでない最新のバージョンを選択します。

    クライアント側のライブラリの追加ダイアログ - ライブラリの選択

  • [Choose specific files](特定のファイルの選択) を選択して dist/browser フォルダーを展開し、signalr.jssignalr.min.js を選択します。

  • [ターゲットの場所]wwwroot/lib/signalr/ に設定して、 [インストール] を選択します。

    クライアント側のライブラリの追加ダイアログ - ファイルと保存先の選択

    LibMan によって wwwroot/lib/signalr フォルダーが作成され、そこに選択したファイルがコピーされます。

SignalR ハブを作成する

ハブ はクライアント サーバー通信を処理するハイレベル パイプラインとして機能するクラスです。

  • SignalRChat プロジェクト フォルダー内で、Hubs フォルダーを作成します。

  • Hubs フォルダー内で、次のコードを使用して ChatHub.cs ファイルを作成します。

    using Microsoft.AspNetCore.SignalR;
    using System.Threading.Tasks;
    
    namespace SignalRChat.Hubs
    {
        public class ChatHub : Hub
        {
            public async Task SendMessage(string user, string message)
            {
                await Clients.All.SendAsync("ReceiveMessage", user, message);
            }
        }
    }
    

    ChatHub クラスは SignalR Hub クラスを継承します。 Hub クラスでは、接続、グループ、およびメッセージングが管理されます。

    SendMessage メソッドは、メッセージをすべてのクライアントに送信するために、接続されたクライアントによって呼び出される場合があります。 このメソッドを呼び出す JavaScript クライアント コードは、チュートリアルの後半で示されます。 最大のスケーラビリティを実現するために、SignalR コードは非同期になっています。

SignalR を構成する

SignalR 要求が SignalR に渡されるように SignalR サーバーを構成する必要があります。

  • 次の強調表示されたコードを Startup.cs ファイルに追加します。

    using Microsoft.AspNetCore.Builder;
    using Microsoft.AspNetCore.Hosting;
    using Microsoft.AspNetCore.Http;
    using Microsoft.AspNetCore.Mvc;
    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; }
    
            // This method gets called by the runtime. Use this method to add services to the container.
            public void ConfigureServices(IServiceCollection services)
            {
                services.Configure<CookiePolicyOptions>(options =>
                {
                    // This lambda determines whether user consent for non-essential cookies is needed for a given request.
                    options.CheckConsentNeeded = context => true;
                    options.MinimumSameSitePolicy = SameSiteMode.None;
                });
    
    
                services.AddMvc().SetCompatibilityVersion(CompatibilityVersion.Version_2_1);
    
                services.AddSignalR();
            }
    
            // This method gets called by the runtime. Use this method to configure the HTTP request pipeline.
            public void Configure(IApplicationBuilder app, IHostingEnvironment env)
            {
                if (env.IsDevelopment())
                {
                    app.UseDeveloperExceptionPage();
                }
                else
                {
                    app.UseExceptionHandler("/Error");
                    app.UseHsts();
                }
    
                app.UseHttpsRedirection();
                app.UseStaticFiles();
                app.UseCookiePolicy();
                app.UseSignalR(routes =>
                {
                    routes.MapHub<ChatHub>("/chathub");
                });
                app.UseMvc();
            }
        }
    }
    

    これらの変更によって、SignalR が ASP.NET Core 依存関係挿入システムとミドルウェア パイプラインに追加されます。

SignalR クライアント コードを追加する

  • Pages\Index.cshtml のコンテンツを次のコードに変更します。

    @page
    <div class="container">
        <div class="row">&nbsp;</div>
        <div class="row">
            <div class="col-6">&nbsp;</div>
            <div class="col-6">
                User..........<input type="text" id="userInput" />
                <br />
                Message...<input type="text" id="messageInput" />
                <input type="button" id="sendButton" value="Send Message" />
            </div>
        </div>
        <div class="row">
            <div class="col-12">
                <hr />
            </div>
        </div>
        <div class="row">
            <div class="col-6">&nbsp;</div>
            <div class="col-6">
                <ul id="messagesList"></ul>
            </div>
        </div>
    </div>
    <script src="~/lib/signalr/dist/browser/signalr.js"></script>
    <script src="~/js/chat.js"></script>
    

    上記のコードでは次の操作が行われます。

    • 名前およびメッセージ テキスト用のテキスト ボックスと送信ボタンを作成します。
    • SignalR ハブから受信したメッセージを表示するために、id="messagesList" を使用してリストを作成します。
    • SignalR へのスクリプト参照と、次の手順で作成する chat.js アプリケーション コードを含めます。
  • wwwroot/js フォルダー内に、次のコードを使用して chat.js ファイルを作成します。

    "use strict";
    
    var connection = new signalR.HubConnectionBuilder().withUrl("/chatHub").build();
    
    //Disable send button until connection is established
    document.getElementById("sendButton").disabled = true;
    
    connection.on("ReceiveMessage", function (user, message) {
        var msg = message.replace(/&/g, "&amp;").replace(/</g, "&lt;").replace(/>/g, "&gt;");
        var encodedMsg = user + " says " + msg;
        var li = document.createElement("li");
        li.textContent = encodedMsg;
        document.getElementById("messagesList").appendChild(li);
    });
    
    connection.start().then(function(){
        document.getElementById("sendButton").disabled = false;
    }).catch(function (err) {
        return console.error(err.toString());
    });
    
    document.getElementById("sendButton").addEventListener("click", function (event) {
        var user = document.getElementById("userInput").value;
        var message = document.getElementById("messageInput").value;
        connection.invoke("SendMessage", user, message).catch(function (err) {
            return console.error(err.toString());
        });
        event.preventDefault();
    });
    

    上記のコードでは次の操作が行われます。

    • 接続を作成して開始します。
    • ハブにメッセージを送信するハンドラーを送信ボタンに追加します。
    • ハブからメッセージを受信してからそれをリストに追加するハンドラーを接続オブジェクトに追加します。

アプリを実行する

  • Ctrl + F5 キーを押して、デバッグを行わずにアプリを実行します。
  • アドレス バーから URL をコピーし、別のブラウザー インスタンスまたはタブを開き、アドレス バーに URL を貼り付けます。

  • いずれかのブラウザーを選択し、名前とメッセージを入力し、 [Send Message](メッセージの送信) ボタンを選択します。

    次の瞬間、両方のページに名前とメッセージが表示されます。

    SignalR サンプル アプリ

ヒント

アプリが動作しない場合は、ご利用のブラウザーの開発者ツール (F12) を開き、コンソールに移動します。 HTML および JavaScript コードに関連するエラーが発生している場合があります。 たとえば、signalr.js を指示されたフォルダーとは別のフォルダーに配置したとします。 その場合、そのファイルへの参照は機能せず、コンソールに 404 エラーが表示されます。
エラー "signalr.js が見つかりませんでした"

その他の技術情報