前端使用 proto 文件

文章目录

一、为什么要使用 proto 文件

二、将 proto 文件转成 json 文件

三、使用 test.json 文件

---

一、为什么要使用 proto 文件

在与后端交互的过程中，数据格式主要是 json ，但如果后端要的数据不是 json 格式，而是通过 proto 文件制定的规则呢？

那就需要使用 protobufjs 将 proto 文件转成 json 或 js 文件 ，因为 JavaScript 是不认识 proto 文件的，所以需要先将 proto 文件转成 JavaScript 所认识的文件

二、将 proto 文件转成 json 文件

需要先下载 protobufjs-cli 依赖

npm i -D protobufjs-cli

然后再当前目录下的终端，执行以下命令

npx pbjs -t json proto/test.proto > proto/test.json

proto/test.proto > proto/test.json ：意思是找到当前目录的 proto 文件夹下的 test.proto 文件，将该文件转为 test.json 并将该文件放到 proto 文件夹下

三、使用 test.json 文件

npm i -S protobufjs

由于收到数据是二进制的，虽然拿到的 proto 文件的 json 结构，但这还是不能直接使用，还需要下转 protobufjs 依赖，将收到的二进制数据根据 test.json 文件转成对应的 json 结构

import protobuf from "protobufjs";
import protoJson from "./proto/test.json";
​
// 使用 protobufjs 拿到 test.json 的 json 结构
const root = protobuf.Root.fromJSON(protoJson);
// 找到要翻译的包和字段
const protoData = root.lookupType("interface_message.GeneralDetectionMapData");
​
// data是收到二进制数据，使用 decode 方法，将二进制数据根据【包和字段】转成 json 结构的数据，该过程简称：解密
const data = protoData.decode(data);
​
// 当需要发送修改过后的 proto 数据发送给后端时，使用 encode 可将数据转成 proto 结构的数据，该过程简称：加密
const protoData = protoData.encode(data).finish()