残りのサービスをGRPCウェブと交換する10ステップ

最新のWebアプリケーションでは、クライアントとサーバー間で共通の方法データを交換するREST (representational state transfer) services . JSON この双方向通信の標準ファイル形式です.
RESTで、クライアントは特定の終点への要求をします、そして、サーバーはそれに応じます.
この建築様式は細かく働き、数年間の基準である.スパ(シングルページアプリケーション)を作成するためのすべてのWebフレームワークは、それに基づいています.一見しても、Blaelor WebSsemblyは他のフレームワークと同じようにRESTを使うようです.
この規格の広い使用にもかかわらず、考慮するいくつかの重要な問題があります

JSONがXMLより冗長であるというのが本当であるならば、それが帯域幅のために最適化されないということはまた、本当です.時々、JSON構造はあまりに複雑になります.

残りのAPIは無国籍です.これはいくつかの負の結果を持つことができます例えば、すべての要求は、望ましい操作を実行するためにすべての必要な情報を含まなければなりません.

RESTはプロトコルではなく、建築スタイルです.これは、開発者の責任を高めることが含まれます.RESTのほとんどの実装はその原理の一部を使用しますが、多少は動作します.多くの場合、休憩サービスとRESTfulサービス(休息サービスを実装する)の間に混乱があります.

明確に言えば、RESTアーキテクチャはクライアントとサーバの間でデータを交換するのに最適な方法です.

GRPCとGRPCウェブとは

gRPC は2015年にGoogleで作成されたリモートプロシージャコールシステムです.これはオープンソースでありWindows Communication Foundation (WCF) . しかし、最新の更新プログラムのおかげで、また、残りのAPIを置き換えることができます.
GRPC用途Protobuf ペイロードのフォーマットとして(プロトコルバッファ)

サーバ側ストリーミング

クライアント側ストリーミング

双方向ストリーミング

パフォーマンスの観点から、Protobufは効率的なバイナリメッセージ形式です.Protobufシリアル化は小さなメッセージペイロードをもたらします.そして、それはモバイルとウェブアプリのような限られた帯域幅シナリオで重要です.
GRPCは、サービスとメッセージの契約を.proto file サーバーとクライアント間で共有.これは、自動的にクライアントライブラリを生成することができます.GRPCはプラットホームと実装の間で一貫しています.
The following 表は、GSOCとJSON形式のREST APIの間の特徴の比較を示します.

この音はすごいね.残念ながら、悪いニュースです!
それがHTTP/2バイナリプロトコルを必要とするので、GRPCはウェブブラウザの中から使用することができません.この問題の解決策を心配しないでくださいgRPC-Web , これは、ブラウザで使用可能なGRPCになります.の実装もありますgRPC-Web for .NET それは公式にリリースされました.
公平にgRPC-Web 限られたGRPCサポートを提供します.例えば、クライアントと双方向のストリーミングはサポートされていないし、サーバーのストリーミングにも制限があります.
この前文の後、それは理論から実践への時間です!
このポストでは、どのように天気予報アプリケーションを構築するBlazor WebSassMableアプリ内からGRPCのWebサービスを消費する方法を示します.書き込みの時点で、まだこれのためのネイティブのプロジェクトテンプレートがないので、Blaelor webassemblyアプリにGRPCのサポートを追加すると、多少重要なタスクです.しかし、再び心配しないでください.この部分は複雑ではない.それはわずか10小さなステップです!
ステップ1
Blatherまたはwebassembly ASPを作成します.NETコアホストのソリューション、および名前はBlazorgrpc.次のスクリーンショットを参照してください.
ステップ2
これらは依存関係を追加するプロジェクトファイルに必要な変更点です.
BlazorgrPC共用.産総研

<ItemGroup>
  <None Remove="weatherforecast.proto" />
</ItemGroup>

<ItemGroup>
  <PackageReference Include="Google.Protobuf" Version="3.13.0" />
  <PackageReference Include="Grpc.Net.Client" Version="2.31.0" />
  <PackageReference Include="Grpc.Tools" Version="2.31.0">
    <PrivateAssets>all</PrivateAssets>
    <IncludeAssets>runtime; build; native; contentfiles; analyzers; buildtransitive</IncludeAssets>
  </PackageReference>
</ItemGroup>

<ItemGroup>
  <Protobuf Include="weatherforecast.proto" />
</ItemGroup>

