Signalr、角度、およびクライアントとクロスクライアントの通信.ネット5

ますます多くの企業は、彼らのサービスを提供するためにウェブアプリケーションを使用しています.あなたが多くの一般的な問題に直面するそれらを構築する.それらのうちの1つは、同じウェブアプリケーションの異なるクライアントの間のコミュニケーション、例えばインスタントメッセージングまたはブラウザーでの同時編集のために使われます.そして、ウェブのためにGoogleドライブまたはマイクロソフトOfficeでされるようになります.いくつかの変更が別のクライアントで行われたときに一般的な目的は、1つのクライアント上の情報を更新しています.
いつものように、この問題を解決する多くの方法があります.この例では、スタックを使用します.フロントエンドのためのバックエンドと角度のためのNET 5.クロスクライアント通信のためにsignalrを簡単に使うことができます.

signalrによる実時間更新
SignalRはマイクロソフトによるオープンソースプロジェクトであり、容易に統合できる.NETアプリケーション.また、あなたのWebフロントエンドには、例えば、あなたの反応や角度のアプリケーションを統合することができますNPMパッケージがあります.
signalrは主に何をしますか?これは、クライアントのサーバーから更新プログラムをプッシュする機能を提供するので、情報をリフレッシュせずに更新することができますページです.これは、あなたのWebアプリケーションをリアルタイムに準備します.
どのようにSignalrはこれを達成するのですか?クライアントとサーバによるサポートに依存して、コミュニケーションのために異なるテクノロジーを使用しようとします.それで、signalrが既にしているように、あなたはWebSocket、ポーリングまたはサーバに送られた出来事について気にする必要はありません.

私たちの例- Quizzerアプリ
ゼロからリアルタイムのWebアプリケーションを構築しましょう.例としてクイズマスターといくつかのクイズ候補とクイズアプリを取る.それらはそれぞれブラウザのインスタンスで表現されます.クイズマスターは、次の質問を開始する場合は、すべての候補者のクライアントにプッシュする必要があります.候補が推測をするならば、クイズマスターは知らせられなければなりません.そしてもちろん、候補者がクイズに参加した場合、彼らは名前を設定し、これについてクイズマスターに通知する必要があります.したがって、この例では、クライアントからサーバーへの更新をプッシュするだけではなく、クライアントから他のクライアントへの更新をプッシュします.クライアントが互いを知らないので、我々が直接これをすることができないので、我々はサーバーの助けを借りてこの十字クライアントコミュニケーションをします.


必要条件
このチュートリアルに従うと、アプリケーションを自分で構築するには、いくつかのマシンをインストールする必要があります.

.NET 5 SDKとランタイム

Visual Studio 2019またはより高い

ノード.NPM V 8またはより高い

でのJS
角のV 13またはそれ以上完全なソースコードhereを見つけることができます.

から始めましょう.ネットバック
まず、Visual Studioでバックエンドを作成する必要があります.プロジェクトのテンプレートとして「ASP . NETコアWeb API」を選択します.それは、Web APIとコントローラのための標準的なセットアップでプロジェクトを作成します.
バックエンドでsignalrを使用するには、起動時に有効にする必要があります.以下の通り.

public void ConfigureServices(IServiceCollection services)
{
        // ...
        services.AddSignalR();
        // ...
}

我々がすでにここにいるので、我々はまた、フロントエンドとバックエンドのローカルデバッグを可能にするもう一つのことをすることができます.localhostを起源とするためにCORSを設定します.

public class Startup
{
        readonly string MyAllowSpecificOrigins = "_myAllowSpecificOrigins";

        // ...

        public void ConfigureServices(IServiceCollection services)
        {
        services.AddCors(options =>
        {
            options.AddPolicy(MyAllowSpecificOrigins, builder =>
            {
                builder
                    .AllowAnyHeader()
                    .AllowAnyMethod()
                    .AllowCredentials()
                    .WithOrigins("http://localhost:4200")
                    .Build();
            });
        });
                // ...
        }
        // ...
}

我々は、我々の角度アプリケーションがデフォルトで動くところであるので、我々が起源としてポート4200でlocalhostを許します.それで、フロントエンドによるAPI呼び出しがブロックされないことを確認します.
signalrの1つの中心要素はいわゆるハブです.後で詳細について来ますが、すでにQuizHubを起動時に登録します.maphub ()関数を使用したcs :

public void Configure(IApplicationBuilder app, IWebHostEnvironment env)
{
        // ...
        app.UseEndpoints(endpoints =>
        {
            endpoints.MapControllers();
            endpoints.MapHub<QuizHub>("/hub");
        });
}

Signalrハブでの作業
QuizHubを登録したので、もちろん実装しなければなりません.signalrはハブと呼ばれる抽象クラスを提供します.

using Microsoft.AspNetCore.SignalR;

