.net core 3.1 Angular gRPC

.net core & Angular => gRPC

更多可以参考：

Angular 项目

.net core 项目

官方文档 https://docs.microsoft.com/zh-cn/aspnet/core/grpc/browser?view=aspnetcore-3.1

只是测试连接成功了，数据处理什么的都没有做

1. 直接使用vs 2019 创建 grpc 项目

• nuget 安装Grpc.AspNetCore.Web（测试版本：2.27.0-pre1） （测试时还不是正式版）
• 修改代码 Startup.cs

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

            services.AddGrpc();
        }

        public void Configure(IApplicationBuilder app, IWebHostEnvironment env)
        {
            if (env.IsDevelopment())
            {
                app.UseDeveloperExceptionPage();
            }
            
            app.UseRouting();
            
            app.UseCors("MyPolicy");

            app.UseGrpcWeb();

            app.UseEndpoints(endpoints =>
            {

                endpoints.MapGrpcService().EnableGrpcWeb(); // EnableGrpcWeb() 需要这个方法 依赖于库 Grpc.AspNetCore.Web （测试版本：2.27.0-pre1）

                endpoints.MapGet("/", async context =>
                {
                    await context.Response.WriteAsync("Communication with gRPC endpoints must be made through a gRPC client. To learn how to create a client, visit: https://go.microsoft.com/fwlink/?linkid=2086909");
                });
            });
        }

2. 创建angular项目

• 需要依赖库
  • ts-protoc-gen
  • google-protobuf
  • @types/google-protobuf
  • @improbable-eng/grpc-web

  yarn add ts-protoc-gen google-protobuf @types/google-protobuf @improbable-eng/grpc-web
  

• 编译proto文件
  • protoc 命令 https://github.com/protocolbuffers/protobuf/releases
    • 下载解压把bin目录添加到系统环境变量
  • 编译的js和ts文件放到同一个目录下
  • protoc -I=I:/Protos greet.proto --plugin=./node_modules/.bin/protoc-gen-ts.cmd --js_out=import_style=commonjs,binary:src/app/proto --ts_out=service=grpc-web:src/app/proto

    protoc -I= <编译的文件.proto>  --plugin=./node_modules/.bin/protoc-gen-ts.cmd --js_out=import_style=commonjs,binary:<编译成的js文件放置的目录> --ts_out=service=grpc-web:<编译成的ts文件放置的目录>
  

3. app.component.ts

import { Component, OnInit } from '@angular/core';
import { grpc } from '@improbable-eng/grpc-web';

import { Greeter } from './proto/greet_pb_service';
import { HelloRequest } from './proto/greet_pb';

@Component({
  selector: 'app-root',
  templateUrl: './app.component.html',
  styleUrls: ['./app.component.less']
})
export class AppComponent implements OnInit {
  title = 'ng-web';

  ngOnInit() {
    const getBookRequest = new HelloRequest();
    grpc.unary(Greeter.SayHello, {
      request: getBookRequest,
      host: 'https://localhost:5001',
      onEnd: res => {
        console.log(res);
      }
    });
  }
}