第一个gRPC-web项目

Posted F3nGaoXS

tags:

篇首语:本文由小常识网(cha138.com)小编为大家整理,主要介绍了第一个gRPC-web项目相关的知识,希望对你有一定的参考价值。

第一个gRPC-web项目

1、什么是gRPC-web?

简单来说,gRPC-web就是gRPC的javascript版本的client实现

2、gRPC-web工作流程

由于浏览器的特性,gRPC-web其实没办法直接向gRPC-server发送HTTP/2请求的,只有通过envoy代理,将来自gRPC-web的HTTP/1的请求转换为gRPC-server能够接收的HTTP/2请求

3、安装gRPC-web相关依赖

在使用下列命令前确保开发环境已经安装node

全局安装protoc-gen-grpc-web插件

npm i protoc-gen-grpc-web -g			#全局安装

在web项目中安装(确保项目使用npm init -y初始化)

npm i protobufjs
npm i grpc-web

4、编写proto文件

编写proto文件,并且通过插件将proto文件编译为js文件

syntax = "proto3";      //语法版本

package pb;

option go_package = "./;pb";    //生成的go文件的包名

message HelloRequest 
  string name = 1;


message HelloResponse 
  string message = 1;


//一个 rpc 服务通过参数和返回类型来指定可以远程调用的方法
service Hello 
  // rpc 定义可远程调用服务
  rpc HelloWorld (HelloRequest) returns (HelloResponse) 

利用插件将proto文件编译为js文件

protoc --proto_path=proto proto/*proto \\
    --js_out=import_style=commonjs:./pb \\
    --grpc-web_out=import_style=commonjs,mode=grpcwebtext:./pb

语义:

--proto_path指proto文件所在的目录

--js_out=import_style=commonjs:./pb指利用commonjs将编译后的js文件存放在./pb目录中

--grpc-web_out=import_style=commonjs,mode=grpcwebtext:./pb指利用commonjs将编译后的grpc-web的js文件存放在./pb目录,并且模式是grpcwebtext

同样的,也可以添加到Makefile中

gen:
	protoc --proto_path=proto proto/*proto \\
    --js_out=import_style=commonjs:./pb \\
    --grpc-web_out=import_style=commonjs,mode=grpcwebtext:./pb

clean:
	rm pb/*.js
	

5、启用客户端

// 从pb中拿到request和response
import HelloRequest,HelloResponse from './pb/hello_pb.js'
// 从grpc_web_pb中拿到client
import HelloClient from './pb/hello_grpc_web_pb.js'


// 获得client
const client = new HelloClient('http://localhost:9001');

// 构建request
let request = new HelloRequest();
request.setName('World!');

// 利用request发起请求,得到response响应
// 其中response包含在一个回调函数当中
client.helloWorld(request, , (err,response) => 
  if (err)   //获得response失败
    console.log('response err ',err)
   else  // 获得response成功
    console.log('receive from server: ',response)
  
)

可以发现,和gRPC-client的go的实现的步骤是差不多的,1、从生成的文件中获得client,然后利用client执行service中的方法,最后获得response。

5、已知缺点

只支持server往client发送消息流,其余方式的信息流不支持

6、envoy代理

envoy是一个代理服务,类似于nginx

gRPC-web目前支持HTTP/1.0和HTTP/1.1,但是gRPC请求要求的协议是HTTP2,所以gRPC-web发送过来的请求无法直接被gRPC-server(服务端)接受,所以需要使用envoy做一次代理转换,将来自gRPC-web的请求HTTP/1请求转换为gRPC-server能使用的HTTP/2请求。

以上是关于第一个gRPC-web项目的主要内容,如果未能解决你的问题,请参考以下文章

第一个gRPC-web项目

微软发布gRPC-Web实现,可直接在浏览器端调用gRPC服务

gRPC-Web迈向GA

一个新实验:使用gRPC-Web从浏览器调用.NET gRPC服务

如何使用 grpc-web 构建 react-redux 应用程序?

gRPC-Web正式发布