npm 包 grpc-web-client-bloombox 使用教程-JavaScript中文网-JavaScript教程资源分享门户

简介

grpc-web-client-bloombox 是一个用于浏览器中访问 gRPC 服务的 npm 包。它支持使用 protobuf.js 定义的消息和服务描述文件，并使用 gRPC-Web 协议与后端服务通信。

在使用这个包时，您可以在浏览器中直接使用 gRPC 客户端来调用后端服务，而无需使用任何代理或其他工具。

使用教程

安装

要使用 grpc-web-client-bloombox，您需要先安装它。在终端中，使用以下命令：

npm install --save grpc-web-client-bloombox

准备

要使用 gRPC，您需要一个服务的描述文件。这个描述文件定义了所有的服务和消息。如果您已经准备好了这个文件，请跳过这一步。

如果您还没有一个服务描述文件，请按照以下步骤获取它：

安装 Protocol Buffer 编译器：https://github.com/protocolbuffers/protobuf/releases。
安装 gRPC 插件：npm install -g grpc-tools。

编写一个名为.proto的文件。以下是一个示例：

-- -------------------- ---- -------
------ - ---------
------- ------

------- ------------ -
    ------ ---- - --
-

------- ------------- -
    ------ ------- - --
-

------- ------- -
    --- ---------------------- ------- --------------- --
-

编译描述文件：protoc --proto_path=./proto --js_out=import_style=commonjs,binary:./target --grpc-web_out=import_style=typescript,mode=grpcwebtext:./target ./proto/greet.proto

使用

现在，您已经准备好了描述文件。让我们使用它。创建一个名为 app.ts 的 TypeScript 文件，并按照以下步骤添加代码：

导入 grpc-web-client-bloombox。

import { GrpcWebClient } from 'grpc-web-client-bloombox'

创建一个客户端实例并指定 gRPC 服务的 URL，以及以下选项：
```
const client = new GrpcWebClient('http://localhost:8080', { debug: true })
```
这里我们指定了 gRPC 服务的 URL（http://localhost:8080），以及一些选项。在这个例子中，我们启用了调试模式。
加载服务描述文件。
```
const proto = await client.loadProtoFile('./proto/greet.proto')
```
这里我们在客户端中加载了 gRPC 服务的描述文件。
创建服务的客户端实例。
```
const greeter = proto.greet.Greeter.createClient(client)
```
我们指定了 gRPC 服务的 Greeter 模块，并从客户端实例创建了服务的客户端实例。
调用服务。
```
const response = await greeter.sayHello({ name: 'World' })
console.log(response.message)
```
在这里，我们调用了 Greeter 模块的 SayHello 方法，并传递了一个包含 name 属性的消息。返回的 response 对象包含一个 message 属性，该属性包含来自服务器的响应消息。

示例代码

以下是完整的示例代码，包括 app.ts、greet.proto 和 index.html。

app.ts：

-- -------------------- ---- -------
------ - ------------- - ---- --------------------------

----- -------- ------ -
    ----- ------ - --- -------------------------------------- - ------ ---- --
    ----- ----- - ----- -------------------------------------------
    ----- ------- - ----------------------------------------
    
    --- -
        ----- -------- - ----- ------------------ ----- ------- --
        -----------------------------
    - ----- ------- -
        --------------------
    -
-

------

greet.proto：

-- -------------------- ---- -------
------ - ---------
------- ------

------- ------------ -
    ------ ---- - --
-

------- ------------- -
    ------ ------- - --
-

------- ------- -
    --- ---------------------- ------- --------------- --
-

index.html：

-- -------------------- ---- -------
--------- -----
------
------
    ----- ----------------
    --------------- ------ ---------------
-------
------
------- ----------------------
-------
-------

总结

通过使用 grpc-web-client-bloombox，您可以在浏览器中轻松地访问 gRPC 服务，并使用 protobuf.js 来定义服务和消息。这个 npm 包非常易于使用，并且提供了很好的文档和示例代码。

如果您正在构建一个 Web 应用程序，并且需要与后端服务进行通信，那么 gRPC-Web 可能是一个不错的选择。使用 gRPC-Web，您可以避免编写繁琐的代码，并可以在浏览器中使用强类型的消息来调用后端服务。

来源：JavaScript中文网，转载请注明来源 https://www.javascriptcn.com/post/60057c9181e8991b448ebedd