web中使用protobuf

更新时间:2024-03-19 16:36:07 阅读:79 所属栏目: 日志

安装环境

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

编译proto文件

  1. 新建一个文件夹 放入proto文件
  2. 安装google-protobuf库 npm i google-protobuf
  3. 在当前目录下创建一个lib目录,生成的文件名_pb.js文件会在里面
  4. 生成使用CommonJS imports方式的库文件 protoc --js_out=import_style=commonjs,binary:./lib ./*.proto
  5. 然后执行 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.