什么是 gRPC-web?
gRPC-web 是一个用于在网页和 Web 应用中使用 gRPC 服务的通用方法。 它是一个开源项目，由 Google 主导开发，现在已经为用户开源。
gRPC-web 与 gRPC 的区别
gRPC 是一个现代高性能的开源远程过程调用（RPC）框架。它可以生成不同语言的客户端和服务端代码。gRPC 特别适用于高并发、分布式系统。
gRPC-web 适用于浏览器和 Web 应用程序环境，通过使用 envoy 代理以将 HTTP/1.1 转换为 gRPC 的 HTTP/2 流。
如何使用 gRPC-web
步骤 1：安装 protobuf
gRPC 使用 protobuf 的消息格式。在 Node.js 环境中使用 protobuf，我们需要安装相应的 Node.js protobuf。
npm install protobufjs -g
步骤 2：编写 gRPC 服务描述文件
现在我们需要编写一个 gRPC 服务描述文件，以便后面使用该文件生成客户端和服务器代码。
例如，我们编写以下文件 proto/greeter.proto：
-- -------------------- ---- ------- ------ - --------- ------- ----------- ------- ------- - --- -------- -------------- ------- ------------ -- - ------- ------------ - ------ ---- - -- - ------- ---------- - ------ ------- - -- -展开代码
在这个文件中，我们定义了一个 Greeter 的服务，以及这个服务只有一个方法 SayHello。
在 message 中，我们定义了需要传递的参数，以及方法返回的结果。
步骤 3：生成 gRPC 客户端与服务器端代码
我们已经编写了一个服务描述文件，现在我们需要生成客户端和服务器代码。有很多不同的用于从 .proto 文件生成代码的工具，我们使用的是 grpc_tools_node_protoc 这个 npm 包。
在这个步骤中，我们将生成 gRPC 的客户端和服务器端代码。
要安装 grpc_tools_node_protoc 使用以下命令：
npm install grpc-tools -g
然后，进入到 .proto 文件所在的目录，执行以下命令：
grpc_tools_node_protoc --js_out=import_style=commonjs,binary:. --grpc_out=. --plugin=protoc-gen-grpc=`which grpc_tools_node_protoc_plugin` greeter.proto
以上命令会生成两个文件：
greeter_pb.js: 包含 protobuf 编译器生成的 JavaScript 代码。greeter_grpc_pb.js: 包含 gRPC 框架生成的 JavaScript 代码。
步骤 4：安装 grpc-web
npm install grpc-web
步骤 5：编写 web 应用代码
在编写 Web 应用前需要先引入必要的依赖：
<script src="https://cdn.jsdelivr.net/npm/protobufjs/dist/protobuf.js"></script> <script src="https://cdn.jsdelivr.net/npm/grpc-web/dist/grpc-web.js"></script> <script src="./js/greeter_pb.js"></script> <script src="./js/greeter_grpc_web_pb.js"></script>
在引入必要依赖后，我们就可以使用 gRPC-web 进行通信了。例如，我们可以使用以下代码进行客户端以及服务端的交互：
-- -------------------- ---- ------- --- -------------- - --- -------------------------------------------------- --- ---- - -------- --- ------- - --- -------------------------- ---------------------- -------------------------------- --- ----- --------- -- - -- ----- - ------------------- - ---- - ----------------------------------- - ---展开代码
首先就是实例述了一个客户端，搭配 http://localhost:8080 进行使用。之后需要传输的参数通过 request.setName(name) 指定，通过 greeterService.sayHello 方法与服务端进行交互，最后的参数 err，response 返回的是错误以及返回结果。
结语
本文简要地介绍了使用 npm 包 gRPC-Web，我们首先需要安装 protobuf，然后需要编写运行的服务描述文件，接下来生成监听代码。最后在应用Web页面中调用相应的方法，即可完成客户端与服务器端的交互。最后，我们需要注意 gRPC 和 gRPC-web 的区别，在不同纬度上应该选用不同产品。
以上就是本文介绍的内容，期望能够帮助到前端工程师。
来源：JavaScript中文网 ，转载请注明来源 https://www.javascriptcn.com/post/80504
