工具：

npm:node.js的包管理工具

protoc：将.protoc文件生成指定语言的protobuf代码

browserify：CommonJS格式转换工具，将node.js使用的包转换成前端js可以使用的包

安装过程：

npm安装：

使用这个工具只需要安装node.js

browserify等安装：

npm install -g require
npm install -g browserify
npm install google-protobuf

protoc安装：

首先找到Protobuf的最新版本源码，对应文件是Source code (tar.gz) ，然后依次执行以下命令：

wget https://github.com/google/protobuf/archive/v3.5.1.tar.gz
tar -xzvf v3.5.1.tar.gz
cd protobuf-3.5.1/
./autogen.sh
./configure --prefix=/usr/local/protobuf
make -j8 && make install
ldconfig
如果不成功，则：配置库路径
(1)打开profile文件
```
vim /etc/profile
```
(2)在该文件最后添加环境变量
```
 
```
export LD_LIBRARY_PATH=$LD_LIBRARY_PATH:/usr/local/protobuf/lib
export LIBRARY_PATH=$LIBRARY_PATH:/usr/local/protobuf/lib
export PATH=$PATH:/usr/local/protobuf/bin
export PKG_CONFIG_PATH=/usr/local/protobuf/lib/pkgconfig/
(3)让配置文件生效
```
source /etc/profile
```

文件编写：

定义proto协议文件，命名login.proto：

syntax = "proto3";

// 用户登录

message c2s_login {

string email = 1;

string password = 2;

string captcha = 3;

}

protobuf js 代码生成(login_pb.js)
protoc --js_out=import_style=commonjs,binary:. ./login.proto

定义导出文件
exports.js

var loginProto = require("./login_pb");

module.exports = {
    DataProto: loginProto
};

用browserify转换打包
browserify exports.js > bundle.js

在浏览器中使用

<html>
<head>
<script type="text/javascript" src="./bundle.js"></script>
</head>

<body>

<button onclick="">1111</button>
<script>
var message = new proto.mypackage.myMessage();
message.setEmail("[email protected]");
   message.setPassword("123456");
   message.setCaptcha("abc");
   var bytes = message.serializeBinary();
   console.log(bytes);
   var data = proto.mypackage.myMessage.deserializeBinary(bytes);
   console.log(data);
   console.log("my_value:"+data.getEmail());
   console.log("name:"+data.getPassword());
console.log("age:"+data.getCaptcha());
</script>
</body>
</html>

前端js读写protocolbuffer

工具：

安装过程：

npm安装：

browserify等安装：

protoc安装：

文件编写：

猜你喜欢