protoc-gen-grpc-web使用

anchovy

grpc-web说明文档:https://www.npmjs.com/package...

gRPC 最初由谷歌开发,是一个高性能远程过程调用框架,基于 HTTP/2 实现。但由于浏览器没有直接暴露 HTTP/2,所以 Web 应用程序不能直接使用 gRPC。gRPC- Web 是一个标准化协议,它解决了这个问题,可以在浏览器中使用 gRPC。

protoc-gen-grpc-web是用来生成web js文件的工具

下地地址:https://github.com/grpc/grpc-...

选择:protoc-gen-grpc-web-1.2.0-windows-x86_64.exe 即可

下载完成后改名并移动到项目里,示例是和存放proto文件一起的

protoc-gen-grpc-web依赖protoc,所以还需要下载protoc.exe执行程序,下载地址:https://github.com/protocolbu...

选择:protoc-3.12.4-win64.zip,下载安装完成后需要将bin目录添加到环境变量中,然后执行命令

> protoc --version
libprotoc 3.12.4

以上准备好后,再进入到存放proto文件目录,执行以下代码

> protoc -I=./ ./HelloWorld.proto --js_out=import_style=commonjs:./ --plugin=protoc-gen-grpc=./protoc-gen-grpc-web.exe  --grpc-web_out=import_style=commonjs,mode=grpcwebtext:./

会生成以下两个文件:

HelloWorld_pb.js
HelloWorld_grpc_web_pb.js

在使用的时候还需要npm安装grpc-web

> cnpm i grpc-web -S

具体如何使用,请看上面的grpc-web说明文档

HelloWorld.proto文件

syntax = "proto3";

option java_package = "ex.grpc";
option objc_class_prefix = "HSW";

package helloworld;


service Greeter {
  rpc sayHello (HelloRequest) returns (HelloReply) {}

  rpc printAge (printAgeRequest) returns (printAgeReply) {}
}

message HelloRequest {
  string name = 1;
  string city = 2;
}

message HelloReply {
  string message = 1;
}

message printAgeRequest {
  string age = 1;
}

message printAgeReply {
  string text = 1;
}

在vue中使用

import {
  GreeterClient
} from '@/assets/protos/HelloWorld_grpc_web_pb.js';
import { HelloRequest } from '@/assets/protos/HelloWorld_pb.js';

const client = new GreeterClient('http://127.0.0.1:50051');

const helloRequest = new HelloRequest();
helloRequest.setCity('北京');
 
const metadata = {"Content-Type": "application/grpc-web+proto"};
 
client.sayHello(helloRequest, metadata, (err, response) => {
  console.log(err, response);
});

欢迎关注:http://www.fenxianglu.cn

参考链接:

阅读 4.6k
1.9k 声望
81 粉丝
0 条评论
1.9k 声望
81 粉丝
文章目录
宣传栏