vue使用protobuf+websocket

我的教程是用protobuf生成了proto.js文件

1、运行npm install protobufjs --save 安装

2、拿到后台给的proto文件，在src里创建一个proto目录，用于存放proto文件及编译后的js文件
proto

package school;
syntax = "proto3";

message PBClass {
    uint64 classId = 0;
    string name = 1;
}

3、运行命令

npx pbjs -t json-module -w commonjs -o src/proto/proto.js  src/proto/*.proto 

image.png

生成proto.js文件，如图

4、使用
websocket返回的数据是model.data

import protoRoot from '@/proto/proto'
const BagFrameMsg = protoRoot.lookup('BagFrameMsg')//lookup括号里面的BagFrameMsg是proto文件里面的类名，问后台要，解析哪个类

postProtoMessage(model) {
    const message = BagFrameMsg.toObject(BagFrameMsg.decode(new Uint8Array(model.data)), { enums: String, // enums as string names
      longs: String, // longs as strings (requires long.js)
      bytes: String, // bytes as base64 encoded strings
      defaults: true, // includes default values
      arrays: true, // populates empty arrays (repeated fields) even if defaults=false
      objects: true, // populates empty objects (map fields) even if defaults=false
      oneofs: true })
    console.log('转化后的数据============', message)
  }
}

官方git教程
https://github.com/protobufjs/protobuf.js