BlazorgrPCサーバ.産総研

<PackageReference Include=”Grpc.AspNetCore” Version=”2.31.0” />
<PackageReference Include=”Grpc.AspNetCore.Web” Version=”2.31.0” />

BlazorgrPCクライアント.産総研

<PackageReference Include="Grpc.Net.Client.Web" Version="2.31.0" />

ステップ3
共有プロジェクトでは、WeatherDevelopmentを作成します.以下のコード例のようなprotoファイル.

syntax = "proto3";

import "google/protobuf/empty.proto";
import "google/protobuf/timestamp.proto";

option csharp_namespace = "BlazorGrpc.Shared";

package WeatherForecast;

service WeatherForecastService {
  rpc GetWeatherForecast (google.protobuf.Empty) returns (WeatherForecastResponse);
}

message WeatherForecastResponse {
  repeated WeatherForecast forecasts = 1;
}

message WeatherForecast {
  google.protobuf.Timestamp dateTimeStamp = 1;
  int32 temperatureC = 2;
  string summary = 3;
}

.proto fileサービスを正しく定義する必要があります.
このファイルの構文についてもっと知りたい場合は、このドキュメントを参照してください.
https://developers.google.com/protocol-buffers/docs/proto3
ステップ4
ファイルのプロパティに移動し、ビルドアクションとしてProtobufコンパイラを選択します.新しいウィンドウがnugetパッケージgrpcのおかげで表示されます.ツール次に、GRPC Stubクラスとしてクライアントとサーバーオプションを選択します.次のスクリーンショットを参照してください.
ステップ5
部分的なクラスを修正します.このクラスの主なプロパティが. NET Frameworkから生成されることに注意してください.protoファイル;ただし、この部分クラスにいくつかの余分な便利なプロパティを追加することもできます.

using System;
using Google.Protobuf.WellKnownTypes;
namespace Blazorgrpc.Shared
{
    public partial class WeatherForecast
    {
        public DateTime Date
        {
            get => DateTimeStamp.ToDateTime();
            set { DateTimeStamp = Timestamp.FromDateTime(value.ToUniversalTime()); }
        }

        public int TemperatureF => 32 + (int)(TemperatureC / 0.5556);
    }
}

ステップ6
サーバープロジェクトで、コンテナにGRPCサービスを追加します.起動時に.このファイルを追加することで、ConfigureServicesメソッドを変更します

services.AddGrpc();

パフォーマンスを最適化するには、次のコードを追加することで応答圧縮を利用することをお勧めします.

services.AddResponseCompression(opts =>
            {
                opts.MimeTypes = ResponseCompressionDefaults.MimeTypes.Concat(
                    new[] { "application/octet-stream" });
            });

ステップ7
さて、サービスクラスでアプリケーションのロジックを実装し、コンテナに追加し、テンプレートによって生成されたコントローラを変更するために使用します.サービスクラスは以下のコードのようになります.

public class WeatherForecastService : 
 BlazorGrpc.Shared.WeatherForecastService.WeatherForecastServiceBase  

{
        private static readonly string[] Summaries = new[]
        {
            "Freezing", "Bracing", "Chilly", "Cool", "Mild", "Warm", "Balmy", "Hot", "Sweltering", "Scorching"
        };

        public override Task<WeatherForecastResponse> GetWeatherForecast(Empty request, ServerCallContext context)
        {
            var response = new WeatherForecastResponse();

            response.Forecasts.AddRange(GetWeatherForecast());

            return Task.FromResult<WeatherForecastResponse>(response);
        }

        public IEnumerable<WeatherForecast> GetWeatherForecast()
        {
            var rng = new Random();
            return Enumerable.Range(1, 365).Select(index => new WeatherForecast
            {
                Date = DateTime.Now.AddDays(index),
                TemperatureC = rng.Next(-20, 55),
                Summary = Summaries[rng.Next(Summaries.Length)]
            });
        }
}

注意: WeatherDetaServiceクラスは、BlazRorgrPCから継承されます.共用.天気予報サービス.から自動的に生成されます.protoファイル.
ステップ8
スタートアップに戻ってください.次のコードに示すように、構成メソッドのGRPC Webミドルウェアを構成するCSファイルを使用すると、すべてのサービスが既定でGRPC Webをサポートします.

app.UseGrpcWeb(new GrpcWebOptions { DefaultEnabled = true });

