前言介绍：

    本案例主要介绍如何在js里把接收到的protobuf数据转换为对象与如何把对象转换为protobuf数据。

为了能简单说明问题，在本案例中只有js部分，关于后台服务的像前台发送数据部分在案例一中已经介绍。

环境需求：

    需要github大神wiki提供的三个js文件：[本案例的下载中已经提供]

ｇｉｔｈｕｂ：https://github.com/dcodeIO/ProtoBuf.js/wiki

１.ByteBufferAB.min.js

     2.Long.min.js

     3.ProtoBuf.min.js

代码介绍：

 

itstack.proto

  1. //个人博客:www.itstack.org
  2. //站长:付政委
  3. //QQ:184172133
  4.  
  5. //这里是一个proto文件，我们在www.itstack.org为想象，定义它下面分为大知识点模块，每个模块下又有子模块
  6. // 父模块
  7. message ParentModule{
  8. // 序号
  9. required int32 number = 1;
  10. // 名称
  11. required string name = 2;
  12. // 子模块[repeated　可重复，相当于集合]
  13. repeated ChildrenModule childrenModule= 3;
  14. }
  15.  
  16. // 子模块
  17. message ChildrenModule{
  18. // 序号
  19. required int32 number = 1;
  20. // 名称
  21. required string name = 2;
  22. }

 

www.itstack.org.html

 

  1. <!DOCTYPE html>
  2. <html xmlns="http://www.w3.org/1999/xhtml">
  3. <head>
  4. <meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
  5. <!--　引入protobuf相关js文件　-->
  6. <script src="lib/Long.min.js"></script> <!-- https://raw.github.com/dcodeIO/Long.js/master/dist/Long.min.js -->
  7. <script src="lib/ByteBufferAB.min.js"></script> <!-- https://raw.github.com/dcodeIO/ByteBuffer.js/master/dist/ByteBufferAB.min.js -->
  8. <script src="lib/ProtoBuf.min.js"></script> <!-- https://raw.github.com/dcodeIO/ProtoBuf.js/master/dist/ProtoBuf.min.js -->
  9.  
  10. <!-- ProtoBuf处理 -->
  11. <script language="javascript" type="text/javascript">
  12.  
  13. if (typeof dcodeIO === 'undefined' || !dcodeIO.ProtoBuf) {
  14. throw(new Error("ProtoBuf.js is not present. Please see www/index.html for manual setup instructions."));
  15. }
  16. // 创建ProtoBuf
  17. var ProtoBuf = dcodeIO.ProtoBuf;
  18.  
  19. // 先构造两个子模块
  20. // 子模块－１
  21. var ChildrenModule_1 = ProtoBuf.loadProtoFile("itstack.proto").build("ChildrenModule");
  22. var childrenModule_1 = new ChildrenModule_1();
  23. childrenModule_1.setNumber(1);
  24. childrenModule_1.setName("Nginx5.0 初级案例");
  25.  
  26. // 子模块－２
  27. var ChildrenModule_2 = ProtoBuf.loadProtoFile("itstack.proto").build("ChildrenModule");
  28. var childrenModule_2 = new ChildrenModule_2();
  29. childrenModule_2.setNumber(2);
  30. childrenModule_2.setName("Nginx5.0 中级案例");
  31.  
  32. // 父模块
  33. var ParentModule = ProtoBuf.loadProtoFile("itstack.proto").build("ParentModule");
  34.  
  35. // 像父模块设置值
  36. var parentModule = new ParentModule();
  37. parentModule.setNumber(1);
  38. parentModule.setName("Nginx5.0");
  39. parentModule.setChildrenModule(new Array(childrenModule_1,childrenModule_2));
  40.  
  41. // 打印父模块此时数据【火狐浏览器Ｆ12进行观察】
  42. console.log("ProtoBuf对象数据：");
  43. console.log(parentModule);
  44.  
  45. // 模拟发送
  46. // 1.对象转字节：parentModule.toArrayBuffer()
  47. // 2.字节转对象：ParentModule.decode()
  48. var msgDec = ParentModule.decode(parentModule.toArrayBuffer());
  49. // 接收到的数据：
  50. console.info("接收到的数据：");
  51. console.info(parentModule.toArrayBuffer());
  52. // 打印转换后的信息
  53. console.info("经过ParentModule.decode转换后的数据：");
  54. console.info(msgDec);
  55.  
  56. </script>
  57. </head>
  58. <body>
  59. </body>
  60. </html>
测试解图：

 

 

 

工程下载：

http://itstack.qiniudn.com/TestJsProtobuf.zip