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

このチュートリアルでは、SignalR を使用してリアルタイム アプリをビルドするための基礎について説明します。This tutorial teaches the basics of building a real-time app using SignalR. 以下の方法について説明します。You learn how to:

  • Web プロジェクトを作成します。Create a web project.
  • SignalR クライアント ライブラリを追加します。Add the SignalR client library.
  • SignalR ハブを作成します。Create a SignalR hub.
  • SignalR を使用するようにプロジェクトを構成します。Configure the project to use SignalR.
  • 任意のクライアントから、接続されているすべてのクライアントにメッセージを送信するコードを追加します。Add code that sends messages from any client to all connected clients.

最後には、次のように動作するチャット アプリが作成されます。At the end, you'll have a working chat app:

SignalR サンプル アプリ

必須コンポーネントPrerequisites

Web アプリ プロジェクトを作成するCreate a web app project

  • メニューから、 [ファイル]、[新規プロジェクト] の順に選択します。From the menu, select File > New Project.

  • [新しいプロジェクト] ダイアログで、 [ASP.NET Core Web アプリケーション][次へ] の順に選択します。In the Create a new project dialog, select ASP.NET Core Web Application, and then select Next.

  • [新しいプロジェクトの構成] ダイアログで、プロジェクトに SignalRChat という名前を付けて、 [作成] を選択します。In the Configure your new project dialog, name the project SignalRChat, and then select Create.

  • [新しい ASP.NET Core Web アプリケーションを作成する] ダイアログで、 [.NET Core][ASP.NET Core 3.1] を選択します。In the Create a new ASP.NET Core web Application dialog, select .NET Core and ASP.NET Core 3.1.

  • Razor Pages を使用するプロジェクトを作成するには [Web アプリケーション] を選択し、次に [作成] を選択します。Select Web Application to create a project that uses Razor Pages, and then select Create.

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

SignalR クライアント ライブラリを追加するAdd the SignalR client library

SignalR サーバー ライブラリは、ASP.NET Core 3.1 共有フレームワークに含まれています。The SignalR server library is included in the ASP.NET Core 3.1 shared framework. JavaScript クライアント ライブラリはプロジェクトに自動的に含まれません。The JavaScript client library isn't automatically included in the project. このチュートリアルでは、ライブラリ マネージャー (LibMan) を使用して unpkg からクライアント ライブラリを取得します。For this tutorial, you use Library Manager (LibMan) to get the client library from unpkg. unpkg は、npm (Node.js パッケージ マネージャー) で見つかるものすべてを配信できるコンテンツ配信ネットワーク (CDN) です。unpkg is a content delivery network (CDN) that can deliver anything found in npm, the Node.js package manager.

  • ソリューション エクスプローラーで、プロジェクトを右クリックし、 [追加] > [クライアント側のライブラリ] を選択します。In Solution Explorer, right-click the project, and select Add > Client-Side Library.

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

  • [ライブラリ] に、「@microsoft/signalr@latest」と入力します。For Library, enter @microsoft/signalr@latest.

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

  • [ターゲットの場所]wwwroot/js/signalr/ に設定して、 [インストール] を選択します。Set Target Location to wwwroot/js/signalr/, and select Install.

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

    LibMan によって wwwroot/js/signalr フォルダーが作成され、そこに選択したファイルがコピーされます。LibMan creates a wwwroot/js/signalr folder and copies the selected files to it.

SignalR ハブを作成するCreate a SignalR hub

ハブはクライアント サーバー通信を処理するハイレベル パイプラインとして機能するクラスです。A hub is a class that serves as a high-level pipeline that handles client-server communication.

  • SignalRChat プロジェクト フォルダー内で、Hubs フォルダーを作成します。In the SignalRChat project folder, create a Hubs folder.

  • Hubs フォルダー内で、次のコードを使用して ChatHub.cs ファイルを作成します。In the Hubs folder, create a ChatHub.cs file with the following code:

    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 クラスを継承します。The ChatHub class inherits from the SignalR Hub class. Hub クラスでは、接続、グループ、およびメッセージングが管理されます。The Hub class manages connections, groups, and messaging.

    SendMessage メソッドは、メッセージをすべてのクライアントに送信するために、接続されたクライアントによって呼び出される場合があります。The SendMessage method can be called by a connected client to send a message to all clients. このメソッドを呼び出す JavaScript クライアント コードは、チュートリアルの後半で示されます。JavaScript client code that calls the method is shown later in the tutorial. 最大のスケーラビリティを実現するために、SignalR コードは非同期になっています。SignalR code is asynchronous to provide maximum scalability.

SignalR を構成するConfigure SignalR

