简介
gRPC 是一个高性能、开源的远程过程调用 (RPC) 框架，它可以跨越不同的编程语言和平台。通过 gRPC，我们可以定义基于协议缓冲区（Protocol Buffers）的服务，并使用它们进行双向流式通信。
虽然 gRPC 在服务器端得到了广泛的应用，但在客户端领域，特别是浏览器中的使用，还处于相对较新的探索阶段。本文将介绍如何在浏览器中使用 gRPC API，涵盖以下内容：
- 定义 gRPC 服务
- 利用 Protobuf.js 实现客户端
- 使用 Envoy 代理处理后端流量
- WebPack 打包及运行示例
定义 gRPC 服务
首先，我们需要定义一个 gRPC 服务。gRPC 的服务是通过 proto 文件定义的，它描述了服务接口的方法、输入和输出参数等信息，从而支持代码自动生成。
假设我们要定义一个简单的计算器服务，其 proto 文件名为 calculator.proto，内容如下：
-- -------------------- ---- ------- ------ - --------- ------- ----------- ------- ---------- - --- --- ------------ ------- ----------- - ------- ---------- - ----- - - -- ----- - - -- - ------- -------- - ----- --- - -- -
该服务定义了一个 Add 方法，它接收两个整数参数 a 和 b，返回它们的和 sum。
利用 Protobuf.js 实现客户端
在浏览器中使用 gRPC API 通常需要通过 JavaScript 或 TypeScript 构建客户端。Protobuf.js 是一种流行的 Protocol Buffers 库，它提供了在浏览器中序列化和反序列化数据的能力，同时还可以生成与 proto 文件兼容的 TypeScript 类型。
我们可以使用以下命令通过 npm 安装 Protobuf.js：
npm install protobufjs
接下来，我们可以编写一个简单的客户端，使用 Protobuf.js 序列化请求并发送给后端服务器：
-- -------------------- ---- -------
------ - ---- - ---- -------------
------ - -- ------- ---- -----------
----- --- - ------------------------ -- -------
----- ----------- - ------------------------ -- ---
----- ---------- - ------ -- ---
----- -------- ----- -
----- ---- - ----- ------------------------- -- -- ----- --
----- ---------- - -------------------------------- -- ------
----- ------- - - -- -- -- - -- -- ------
----- ------- - --------------------------------------------------------- -- -----
------------------------------------------ -
-------- --------
----- ----
------ ----- -- -
----- ------ - ----------------------------------------------------------------- -- ------
-------------------- ----------------
--
---
-
------上述代码通过导入 protobufjs 和 grpc-web 库，实现了对计算器服务的 Add 方法进行调用，并输出结果。
在运行上述代码之前，需要先启动 Envoy 代理（详见下文）。
使用 Envoy 代理处理后端流量
由于浏览器中的 gRPC 端点通常需要使用 HTTPS 协议，在跨域请求时会遇到一些限制。因此，我们可以使用 Envoy 代理来解决这个问题。
Envoy 是一个开源的高性能代理服务器，支持 HTTP/2、gRPC 和 WebSocket 等协议。我们可以将 Envoy 配置为将 gRPC 流量从浏览器转发到后端服务器，并在其中添加所需的安全头和 CORS 配置等。
以下是一个简单的 Envoy 配置文件 envoy.yaml：
> 来源：[JavaScript中文网](https://www.javascriptcn.com/post/24294) ，转载请注明来源 [https://www.javascriptcn.com/post/24294](https://www.javascriptcn.com/post/24294)