protobuf在前端页面的基本使用

网络世界中的数据传输从一开始的xml到json现在越来越多的人开始向protobuf转变。不得不说it无时无刻不在进步!

现在来看看一下protobuf的基本使用吧,这里主要介绍js前端方面的。一些基础的使用方法,先有一个简要的认识,

随后会在另一篇文章介绍结合服务端的使用,这里的服务端用的是nodejs,为什么用nodejs呢,因为三个字‘666’;

你会发现用nodejs写服务端就像在写前端,不废话了,开始吧:

———————————————————————————我是分割线—————————————————————————————————

第三方库登场,protobuf.js,

主要包括这三个文件:

<script src="../protobuf/long.js"></script>
<script src="../protobuf/bytebuffer.js"></script>
<script src="../protobuf/protobuf.js"></script>
功能就是把接收到的protobuf数据转化为js对象,和把js对象转化为protobuf数据;

先让一段proto格式的文件出来露个脸,我们就给她起名叫ok666.proto吧:

//这里是一个proto文件,在这个写了两个模块,子模块和父模块
//父模块
message ParentModule{
		// 序号
		required int32 number = 1;
		// 名称
		required string name = 2;
		// 子模块[repeated 可重复,相当于集合]
		repeated ChildrenModule childrenModule= 3;
}
 
// 子模块
message ChildrenModule{
		// 序号
		required int32 number = 1;
		// 名称
		required string name = 2;
}
proto文件可以理解为一个说明书或者一份配置或者一个泛型(请查阅protobuf相关知识),先请往下看:

一段华丽的html:

<!DOCTYPE html>
<html>
<head>   
<meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
<!-- 引入protobuf相关js文件 -->                                     
<script src="../protobuf/long.js"></script>
<script src="../protobuf/bytebuffer.js"></script>
<script src="../protobuf/protobuf.js"></script>
<!-- ProtoBuf处理 --><script language="javascript" type="text/javascript">if (typeof dcodeIO === 'undefined' || !dcodeIO.ProtoBuf) { throw(new Error("一些错误提示"));}// 基本步骤先得到ProtoBuf对象,下面的操作都靠它。var ProtoBuf = dcodeIO.ProtoBuf; // 先构造两个子模块// 子模块-1


//加载proto文件中的之模块
var ChildrenModule_1 = ProtoBuf.loadProtoFile("ok666.proto").build("ChildrenModule");
//实例化一个子模块
var childrenModule_1 = new ChildrenModule_1();
//设置值 setNumber就是给number设置值
childrenModule_1.setNumber(1);
childrenModule_1.setName("我是子模块1");
 
// 子模块-2
var ChildrenModule_2 = ProtoBuf.loadProtoFile("ok666.proto").build("ChildrenModule");
var childrenModule_2 = new ChildrenModule_2();
childrenModule_2.setNumber(2);
childrenModule_2.setName("我是子模块2");
 
// 父模块
var ParentModule = ProtoBuf.loadProtoFile("itstack.proto").build("ParentModule");
 
// 像父模块设置值
var parentModule = new ParentModule();
parentModule.setNumber(1);
parentModule.setName("我是福模块");
//给父模块里的子模块赋值
parentModule.setChildrenModule(new Array(childrenModule_1,childrenModule_2));
 
// 打印父模块此时数据,f12进行观察
console.log("ProtoBuf对象数据:");
console.log(parentModule);
 
//两个编解码的方法
// 1.对象转字节:parentModule.toArrayBuffer() 
// 2.字节转对象:ParentModule.decode()
var msgDec = ParentModule.decode(parentModule.toArrayBuffer());
// 接收到的数据:protobuf数据
console.info("接收到的数据:");
console.info(parentModule.toArrayBuffer());
// 打印转换后的信息
console.info("经过ParentModule.decode转换后的数据:");
console.info(msgDec);
 
</script>
</head>
<body>
</body>
</html>/
进过实测我们可以发现可以对protobuf数据转化为js对象,并且js对象可以转化为protobuf数据,这个我们就可以解码服务端发来的protobuf,和编码js对象为protobuf发送至服务端。







  • 2
    点赞
  • 8
    收藏
    觉得还不错? 一键收藏
  • 1
    评论
评论 1
添加红包

请填写红包祝福语或标题

红包个数最小为10个

红包金额最低5元

当前余额3.43前往充值 >
需支付:10.00
成就一亿技术人!
领取后你会自动成为博主和红包主的粉丝 规则
hope_wisdom
发出的红包
实付
使用余额支付
点击重新获取
扫码支付
钱包余额 0

抵扣说明:

1.余额是钱包充值的虚拟货币,按照1:1的比例进行支付金额的抵扣。
2.余额无法直接购买下载,可以购买VIP、付费专栏及课程。

余额充值