在看这篇文章之前，先要做好前提工作
1、搭建一个gRPC服务：http://fenxianglu.cn/article/238
2、解析.proto文件为js文件：http://fenxianglu.cn/article/246
上面两步处理完成后，再搭建代理服务，不然前端是不能直连grpc服务的
一、安装启动
1、下载
下载地址：https://github.com/improbable-eng/grpc-web/releases/tag/v0.13.0
按操作系统选择，这里以 grpcwebproxy-v0.13.0-win64.exe.zip 为例
下载完成后把 grpcwebproxy.exe 放到项目根目录即可
2、启动
到存放 grpcwebproxy.exe 目录，打开命令行，执行以下命令
> grpcwebproxy --allow_all_origins --backend_addr=localhost:50051 --run_tls_server=false --server_http_debug_port=5005
time="2020-09-09T11:16:09+08:00" level=info msg="parsed scheme: \"\"" system=system
time="2020-09-09T11:16:09+08:00" level=info msg="scheme \"\" not registered, fallback to default scheme" system=system
time="2020-09-09T11:16:09+08:00" level=info msg="ccResolverWrapper: sending update to cc: {[{localhost:50051 0 <nil>}] }" system=system
这样服务就启动了。
grpcwebproxy 相应参数项：
| 参数 | 值 | 描述 |
|---|---|---|
| backend_addr | 127.0.0.1:50051 | 要代理的服务ip和端口 |
| run_tls_server | true或false | 是否开启tls_server，默认为true |
| server_http_debug_port | 5005 | http调试端口 |
| allow_all_origins | true或false | 是否允许跨域，默认false |
| use_websockets | true或false | 是否启用websockets，默认false |
| server_http_max_read_timeout | 10s | http服务最大读取超时 |
| server_http_max_write_timeout | 10s | http服务最大写入超时 |
| backend_max_call_recv_msg_size | 4 * 1024 * 1024 | 传输消息最大内容限制，默认4MB |
查看代理服务是否启动成功，直接访问：http://localhost:5005/
image.png
最后依据第2步解析.proto文件的介绍，在.vue script中使用
import {
GreeterClient
} from '@/assets/protos/HelloWorld_grpc_web_pb.js';
import { HelloRequest } from '@/assets/protos/HelloWorld_pb.js';
let client = new GreeterClient('http://localhost:5005');
let helloRequest = new HelloRequest();
helloRequest.setName('tom');
helloRequest.setCity('合肥');
client.sayHello(helloRequest, {}, (err, response) => {
console.log(err, response);
});
启动vue项目访问即可看到
image.png
网友评论