protobuf在前端页面的基本使用
来源:互联网 发布:浪潮昆明云计算产业园 编辑:程序博客网 时间:2024/06/03 17:07
网络世界中的数据传输从一开始的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"); // 子模块-2var 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发送至服务端。
阅读全文
0 0
- protobuf在前端页面的基本使用
- protobuf 前端怎么使用
- ProtoBuf---基本使用
- 在protobuf中使用python的extension
- Protobuf在ios上的使用
- Protocol Buffer(ProtoBuf)在U3D的使用
- 在Windows下使用Protobuf的示例
- protobuf的基本配置
- ProtoBuf 的基本介绍
- javascript前端如何使用google-protobuf
- protobuf在使用的时候使用静态链接库方式
- [protobuf] 如何在Windows环境下的VS中安装使用Google Protobuf完成SOCKET通信
- protobuf-c 在arm linux 嵌入式平台的使用 protobuf和Json对比测试
- Protobuf在Python中的使用
- 在c++中使用protobuf
- protobuf 在lua中的使用
- Protobuf在Java中的使用
- 在 Golang 中使用 Protobuf
- C++ 逐行读取txt文件
- 第一堂课
- centos7下docker-ce搭建
- hibernate学习要点指引
- Express 4.x 使用CORS跨域的详细解析
- protobuf在前端页面的基本使用
- 使用CSS完成元素居中的七种方法
- NHibernate和实体框架比较
- 模拟实现strcat
- ArrayList和LinkedList的自我实现
- Java抽象类和接口
- 数组
- java反射简介
- 记录一下博客大神们