vue2通过grpc调用服务

安装protoc工具

  • 首先下载protoc工具（我这里是C#语言，windows10 64bit 系统），下载地址 https://github.com/protocolbuffers/protobuf/releases/

  • 解压缩下载好的安装包；
  • 把protoc所在的bin文件夹全路径配置到环境变量中即可；windows如何配置环境变量请查资料；
  • 配置好环境变量后就可以在终端执行protoc --version命令查看版本信息；

编写.proto文件

syntax = "proto3";

option csharp_namespace = "GrpcServer";

package greet;

// 这里可以写服务注释
service Greeter{
// 这里可以写方法注释
rpc SayHello (HelloRequest) returns (HelloReply);
}

//请求对象
message HelloRequest {
string name = 1;
}

//返回对象
message HelloReply {
string message = 1;
}

下载protoc-gen-grpc-web工具

  • 下载完成后改名为protoc-gen-grpc-web.exe并移动到vue项目里，和proto文件存放在同一目录下
  • 进入到proto文件所在目录的cmd执行命令

  • 进入到proto文件所在目录的cmd执行命令
    protoc -I=./ ./greet.proto --js_out=import_style=commonjs:./ --plugin=protoc-gen-grpc=./protoc-gen-grpc-web.exe --grpc-web_out=import_style=commonjs,mode=grpcwebtext:./
    该命令是将greet.proto文件生成js文件

    vue调用代码

     1 <template>
 2   <div id="app">
 3     <img alt="Vue logo" src="./assets/logo.png">
 4     <HelloWorld msg="Welcome to Your Vue.js App"/>
 5   </div>
 6 </template>
 7 
 8 <script>
 9 import HelloWorld from './components/HelloWorld.vue'
10 //声明导入grpc服务的js文件
11 import  grpcParam from './proto/greet_pb'
12 import   grpcClient from './proto/greet_grpc_web_pb'
13 // 这里直接用的grpc端口没有用代理服务器
14 var client = new grpcClient.GreeterClient('https://localhost:7057',
15     null, null);
16 //设置grpc参数HelloRequest的值
17 var request = new grpcParam.HelloRequest();
18 request.setName('World');
19 //调用grpc方法sayHello
20 client.sayHello(request, {}, (err, response) => {
21     console.log(response);
22 });
23 
24 export default {
25   name: 'App',
26   components: {
27     HelloWorld
28   }
29 }
30 </script>
31 
32 <style>
33 #app {
34   font-family: Avenir, Helvetica, Arial, sans-serif;
35   -webkit-font-smoothing: antialiased;
36   -moz-osx-font-smoothing: grayscale;
37   text-align: center;
38   color: #2c3e50;
39   margin-top: 60px;
40 }
41 </style>

    Grpc启动代码

 1 var builder = WebApplication.CreateBuilder(args);   //net7.0  没有主函数
 2 //简单设置跨域 
 3 builder.Services.AddCors(o => o.AddPolicy("AllowAll", builder =>
 4 {
 5     builder.AllowAnyOrigin()
 6            .AllowAnyMethod()
 7            .AllowAnyHeader()
 8            .WithExposedHeaders("Grpc-Status", "Grpc-Message", "Grpc-Encoding", "Grpc-Accept-Encoding");
 9 }));
10 // Additional configuration is required to successfully run gRPC on macOS.
11 // For instructions on how to configure Kestrel and gRPC clients on macOS, visit https://go.microsoft.com/fwlink/?linkid=2099682
12 
13 // Add services to the container.
14 builder.Services.AddGrpc();
15 
16 var app = builder.Build();
17 
18 // Configure the HTTP request pipeline.
19 
20 app.MapGrpcService<GreeterService>().EnableGrpcWeb();//EnableGrpcWeb不加415异常
21 
22 app.MapGet("/", () => "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");
23 
24 app.UseGrpcWeb();//不加415异常
25 //简单设置跨域 
26 app.UseCors("AllowAll");
27 app.Run();

Grpc服务代码

1       //返回请求参数
2         public override Task<HelloReply> SayHello(HelloRequest request, ServerCallContext context)
3         {
4             string ret = request.Name;
5             return Task.FromResult(new HelloReply
6             {
7                 Message = ret
8             }) ; 
9         }

 

参考地址：https://blog.csdn.net/m0_57042151/article/details/129436907

                  https://blog.csdn.net/weixin_44134588/article/details/124857743

                  https://zhuanlan.zhihu.com/p/614638977

                  https://zhuanlan.zhihu.com/p/382932862

                  https://52javascript.com/article/20

                  https://blog.csdn.net/ting2909/article/details/116642155

　　　　　https://juejin.cn/post/7034051175284473870/

 

posted @ 2023-07-25 14:16  Fast & Furious  阅读(651)  评论(0)    收藏  举报