一,proto协议编译js文件
hello.proto文件
1 syntax = "proto3"; 2 3 package api; 4 5 // 这里可以写服务注释 6 service HelloWorldService { 7 // 这里可以写方法注释 8 rpc SayHello (HelloRequest) returns (HelloResponse) {} 9 } 10 11 // 这里可以写请求结构注释 12 message HelloRequest { 13 // 这里可以写参数注释 14 string name = 1; 15 } 16 17 // 这里可以写响应结构注释 18 message HelloResponse { 19 // 这里可以写参数注释 20 string message = 1; 21 }
环境准备
cd /home/shimon/pkg # 将下载后的内容移动到bin路径中方便使用 mv protoc-gen-grpc-web-1.4.1-linux-x86_64 /usr/local/bin/protoc-gen-grpc-web # 增加可执行权限 chmod +x /usr/local/bin/protoc-gen-grpc-web # 根据hello.proto生成js调用文件 protoc hello.proto --js_out=import_style=commonjs:./output --grpc-web_out=import_style=commonjs,mode=grpcweb:./output
二,前端调用grpc服务
a.将hello_grpc_web_pb.js和hello_pb.js移到前端pb目录下
b.项目安装依赖yarn add google-protobuf grpc-web
c.调用代码:
import { HelloRequest } from './pb/hello_pb'; import { HelloWorldServiceClient } from './pb/hello_grpc_web_pb'; // 注意这个端口是代理服务器的端口,不是grpc的端口 const client = new HelloWorldServiceClient('http://localhost:8199', null, null); const request = new HelloRequest(); request.setName('World'); client.sayHello(request, {}, (err, response) => { console.log(response.getMessage()); });
三,代理请求
由于浏览器的特性,gRPC-web其实没办法直接向gRPC-server发送HTTP/2请求的,只有通过nginx/envoy代理,将来自gRPC-web的HTTP/1的请求转换为gRPC-server能够接收的HTTP/2请求
grpc.proxy.conf
server { listen 8199; server_name _; access_log /tmp/grpc.log; error_log /tmp/grpc.log debug; location ~ \.(html|js)$ { root /var/www/html; } location / { # 重点!!需要将Content-Type更改为 application/grpc # grpc-web过来的是application/grpc-web+proto || application/grpc-web+text (取决于生成js代码时grpc-web_out 的mode选项,本文用grpcweb 则为application/grpc-web+proto) grpc_set_header Content-Type application/grpc; grpc_pass localhost:9999; # 因浏览器有跨域限制,这里直接在nginx支持跨域 if ($request_method = 'OPTIONS') { add_header 'Access-Control-Allow-Origin' '*'; add_header 'Access-Control-Allow-Methods' 'GET, POST, OPTIONS'; add_header 'Access-Control-Allow-Headers' 'DNT,X-CustomHeader,Keep-Alive,User-Agent,X-Requested-With,If-Modified-Since,Cache-Control,Content-Type,Content-Transfer-Encoding,Custom-Header-1,X-Accept-Content-Transfer-Encoding,X-Accept-Response-Streaming,X-User-Agent,X-Grpc-Web'; add_header 'Access-Control-Max-Age' 1728000; add_header 'Content-Type' 'text/plain charset=UTF-8'; add_header 'Content-Length' 0; return 204; } if ($request_method = 'POST') { add_header 'Access-Control-Allow-Origin' '*'; add_header 'Access-Control-Allow-Methods' 'GET, POST, OPTIONS'; add_header 'Access-Control-Allow-Headers' 'DNT,X-CustomHeader,Keep-Alive,User-Agent,X-Requested-With,If-Modified-Since,Cache-Control,Content-Type,Content-Transfer-Encoding,Custom-Header-1,X-Accept-Content-Transfer-Encoding,X-Accept-Response-Streaming,X-User-Agent,X-Grpc-Web'; add_header 'Access-Control-Expose-Headers' 'Content-Transfer-Encoding, grpc-message,grpc-status'; } } }
原文地址:http://www.cnblogs.com/shi2310/p/16824071.html
1. 本站所有资源来源于用户上传和网络,如有侵权请邮件联系站长!
2. 分享目的仅供大家学习和交流,请务用于商业用途!
3. 如果你也有好源码或者教程,可以到用户中心发布,分享有积分奖励和额外收入!
4. 本站提供的源码、模板、插件等等其他资源,都不包含技术服务请大家谅解!
5. 如有链接无法下载、失效或广告,请联系管理员处理!
6. 本站资源售价只是赞助,收取费用仅维持本站的日常运营所需!
7. 如遇到加密压缩包,默认解压密码为"gltf",如遇到无法解压的请联系管理员!
8. 因为资源和程序源码均为可复制品,所以不支持任何理由的退款兑现,请斟酌后支付下载
声明:如果标题没有注明"已测试"或者"测试可用"等字样的资源源码均未经过站长测试.特别注意没有标注的源码不保证任何可用性