web通过离线编译protobuf,在线解析proto二进制数据

一、安装依赖

环境版本

bash 复制代码
$ node -v
v18.12.0

$ npm -v
8.19.2

为了使用ts类型推断,我这里安装ts-proto库,我用的版本是^2.7.0

bash 复制代码
$ npm i ts-proto

安装protoc工具

  • 这个是非web或node程序,一个可执行的.exe文件用来编译.proto文件;
  • 点击下方链接,选择你所属电脑的系统对应的工具,我这里是windows32位操作系统。

github.com/protocolbuf...

  • 下载完成后,解压缩到某个文件夹下,配置系统环境变量路径:
  • 查看protoc版本
cmd 复制代码
$ protoc --version
  • 这里是一个坑点,protoc默认从nodejs的根目录的node_modules文件夹去查找对应执行文件了,具体原因还不了解,可能是因为之前安装了npm i protoc -g导致的,这里我们规避一下,改一种写法:
cmd 复制代码
$ protoc.exe --version
libprotoc 30.2
  • 运行正常,安装步骤完结。

二、编译.proto文件

准备2个.proto 文件,a.protob.proto,其中a.proto使用import关键字引入了b.proto文件的类型

  • 当前你的工程目录为这样:
bash 复制代码
ts-proto-demo/
├── protos/
│   ├── a.proto
│   └── b.proto
├── package.json
├── tsconfig.json
└── README.md
protobuf 复制代码
// a.proto
syntax = "proto3";

package demo;

// 引入b.proto
import "b.proto";

message Post2 {
  string id2 = 1;
  string title2 = 2;
}
message Post {
  string id = 1;
  string title = 2;
  // b的User类型
  User author = 3;
  Post2 post2 = 4;
}
protobuf 复制代码
// b.proto
syntax = "proto3";

package demo;

message User {
  string id = 1;
  string name = 2;
}

开始编译

  • 执行protoc可执行文件
cmd 复制代码
protoc.exe \
--plugin=protoc-gen-ts_proto=".\\node_modules\\.bin\\protoc-gen-ts_proto.cmd" \
--proto_path=./protos/ \
--ts_proto_out=. \
./protos/a.proto

--plugin=protoc-gen-ts_proto=".\\node_modules\\.bin\\protoc-gen-ts_proto.cmd"

  • npm安装ts-proto库时,会在node_modules/.bin/文件夹下添加一个名为protoc-gen-ts_proto.cmd的可执行文件;
  • 注意!!!我是windows系统,所以选用.cmd结尾的文件;
  • 注意!!!我使用的是cmd运行脚本,所以--plugin路径使用".\\node_modules\\.bin\\protoc-gen-ts_proto.cmd"写法。
  • --proto_path=./protos/ 如果你有多个.proto文件需要编译,或者有互相引用的.proto文件,需要设置--proto_path,大致意思是包含proto_path文件夹下的所有.proto文件

  • --ts_proto_out=. 输出*.ts解析脚本目录,没什么好说的

  • ./protos/a.proto 需要编译的.proto文件

执行完成

三、查看结果

  • 当前你的工程目录为这样:
bash 复制代码
ts-proto-demo/
├── protos/
│   ├── a.proto
│   └── b.proto
├── a.ts
├── b.ts
├── package.json
├── tsconfig.json
└── README.md

a.ts文件内容:

正常我们只需要关心最终输出的类型,应该是Post类型,Post包含了Post2User类型。

四、使用

typescript 复制代码
import {Post} from "./a.ts"
const data: Uint8Array = // ***;
const result = Post.encode(data);
cosole.log(result);

// 你会得到类似下面的结果
/**
{
  id: '1',
  title: "标题1",
  author: {
   id: "3";
   name: "leo";
  },
  post2: {
      id2: '2',
      title2: "标题2",
  }
}
*/
相关推荐
小徐不徐说36 分钟前
每日一算:华为-批萨分配问题
数据结构·c++·算法·leetcode·华为·动态规划·后端开发
姜暮儿2 小时前
C++ 性能优化
开发语言·c++
爷_3 小时前
字节跳动震撼开源Coze平台!手把手教你本地搭建AI智能体开发环境
前端·人工智能·后端
铭哥的编程日记3 小时前
《从C风格到C++风格:内存管理的进化之路》
开发语言·c++
charlee445 小时前
行业思考:不是前端不行,是只会前端不行
前端·ai
程序员编程指南5 小时前
Qt 与 SQLite 嵌入式数据库开发
c语言·数据库·c++·qt
Amodoro6 小时前
nuxt更改页面渲染的html,去除自定义属性、
前端·html·nuxt3·nuxt2·nuxtjs
Wcowin6 小时前
Mkdocs相关插件推荐(原创+合作)
前端·mkdocs
伍哥的传说6 小时前
CSS+JavaScript 禁用浏览器复制功能的几种方法
前端·javascript·css·vue.js·vue·css3·禁用浏览器复制
lichenyang4536 小时前
Axios封装以及添加拦截器
前端·javascript·react.js·typescript