SignalR 要求が SignalR に渡されるように SignalR サーバーを構成する必要があります。The SignalR server must be configured to pass SignalR requests to SignalR.

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

    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 依存関係挿入およびルーティング システムに追加されます。These changes add SignalR to the ASP.NET Core dependency injection and routing systems.

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

  • Pages\Index.cshtml のコンテンツを次のコードに変更します。Replace the content in Pages\Index.cshtml with the following code:

    @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>
    

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

    • 名前およびメッセージ テキスト用のテキスト ボックスと送信ボタンを作成します。Creates text boxes for name and message text, and a submit button.
    • SignalR ハブから受信したメッセージを表示するために、id="messagesList" を使用してリストを作成します。Creates a list with id="messagesList" for displaying messages that are received from the SignalR hub.
    • SignalR へのスクリプト参照と、次の手順で作成する chat.js アプリケーション コードを含めます。Includes script references to SignalR and the chat.js application code that you create in the next step.
  • wwwroot/js フォルダー内に、次のコードを使用して chat.js ファイルを作成します。In the wwwroot/js folder, create a chat.js file with the following code:

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

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

    • 接続を作成して開始します。Creates and starts a connection.
    • ハブにメッセージを送信するハンドラーを送信ボタンに追加します。Adds to the submit button a handler that sends messages to the hub.
    • ハブからメッセージを受信してからそれをリストに追加するハンドラーを接続オブジェクトに追加します。Adds to the connection object a handler that receives messages from the hub and adds them to the list.

アプリを実行するRun the app

  • Ctrl + F5 キーを押して、デバッグを行わずにアプリを実行します。Press CTRL+F5 to run the app without debugging.
  • アドレス バーから URL をコピーし、別のブラウザー インスタンスまたはタブを開き、アドレス バーに URL を貼り付けます。Copy the URL from the address bar, open another browser instance or tab, and paste the URL in the address bar.

  • いずれかのブラウザーを選択し、名前とメッセージを入力し、 [Send Message](メッセージの送信) ボタンを選択します。Choose either browser, enter a name and message, and select the Send Message button.

    次の瞬間、両方のページに名前とメッセージが表示されます。The name and message are displayed on both pages instantly.

    SignalR サンプル アプリ

ヒント

  • アプリが動作しない場合は、ご利用のブラウザーの開発者ツール (F12) を開き、コンソールに移動します。If the app doesn't work, open your browser developer tools (F12) and go to the console. HTML および JavaScript コードに関連するエラーが発生している場合があります。You might see errors related to your HTML and JavaScript code. たとえば、signalr.js を指示されたフォルダーとは別のフォルダーに配置したとします。For example, suppose you put signalr.js in a different folder than directed. その場合、そのファイルへの参照は機能せず、コンソールに 404 エラーが表示されます。In that case the reference to that file won't work and you'll see a 404 error in the console. エラー "signalr.js が見つかりませんでした"signalr.js not found error

  • Chrome でエラー ERR_SPDY_INADEQUATE_TRANSPORT_SECURITY が発生する場合は、次のコマンドを実行して開発証明書を更新します。If you get the error ERR_SPDY_INADEQUATE_TRANSPORT_SECURITY in Chrome, run these commands to update your development certificate:

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

このチュートリアルでは、SignalR を使用してリアルタイム アプリをビルドするための基礎について説明します。This tutorial teaches the basics of building a real-time app using SignalR. 以下の方法について説明します。You learn how to:

  • Web プロジェクトを作成します。Create a web project.
  • SignalR クライアント ライブラリを追加します。Add the SignalR client library.
  • SignalR ハブを作成します。Create a SignalR hub.
  • SignalR を使用するようにプロジェクトを構成します。Configure the project to use SignalR.
  • 任意のクライアントから、接続されているすべてのクライアントにメッセージを送信するコードを追加します。Add code that sends messages from any client to all connected clients.
    最後には、動作するチャット アプリが作成されます。SignalR サンプル アプリAt the end, you'll have a working chat app: SignalR sample app

必須コンポーネントPrerequisites

警告

Visual Studio 2017 を使用している場合、Visual Studio で動作しない .NET Core SDK のバージョンについては、dotnet/sdk issue #3124 を参照してください。If you use Visual Studio 2017, see dotnet/sdk issue #3124 for information about .NET Core SDK versions that don't work with Visual Studio.

Web プロジェクトの作成Create a web project

  • メニューから、 [ファイル]、[新規プロジェクト] の順に選択します。From the menu, select File > New Project.

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

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

  • [Web アプリケーション] を選択して、Razor Pages を使用するプロジェクトを作成します。Select Web Application to create a project that uses Razor Pages.

  • .NET Core のターゲット フレームワークを選択し、ASP.NET Core 2.2 を選択して、 [OK] をクリックします。Select a target framework of .NET Core, select ASP.NET Core 2.2, and click OK.

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

SignalR クライアント ライブラリを追加するAdd the SignalR client library