次に、次のコードを使用してルートを追加します.

app.UseEndpoints(endpoints =>
      {
       endpoints.MapGrpcService<WeatherForecastService>();
      }

ステップ9
クライアントプロジェクトに移りましょう.まず、WeatherRadiastServiceをコンテナに追加し、バックエンドサーバーを指すGRPC Webチャネルを作成し、このチャネルのGRPCクライアントをインスタンス化します.
プログラムを変更するには、次のコードを参照してください.必要な名前空間を追加する必要があるCSファイル.

builder.Services. AddSingleton(services =>
            {
                var httpClient = new HttpClient(new GrpcWebHandler(GrpcWebMode.GrpcWeb, new HttpClientHandler()));
                var backendUrl = services.GetRequiredService<NavigationManager>().BaseUri;
                var channel = GrpcChannel.ForAddress(backendUrl, new GrpcChannelOptions { HttpClient = httpClient });

                return new WeatherForecastService.WeatherForecastServiceClient(channel);
});

注意: WeatherDetaService.WeatherDeveServiceClientクラスも自動的に生成されます.protoファイル.
ステップ10
最後にfetchDataGPCを追加します.ファイルを取得し、fetchDataにいくつかの小さな変更を行います.RazorとNavMenu.かみそりファイル.ざっと輸入を変更することを忘れないでください.かみそりのファイルも.
次のコードを参照してください.

@page "/fetchdatagrpc"
@inject WeatherForecastService.WeatherForecastServiceClient WeatherForecastServiceClient
@using Blazorgrpc.Shared
@using Google.Protobuf.WellKnownTypes
<h1>Weather forecast</h1>

<p>This component demonstrates fetching data from the gRPC service.</p>

@if (forecasts == null)
{
    <p><em>Loading...</em></p>
}
else
{
    <table class="table">
        <thead>
            <tr>
                <th>Date</th>
                <th>Temp. (C)</th>
                <th>Temp. (F)</th>
                <th>Summary</th>
            </tr>
        </thead>
        <tbody>
            @foreach (var forecast in forecasts)
            {
                <tr>
                    <td>@forecast.Date.ToShortDateString()</td>
                    <td>@forecast.TemperatureC</td>
                    <td>@forecast.TemperatureF</td>
                    <td>@forecast.Summary</td>
                </tr>
            }
        </tbody>
    </table>
}

@code {

    private IList<WeatherForecast> forecasts;

    protected override async Task OnInitializedAsync()
    {
        forecasts = (await WeatherForecastServiceClient.GetWeatherForecastAsync(new Empty())).Forecasts;
    }
}

それはすべての人々です!現在、我々は我々の仕事をテストするのを楽しむことができます.上記のコード例を実装した後に、次のスクリーンショットのような結果が得られます.
両方のページが同じデータを返すことがわかりますが、残りは残りのサービスを消費します.
すべてをテストして、本当の利点を見るためにネットワークトラフィックを調べてください.
ネットワークトラフィック比較
上のスクリーンショットで、残りのサービスが55.6 KBを送ったのを見ることができます、しかし、GRPCサービスは10.1 KBだけを送りました!

リソース

変換されたプロジェクトはGitHub repository .

結論

この記事では、BlaberWebSempleホストアプリケーションでGRPCサービスを作成する方法と、このソリューションがどのようにパフォーマンスを向上させるかを見ました.これは限られた帯域幅シナリオで役に立つでしょう、そして、確かにデータ転送操作を速めます.
自分でそれを試して、下記のコメントセクションであなたのフィードバックを残す!
Syncfusion Essential Studio for Blazor 単一のパッケージで、ファイル形式ライブラリを含むWeb用の65 +高性能、軽量、応答性UIコンポーネントを提供します.我々のライブデモを見てくださいsample browser 経験のために.
既存の顧客については、最新バージョンはLicense and Downloads ページ.まだSyncFusionの顧客でない場合は、私たちの30日を試すことができますfree trial 利用可能な機能をチェックアウトします.また、私たちのサンプルを試してみることができますGitHub ロケーション.
また、我々を介してお問い合わせすることができますsupport forums , Direct-Trac , or feedback portal . 我々は常にあなたを支援して満足している!
この投稿が好きなら、次のようになります.

〔ブログ〕

〔ブログ〕

[ Webinarショーノート]

Blazor Succintly ［電子ブック］