public class QuizHub : Hub
{
}

このクラスでは、クライアントが呼び出すメソッドを追加します.

public async Task MakeGuess(string player, string answer)
{
    await this.Clients.All.SendAsync("GuessMade", player, answer);
}

public async Task SetPlayerName(string playerName)
{
    await this.Clients.All.SendAsync("PlayerNameSet", playerName);
}

クライアントがこれらのメソッドのいずれかを呼び出した場合、特定のイベント(guessmadeまたはplayernameset)を聞く他のすべてのクライアントが通知され、呼び出し元クライアントが渡されたデータを取得します.我々はフロントエンドの部分に来るとき、我々が実際にどのようにそれらの呼び出しをすることができるかについて見ます.

クイズデータ取得
今の質問と回答を気にしましょうので、適切に後でテストすることができます.あなたは、データベース内の独自のクイズデータを構築することができますが、この例では、我々は質問の数千を私たちを提供するOpen Trivia DBを使用します.私たちは単に残りのAPIを介してデータを取得できます.クエリでは、私たちが戻って取得する質問の量、種類と難しさを指定することができますので、APIコール

https://opentdb.com/api.php?amount=1&difficulty=medium&type=multiple

中難易度の1つの複数の選択肢の質問を返します.
質問を取得するプロセスは、データ/質問プロバイダで実装されています.csデータフォルダでは、API応答を逆シリアル化する2つのモデルクラスを見つけることもできます.
その後、データの検索全体をQuizQuestionRepositoryにカプセル化されます.コントローラで使用できる1つのメソッドgetnextQuest ()を提供するCS.

QuizControllerの設定
QuizControllerは、次の質問に移動するマスターのためのメソッドを提供します.QuizHub自体は別として、我々はまた、コントローラ内のすべてのリスニングクライアントにイベントを送信することができます.そのためには、依存関係のインジェクションを介してQuizHubからIHUBContextのインスタンスを取得する必要があります.

public QuizController(IHubContext<QuizHub> hubContext)
{
    _hubContext = hubContext;
}

このiHuContextがあれば、QuizHubで同じ方法を呼び出して新しい質問をすることができます.

[HttpGet("Next")]
public async Task NextQuestion()
{
    var question = await this.repository.GetNextQuestion();
    await _hubContext.Clients.All.SendAsync("GoToQuestion", question);
}

そして、それは我々が物事のバックエンド側から必要であるすべてです.フロントエンドに移りましょう.

角度アプリケーションの作成
新しいVisual Studioのコードを開き、ng new QuizzerFrontendを入力し、新しい角度設定を取得します.つのコンポーネントを作成する必要があります.クライアントがクイズマスターまたは候補とQuizmasterComponentとQuizCandidateComponentそれらのそれぞれの場合は選択する1つのhomecomponent.これらのコンポーネントの詳細については、Githubのソースコードを参照してください.
また、クイズが必要です.サービスtsバックエンドと対話して、我々のQuizControllerによって提供される終点を呼び出します.ここではAPIコールを実装します:

nextQuestion(): Subscription {
  return this.http
    .get(this.url + 'Next')
    .pipe(catchError(this.handleError)).subscribe();
}

フロントエンドにおけるSignalr通信の実装
すぐに面白いパーツに急ぎましょう!新しいサービスsignalrを作成します.サービスsignalrを通してすべてのコミュニケーションを管理するts.そうするためには、npm install @microsoft/signalrを実行してsignalrパッケージをインストールする必要があります.
このパッケージからHubConnectionBuilderを使用してHubConnectionを作成します.

private buildConnection(): HubConnection {
  return new HubConnectionBuilder()
    .withUrl(this.url)
    .withAutomaticReconnect()
    .build();
}

URLはこの場合バックエンドURLです.そこで、我々はQuizHubを起動時に初期設定しました.すなわち、https://localhost:44375/hub/ .それが完了したら、イベントに登録する必要があります.

private registerOnServerEvents(): void {
  this.hubConnection.on('GoToQuestion', (question: any) => {
    this.questionReceived$.next(question);
  });

  this.hubConnection.on('GuessMade', (player: string, guess: string) => {
    this.guessMade$.next({ player, guess });
  });

  this.hubConnection.on('PlayerNameSet', (playerName: string) => {
    this.setPlayerName$.next(playerName);
  });
}

最後に、私たちのHubConnectionインスタンスにstart()を呼び出して接続を開始する必要があります.SignalRServiceはコンポーネントで使用されます.そして、それはsignalrハブによって送られたイベントを収容する主題に彼らの行動をします.
そしてこれはすべて、我々はクイズのマスターと候補者が対話できるようにクロスクライアントのコミュニケーションとQuizzerアプリを作成している!
Just download the source code and try it out!
この記事は最初にhttps://from-scratch.deで出版された.