web中使用protobuf

安装环境

到github去下载protoc编译好的二进制文件 -> https://github.com/protocolbuffers/protobuf/releases 选择对应平台的下载（放入path环境中）
安装生成js文件的插件 npm i -g protoc-gen-js （建议全局安装）
安装 browserify npm i -g browserify

编译proto文件

新建一个文件夹放入proto文件
安装google-protobuf库 npm i google-protobuf
在当前目录下创建一个lib目录，生成的文件名_pb.js文件会在里面
生成使用CommonJS imports方式的库文件 protoc --js_out=import_style=commonjs,binary:./lib ./*.proto
然后执行 browserify .\lib\msg_pb.js -o ./lib/msg.js

web中使用

proto文件

syntax = "proto3";
package Msg;
message TestMsg
{
  int32 id = 1;
  string str = 2;
}

html

<!DOCTYPE html>
<html lang="en">
  <head>
    <title>proto</title>
    <!-- 引入生成的js包文件 -->
    <script src="msg.js"></script>
  </head>
  <body>
    <!-- 引入生成的js包文件 -->
    <script src="msg.js"></script>
    <script>
        var test = new proto.Msg.TestMsg();
        test.setId(10);
        test.setStr('hello world');
        var u8array = test.serializeBinary();
        var formData = new FormData();
        formData.append('data', u8array);
        const ws = new Websocket("")
        // 二进制流转Msg
        ws.onmessage = async function(e) {
          var test = new proto.Msg.TestMsg.deserializeBinary(await e.data.arrayBuffer()).toObject()
          console.log( test )
        }
    </script>
  </body>
</html>

$$end have fun.