[C# gRPC] Blazor Server 앱 - gRPC Client 생성

목적

• 앞에서 ASP.NET Core gRPC Server 프로젝트를 생성하여 gRPC 전용 Server를 만들었습니다.
• 다음으로 Blazor Client를 하나 생성하여 gRPC Server 와 통신하는 Client 프로그램을 만들어 보도록 하겠습니다.

개발 환경

• 개발 환경은 다음과 같습니다.
  • OS : Windows 10
  • .NET Version : .NET 6
  • 개발도구 : Visual Studio 2022

Blazor Server 앱 프로젝트 생성

• Blazor gRPC Client 를 만들기 위해서는 Visual Studio 2022 실행합니다.
• 실행하여 Blazor Server 앱 프로젝트 하나를 선택하여 생성해줍니다.

gRPC NuGet 패키지 추가

• Blazor Server 앱을 생성 하였다면, gRPC 통신을 위하여 몇 가지 NuGet Package 를 설치해야 합니다.
• 총 3개의 NuGet Package 를 설치해 줍니다.
  • Grpc.Net.Client
  • Grpc.Tools
  • Google.ProtoBuf
• 위의 3개의 NuGet Package 항목을 설치해야 gRPC 관련 라이브러리들을 사용할 수 있습니다.

Protocol Buffer 추가

• gRPC Client 프로젝트에도 Server 와 동일한 Protocol Buffer 를 추가해야 합니다.
• Protos 폴더를 생성 후, greet.proto 파일을 추가합니다.
• greet.proto 파일 내용은 다음과 같습니다.
• charp_namespace 이름은 자유롭게 변경해 주어도 괜찮습니다.

syntax = "proto3";

option csharp_namespace = "BlazorClient";

package greet;

// The greeting service definition.
service Greeter {
  // Sends a greeting
  rpc SayHello (HelloRequest) returns (HelloReply);
}

// The request message containing the user's name.
message HelloRequest {
  string name = 1;
}

// The response message containing the greetings.
message HelloReply {
  string message = 1;
}

GrpcServices 이름 변경

• 앞서, greet.proto 프로토버퍼 파일을 추가하였습니다.
• 다음으로 BlazorClient.csproj 프로젝트 파일을 선택하여 GrpcServices 이름을 Client 로 변경합니다.

...생략

<ItemGroup>
  <Protobuf Include="..\ProtocolBuffer\Protos\greet.proto" GrpcServices="Client">
    <Link>Protos\greet.proto</Link>
  </Protobuf>
</ItemGroup>

Data 폴더에 GreeterServices.cs 추가

• GrpcServices 이름 변경이 완료 되었다면, 이제 gRPC Server 에게 메시지를 보낼 서비스를 생성합니다.
• Blazor Server 앱을 설치하게 되면, 기본으로 Data 폴더가 생성됩니다.
• Data 폴더에 GreeterService.cs 클래스를 추가하고, 다음과 같이 코드를 작성해 줍니다.

GreeterServices.cs

• 앞서 Server 에서도 SayHello 메서드가 있었습니다.
• Server 에서는 Client 가 보내는 메시지를 받아서 받은 메시지를 다시 반환해 주었습니다.
• Client 에서 SayHello 메시지는 gRPC Server 에게 메시지를 전달하는 역할을 합니다.
• HelloRequest 메서드를 통해 Client 는 Server 에서 메시지를 전달합니다.
• gRPC Server 가 정상적으로 메시지를 받게 되면, Client 는 다시 해당 메시지를 반환해줍니다.

using Grpc.Net.Client;

namespace BlazorClient.Data
{
    public class GreeterService
    {
        public async Task<string> SayHello(string name)
        {
            using var httpClientHandler = new HttpClientHandler
            {
                ServerCertificateCustomValidationCallback = HttpClientHandler.DangerousAcceptAnyServerCertificateValidator
            };

            using var httpClient = new HttpClient(httpClientHandler);
            using var channel = GrpcChannel.ForAddress("https://localhost:7005", new GrpcChannelOptions { HttpClient = httpClient });

            var client = new Greeter.GreeterClient(channel);
            var reply = await client.SayHelloAsync(
                    new HelloRequest { Name = name });

            return reply.Message;

        }
    }
}

Greeter 페이지 추가

• 다음으로는 Blazor Client UI 에 Greeter 페이지를 추가해줍니다.
• Greeter 페이지 추가는 Pages 폴더에 Greeter.razor 프로젝트를 추가합니다.
• 그리고 아래와 같이 소스코드를 작성해 줍니다.
• @code 부분에 Server로 부터 반환 받은 메시지를 출력해 주는 SayHello() 메서드를 작성하였습니다.

@page "/greeter"

<PageTitle>Weather forecast</PageTitle>

@using BlazorClient.Data
@inject GreeterService GreeterService

<h1>grpc Connection</h1>

<input type="text" @bind="@Name" />
<button @onclick="@SayHello">Say Hello</button>

<p role="status">@Greeting</p>

@code {
    string Name = string.Empty;

    string Greeting = string.Empty;

    async public void SayHello()
    {
        this.Greeting = await this.GreeterService.SayHello(this.Name);
    }
}

GreeterService 컨테이너 추가

• program.cs 에서 GreeterService 컨테이너를 추가합니다.

using BlazorClient.Data;

var builder = WebApplication.CreateBuilder(args);

// Add services to the container.
builder.Services.AddRazorPages();
builder.Services.AddServerSideBlazor();
builder.Services.AddSingleton<WeatherForecastService>();
builder.Services.AddSingleton<GreeterService>(); 

...생략....

실행 결과

• 코드 작성은 모두 완료 되었습니다.
• 실제로 Blazor Client를 실행하여 gRPC Server 로 메시지를 보내서 결과가 제대로 출력 되는지 확인 합니다.
• 실행 결과, 보낸 메시지를 gRPC Server 가 잘 받아서 다시 Client 로 보내서 출력 되는 것을 확인할 수 있습니다.