工具:
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文件
(2)在该文件最后添加环境变量vim /etc/profile
-
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>