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

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

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

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

SignalR サンプル アプリ

前提条件

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

  1. Visual Studio 2022 を開始し、 [新しいプロジェクトの作成] を選択します。

    スタート ウィンドウから新しいプロジェクトを作成する

  2. [新しいプロジェクトの作成] ダイアログで、 [ASP.NET Core Web アプリ][次へ] の順に選択します。

    ASP.NET Core Web アプリを作成する

  3. [新しいプロジェクトの構成] ダイアログで、 [プロジェクト名] に「SignalRChat」と入力します。 サンプル コードをコピーして貼り付けるときに名前空間が一致するように、大文字小文字が一致する SignalRChat という名前をプロジェクトに付けることが重要です。

  4. [次へ] を選択します。

  5. [追加情報] ダイアログで、[.NET 6.0 (長期的なサポート)] を選択し、[作成] を選択します。

    追加情報

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

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

  • ソリューション エクスプローラーで、プロジェクトを右クリックし、[追加]>[クライアント側のライブラリ] を選択します。
  • [クライアント側のライブラリを追加します] ダイアログ:
    • [プロバイダー][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 クラスを作成します。
using Microsoft.AspNetCore.SignalR;

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

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

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

SignalR を構成する

SignalR 要求が SignalR に渡されるように SignalR サーバーを構成する必要があります。 次の強調表示されたコードを Program.cs ファイルに追加します。

using SignalRChat.Hubs;

var builder = WebApplication.CreateBuilder(args);

builder.Services.AddRazorPages();
builder.Services.AddSignalR();

var app = builder.Build();

if (!app.Environment.IsDevelopment())
{
    app.UseExceptionHandler("/Error");
    app.UseHsts();
}

app.UseHttpsRedirection();
app.UseStaticFiles();

app.UseRouting();

app.UseAuthorization();

app.MapRazorPages();
app.MapHub<ChatHub>("/chatHub");

app.Run();

上記の強調表示されたコードにより、ASP.NET Core の依存関係挿入とルーティング システムに SignalR が追加されます。

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

    上記の JavaScript:

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

アプリを実行する

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

SignalR サンプル アプリ

ヒント

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

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

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

Azure に発行する

Azure へのデプロイについては、「クイックスタート: ASP.NET Web アプリをデプロイする」を参照してください。

このチュートリアルでは、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 クラスは、SignalRHub クラスを継承します。 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 エラーが表示されます。 エラー

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

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

Azure に発行する

Azure へのデプロイについては、「クイックスタート: ASP.NET Web アプリをデプロイする」を参照してください。