记angular和asp.net使用grpc进行通信

AspNetCore配置grpc服务端

新建一个Demo项目: GrpcStartup, 目录结构如下图:

GrpcStartup.GrpcServices需要安装下面的依赖

<PackageReference Include="Google.Protobuf" Version="3.14.0" />

<PackageReference Include="Grpc.AspNetCore" Version="2.34.0" />

<PackageReference Include="Grpc.AspNetCore.Web" Version="2.34.0" />

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

<PackageReference Include="Grpc.Tools" Version="2.34.0">

    <IncludeAssets>runtime; build; native; contentfiles; analyzers; buildtransitive</IncludeAssets>

    <PrivateAssets>all</PrivateAssets>

</PackageReference>

编写`protobuf`

DotnetVersionReply.proto

syntax = "proto3";

import "google/protobuf/any.proto";

option csharp_namespace = "GrpcStartup.GrpcServices";

message DotnetVersionReply {

  string version = 1;

  string environment = 2;

}

Greeter.proto

syntax = "proto3";

import "google/protobuf/any.proto";

import "Protos/DotnetVersionReply.proto";

service Greeter {

  rpc GetDotnetEnvironment(google.protobuf.Any) returns (DotnetVersionReply);

}

protobuf写好后, 需要再.csproj中引入对应的文件

<ItemGroup>

    <Protobuf Include=".\Protos\*.proto" GrpcServices="server" />

</ItemGroup>

接下来build项目, 会生成相关代码, 这个例子中会有个一个 Greeter.GreeterBase 的抽象类被生成, 我们需要继承它编写我们的业务代码

GreeterRpcService.cs

public class GreeterRpcService: Greeter.GreeterBase

{

    public override Task<DotnetVersionReply> GetDotnetEnvironment(Any request, ServerCallContext context)

    {

        string os = Environment.OSVersion.VersionString;

        string dotnetVersion = Environment.Version.ToString();

        return Task.FromResult(new DotnetVersionReply

        {

            Environment = os,

            Version = dotnetVersion

        });

    }

}

修改`Startup`类, 配置Grpc

Startup.ConfigureServices

services.AddGrpc();

// 允许grpc-web

services.AddCors(o => o.AddPolicy("AllowGrpc", builder =>

{

    builder.AllowAnyOrigin()

        .AllowAnyMethod()

        .AllowAnyHeader()

        .WithExposedHeaders("Grpc-Status", "Grpc-Message", "Grpc-Encoding", "Grpc-Accept-Encoding");

}));

Startup.Configure

app.UseRouting();

app.UseGrpcWeb(new GrpcWebOptions

{

    // 允许grpc-web

    DefaultEnabled = true

});

// 允许grpc-web

app.UseCors();

app.UseEndpoints(endpoints =>

{

    endpoints.MapGrpcService<GreeterRpcService>()

        .RequireCors("AllowGrpc");

    endpoints.MapRazorPages();

});

使用grpcui测试服务

grpcui是一个命令行工具, 运行它会打开一个网页, 下载链接

项目中支持grpcui需要配置一下

安装依赖: Grpc.AspNetCore.Server.Reflection

配置服务: services.AddGrpcReflection();

运行grpcui: C:\Users\laggage\Desktop\apps\grpcui_1.1.0_windows_x86_64> .\grpcui.exe localhost:5001

配置angular客户端

生成angular项目(略);

从protobuf文件生成js客户端代码

使用protoc命令生成typescript版本的客户端代码, 生成代码前, 需要先下载后 protoc.exe 和 protoc-gen-grpc-web 并将他们添加到环境变量下, 添加好后重启一下电脑让环境变量生效

C:\Users\laggage\Documents\coding\projects\GrpcStartup> protoc.exe -I. .\Greeter.proto --grpc-web_out=import_style=commonjs,mode=grpcwebtext:. --proto_path .

这个命令会生成3个文件

客户端代码

接下来编写客户端代码即可, 编写前需要先安装npm包

google-protobuf
grpc-web

然后写一个angular服务, 调用protobuf中定义的方法

greeter.service.ts

import { Injectable } from '@angular/core';

import { GreeterClient } from './GreeterServiceClientPb';

import { HelloRequest, DotnetVersionReplay } from './Greeter_pb';

import * as google_protobuf_any_pb from 'google-protobuf/google/protobuf/any_pb';

@Injectable({

  providedIn: 'root'

})

export class GreeterService {

  static greeterService = new GreeterClient('https://localhost:5001');

  constructor() {

  }

  getDotnetVersion() {

    GreeterService.greeterService.getDotnetEnvironment(new google_protobuf_any_pb.Any(), {}, (err, res: DotnetVersionReplay) => {

      const version = res.getVersion();

      const env = res.getEnvironment();

      console.log(err, res);

      console.log(`env: ${env}, version: ${version}`);

    });

  }

}

在AppComponent中注入这个服务并调用getDotnetVersion, 可以在浏览器控制台看到结果

巴特西

记angular和asp.net使用grpc进行通信

AspNetCore配置grpc服务端

编写`protobuf`

修改`Startup`类, 配置Grpc

使用grpcui测试服务

配置angular客户端

从protobuf文件生成js客户端代码

客户端代码

最新文章

热门文章

巴特西

记angular和asp.net使用grpc进行通信

AspNetCore配置grpc服务端

编写protobuf

修改Startup类, 配置Grpc

使用grpcui测试服务

配置angular客户端

从protobuf文件生成js客户端代码

客户端代码

最新文章

热门文章

编写`protobuf`

修改`Startup`类, 配置Grpc