ASP.NET Core の SignalR を概要します。Get started with SignalR on ASP.NET Core

作成者: Rachel AppelBy Rachel Appel

このチュートリアルでは ASP.NET Core の SignalR を使用してリアルタイム アプリの構築の基礎を説明します。This tutorial teaches the basics of building a real-time app using SignalR for ASP.NET Core.

ソリューション

このチュートリアルでは、次の SignalR 開発タスクについて説明します。This tutorial demonstrates the following SignalR development tasks:

  • ASP.NET Core web アプリで、SignalR を作成します。Create a SignalR on ASP.NET Core web app.
  • クライアントにコンテンツをプッシュする SignalR ハブを作成します。Create a SignalR hub to push content to clients.
  • 変更、Startupクラスし、アプリを構成します。Modify the Startup class and configure the app.

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

必須コンポーネントPrerequisites

次のソフトウェアをインストールします。Install the following software:

SignalR クライアントとサーバーをホストする ASP.NET Core プロジェクトを作成します。Create an ASP.NET Core project that hosts SignalR client and server

  1. 使用して、ファイル > 新しいプロジェクトメニュー オプションをASP.NET Core Web アプリケーションです。Use the File > New Project menu option and choose ASP.NET Core Web Application. プロジェクトに名前をSignalRChatです。Name the project SignalRChat.

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

  2. 選択Web アプリケーションRazor ページを使用してプロジェクトを作成します。Select Web Application to create a project using Razor Pages. 選択し、 OKです。Then select OK. 必ずASP.NET Core 2.1 SignalR は、.NET の以前のバージョンが実行される場合は、framework セレクターから選択します。Be sure that ASP.NET Core 2.1 is selected from the framework selector, though SignalR runs on older versions of .NET.

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

Visual Studio が含まれています、Microsoft.AspNetCore.SignalRパッケージの一部として、サーバーのライブラリを含むそのASP.NET Core Web アプリケーションテンプレート。Visual Studio includes the Microsoft.AspNetCore.SignalR package containing its server libraries as part of its ASP.NET Core Web Application template. 使用して SignalR の JavaScript クライアント ライブラリをインストールする必要がありますただし、 npmです。However, the JavaScript client library for SignalR must be installed using npm.

  1. 次のコマンドを実行、 Package Manager Consoleウィンドウで、プロジェクトのルートから。Run the following commands in the Package Manager Console window, from the project root:

    npm init -y
    npm install @aspnet/signalr
    
  2. コピー、 signalr.jsファイルからnode_modules\ @aspnet\signalr\dist\browser* をlib*プロジェクトのフォルダーにします。Copy the signalr.js file from node_modules\@aspnet\signalr\dist\browser to the lib folder in your project.

SignalR ハブを作成します。Create the SignalR Hub

ハブは、クライアントとサーバーが互いにメソッドを呼び出すことができる高度なパイプラインとして機能するクラスです。A hub is a class that serves as a high-level pipeline that allows the client and server to call methods on each other.

  1. クラスを選択してプロジェクトに追加ファイル > 新規 > ファイルを選択してVisual c# クラスです。Add a class to the project by choosing File > New > File and selecting Visual C# Class.

  2. 継承Microsoft.AspNetCore.SignalR.Hubです。Inherit from Microsoft.AspNetCore.SignalR.Hub. Hubプロパティおよび接続とグループ、さらに送信側と受信側のデータを管理するためのイベント クラスが含まれています。The Hub class contains properties and events for managing connections and groups, as well as sending and receiving data.

  3. 作成、SendMessage接続されているチャットのすべてのクライアントにメッセージを送信するメソッド。Create the SendMessage method that sends a message to all connected chat clients. 返すことを確認、タスクSignalR が非同期であるためです。Notice it returns a Task, because SignalR is asynchronous. 非同期コードの拡張性が優れています。Asynchronous code scales better.

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

SignalR を使用するプロジェクトを構成します。Configure the project to use SignalR

SignalR に要求を渡すを認識できるように、SignalR のサーバーを構成する必要があります。The SignalR server must be configured so that it knows to pass requests to SignalR.

  1. SignalR プロジェクトを構成するには、変更、プロジェクトのStartup.ConfigureServicesメソッドです。To configure a SignalR project, modify the project's Startup.ConfigureServices method.

    services.AddSignalR 一部として SignalR を追加、ミドルウェアパイプライン。services.AddSignalR adds SignalR as part of the middleware pipeline.

  2. 使用して、ハブへのルートを構成するUseSignalRです。Configure routes to your hubs using UseSignalR.

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

SignalR クライアント コードを作成します。Create the SignalR client code

  1. コンテンツを置き換える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.js"></script>    
    <script src="~/js/chat.js"></script>
    @*
        If you need a version of the chat script that is compatible with IE 11, replace the above <script> tag that imports chat.js with this one
        <script src="~/js/es5-chat.js"></script>
    *@
    

    上記の HTML では、名前とメッセージ フィールド、および送信ボタンが表示されます。The preceding HTML displays name and message fields, and a submit button. 下部にあるスクリプト参照に注意してください: SignalR への参照とchat.jsです。Notice the script references at the bottom: a reference to SignalR and chat.js.

  2. という名前の JavaScript ファイルを追加chat.jswwwroot\jsフォルダーです。Add a JavaScript file, named chat.js, to the wwwroot\js folder. これに次のコードを追加します。Add the following code to it:

    // The following sample code uses modern ECMAScript 6 features 
    // that aren't supported in Internet Explorer 11.
    // To convert the sample for environments that do not support ECMAScript 6, 
    // such as Internet Explorer 11, use a transpiler such as 
    // Babel at http://babeljs.io/. 
    //
    // See Es5-chat.js for a Babel transpiled version of the following code:
    
    const connection = new signalR.HubConnectionBuilder()
        .withUrl("/chatHub")
        .build();
    
    connection.on("ReceiveMessage", (user, message) => { 
        const encodedMsg = user + " says " + message;
        const li = document.createElement("li");
        li.textContent = encodedMsg;
        document.getElementById("messagesList").appendChild(li);
    });
    
    document.getElementById("sendButton").addEventListener("click", event => {
        const user = document.getElementById("userInput").value;
        const message = document.getElementById("messageInput").value;    
        connection.invoke("SendMessage", user, message).catch(err => console.error(err.toString()));
        event.preventDefault();
    });
    
    connection.start().catch(err => console.error(err.toString()));
    

アプリを実行するRun the app

  1. 選択デバッグ > デバッグなしで開始ブラウザーを起動して、ローカルの web サイトを読み込みます。Select Debug > Start without debugging to launch a browser and load the website locally. アドレス バーから URL をコピーします。Copy the URL from the address bar.

  2. 別のブラウザー インスタンス (任意のブラウザー) を開き、アドレス バーに URL を貼り付けます。Open another browser instance (any browser) and paste the URL in the address bar.

  3. いずれかのブラウザーを選択し、名前と、メッセージを入力してをクリックして、送信ボタンをクリックします。Choose either browser, enter a name and message, and click the Send button. 名前とメッセージ」は即座に両方のページに表示されます。The name and message are displayed on both pages instantly.

ソリューション

ASP.NET Core SignalR の概要Introduction to ASP.NET Core SignalR