SignalR サーバー ライブラリは、Microsoft.AspNetCore.App メタパッケージに含まれています。The SignalR server library is included in the Microsoft.AspNetCore.App metapackage. JavaScript クライアント ライブラリはプロジェクトに自動的に含まれません。The JavaScript client library isn't automatically included in the project. このチュートリアルでは、ライブラリ マネージャー (LibMan) を使用して unpkg からクライアント ライブラリを取得します。For this tutorial, you use Library Manager (LibMan) to get the client library from unpkg. unpkg は、npm (Node.js パッケージ マネージャー) で見つかるものすべてを配信できるコンテンツ配信ネットワーク (CDN) です。unpkg is a content delivery network (CDN) that can deliver anything found in npm, the Node.js package manager.

  • ソリューション エクスプローラーで、プロジェクトを右クリックし、 [追加] > [クライアント側のライブラリ] を選択します。In Solution Explorer, right-click the project, and select Add > Client-Side Library.

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

  • [ライブラリ] に対して「@microsoft/signalr@3」を入力し、プレビューでない最新のバージョンを選択します。For Library, enter @microsoft/signalr@3, and select the latest version that isn't preview.

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

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

  • [ターゲットの場所]wwwroot/lib/signalr/ に設定して、 [インストール] を選択します。Set Target Location to wwwroot/lib/signalr/, and select Install.

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

    LibMan によって wwwroot/lib/signalr フォルダーが作成され、そこに選択したファイルがコピーされます。LibMan creates a wwwroot/lib/signalr folder and copies the selected files to it.

SignalR ハブを作成するCreate a SignalR hub

ハブはクライアント サーバー通信を処理するハイレベル パイプラインとして機能するクラスです。A hub is a class that serves as a high-level pipeline that handles client-server communication.

  • SignalRChat プロジェクト フォルダー内で、Hubs フォルダーを作成します。In the SignalRChat project folder, create a Hubs folder.

  • Hubs フォルダー内で、次のコードを使用して ChatHub.cs ファイルを作成します。In the Hubs folder, create a ChatHub.cs file with the following code:

    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 クラスを継承します。The ChatHub class inherits from the SignalR Hub class. Hub クラスでは、接続、グループ、およびメッセージングが管理されます。The Hub class manages connections, groups, and messaging.

    SendMessage メソッドは、メッセージをすべてのクライアントに送信するために、接続されたクライアントによって呼び出される場合があります。The SendMessage method can be called by a connected client to send a message to all clients. このメソッドを呼び出す JavaScript クライアント コードは、チュートリアルの後半で示されます。JavaScript client code that calls the method is shown later in the tutorial. 最大のスケーラビリティを実現するために、SignalR コードは非同期になっています。SignalR code is asynchronous to provide maximum scalability.

SignalR を構成するConfigure SignalR

SignalR 要求が SignalR に渡されるように SignalR サーバーを構成する必要があります。The SignalR server must be configured to pass SignalR requests to SignalR.

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

    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 依存関係挿入システムとミドルウェア パイプラインに追加されます。These changes add SignalR to the ASP.NET Core dependency injection system and the middleware pipeline.

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

  • Pages\Index.cshtml のコンテンツを次のコードに変更します。Replace the content in Pages\Index.cshtml with the following code:

    @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>
    

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

    • 名前およびメッセージ テキスト用のテキスト ボックスと送信ボタンを作成します。Creates text boxes for name and message text, and a submit button.
    • SignalR ハブから受信したメッセージを表示するために、id="messagesList" を使用してリストを作成します。Creates a list with id="messagesList" for displaying messages that are received from the SignalR hub.
    • SignalR へのスクリプト参照と、次の手順で作成する chat.js アプリケーション コードを含めます。Includes script references to SignalR and the chat.js application code that you create in the next step.
  • wwwroot/js フォルダー内に、次のコードを使用して chat.js ファイルを作成します。In the wwwroot/js folder, create a chat.js file with the following code:

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

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

    • 接続を作成して開始します。Creates and starts a connection.
    • ハブにメッセージを送信するハンドラーを送信ボタンに追加します。Adds to the submit button a handler that sends messages to the hub.
    • ハブからメッセージを受信してからそれをリストに追加するハンドラーを接続オブジェクトに追加します。Adds to the connection object a handler that receives messages from the hub and adds them to the list.

アプリを実行するRun the app

  • Ctrl + F5 キーを押して、デバッグを行わずにアプリを実行します。Press CTRL+F5 to run the app without debugging.
  • アドレス バーから URL をコピーし、別のブラウザー インスタンスまたはタブを開き、アドレス バーに URL を貼り付けます。Copy the URL from the address bar, open another browser instance or tab, and paste the URL in the address bar.

  • いずれかのブラウザーを選択し、名前とメッセージを入力し、 [Send Message](メッセージの送信) ボタンを選択します。Choose either browser, enter a name and message, and select the Send Message button.

    次の瞬間、両方のページに名前とメッセージが表示されます。The name and message are displayed on both pages instantly.

    SignalR サンプル アプリ

ヒント

アプリが動作しない場合は、ご利用のブラウザーの開発者ツール (F12) を開き、コンソールに移動します。If the app doesn't work, open your browser developer tools (F12) and go to the console. HTML および JavaScript コードに関連するエラーが発生している場合があります。You might see errors related to your HTML and JavaScript code. たとえば、signalr.js を指示されたフォルダーとは別のフォルダーに配置したとします。For example, suppose you put signalr.js in a different folder than directed. その場合、そのファイルへの参照は機能せず、コンソールに 404 エラーが表示されます。In that case the reference to that file won't work and you'll see a 404 error in the console.
エラー "signalr.js が見つかりませんでした"signalr.js not found error

その他の技術情報Additional resources