.net core3.1 Angular gRPC

.net core & Angular => gRPC

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

  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<GreeterService>().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文件
    • 编译的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文件所在目录(使用绝对路径)> <编译的文件.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);
      }
    });
  }
}

更多可以参考:
Angular 项目
.net core 项目

posted @   PeachLin  阅读(434)  评论(0编辑  收藏  举报
编辑推荐:
· go语言实现终端里的倒计时
· 如何编写易于单元测试的代码
· 10年+ .NET Coder 心语,封装的思维:从隐藏、稳定开始理解其本质意义
· .NET Core 中如何实现缓存的预热?
· 从 HTTP 原因短语缺失研究 HTTP/2 和 HTTP/3 的设计差异
阅读排行:
· 周边上新:园子的第一款马克杯温暖上架
· Open-Sora 2.0 重磅开源!
· 分享 3 个 .NET 开源的文件压缩处理库,助力快速实现文件压缩解压功能!
· Ollama——大语言模型本地部署的极速利器
· DeepSeek如何颠覆传统软件测试?测试工程师会被淘汰吗?
点击右上角即可分享
微信分享提示