第一个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请求。