基于vue的protobuf如何在web端简单使用？解析加实例

Vue项目搭建好以后安装protobufjs
npm
npm install protobufjs
yarn
npm install protobufjs

安装成功后在项目src目录下新建proto目录，把后端给的proto文件放进去
我的文件是test.proto 测试用的 内容如下

syntax = "proto3";

message Address
{
     string province  = 1;
     string city = 2;
     string county = 3;
}

---

以上准备工作做好之后来到项目根目录 也就是有vue.config.js的目录
在此目录打开powershell或cmd
执行以下命令 此命令用于将proto文件转换成js文件方便我们前端使用
npx pbjs -t json-module -w commonjs -o src/proto/proto.js src/proto/*.proto

执行成功后去你存放proto文件的目录查看是否新增了proto.js文件

如果有就说明proto转js成功，

接下来就到了使用proto的环节了

首先 引入proto.js

import protoRoot from "@/proto/proto.js";

使用

let testobj = protoRoot.lookup("Address").create();
    testobj.province = "wwww";
    testobj.city = "18";
    testobj.county = "18";
    console.log(testobj);

这里你可以去控制看一下是否打印了如下结果 如果有，就可以继续往下做了

这里我们要把数据转成二进制的，可以直接发送给后端使用

//lookup，encode，finish这些都是protobuf的一些方法
//你需要根据自己项目的proto文件结构进行方法使用的调整，可以和我上边放的proto作对比，我就是这样跟着敲的
    let testObjBuffer = protoRoot.lookup("Address").encode((testobj).finish();
     console.log(loginReqObjBuffer);

这里数据就已经被转换成二进制了，你可以直接把数据发给后端，后端接收之后通过他们的方法就可以直接读取导数据了

接下来就是接收后端的消息了，很简单，不管你是通过什么方法接收消息的，在接受到消息之后直接把二进制的消息存下来

let neddData = data.results
let testdata = protoRoot.lookup("Address").decode(neddData);
console.log(testdata);

这样就把消息解析出来了，就是这么简单！！！