.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");
                });
            });
        }
  1. 创建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文件放置的目录>
    
  1. 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);
      }
    });
  }
}

你可能感兴趣的:(.net core 3.1 Angular gRPC)