WebSocket中关于使用ProtoBuf传输数据介绍js部分

zoukankan html css js c++ java

WebSocket中关于使用ProtoBuf传输数据介绍js部分
前言介绍：

    本案例主要介绍如何在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
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. }
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. 
6. <script src="lib/Long.min.js"></script> 
7. <script src="lib/ByteBufferAB.min.js"></script> 
8. <script src="lib/ProtoBuf.min.js"></script> 
10. 
11. <script language="javascript" type="text/javascript">
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;
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 初级案例");
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 中级案例");
32. // 父模块
33. var ParentModule = ProtoBuf.loadProtoFile("itstack.proto").build("ParentModule");
35. // 像父模块设置值
36. var parentModule = new ParentModule();
37. parentModule.setNumber(1);
38. parentModule.setName("Nginx5.0");
39. parentModule.setChildrenModule(new Array(childrenModule_1,childrenModule_2));
41. // 打印父模块此时数据【火狐浏览器Ｆ12进行观察】
42. console.log("ProtoBuf对象数据：");
43. console.log(parentModule);
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);
56. </script>
57. </head>
58. <body>
59. </body>
60. </html>
测试解图：

工程下载：

http://itstack.qiniudn.com/TestJsProtobuf.zip
查看全文

相关阅读:
FindWindowEx
c# 基础知识
 propertychange 属性说明
 Python3-2020-测试开发-22- 异常
 Python3-2020-测试开发-21- 面向对象之封装，继承，多态
 Python3-2020-测试开发-20- Python中装饰器@property
Python3-2020-测试开发-19- Python中私有属性和私有方法
 Python3-2020-测试开发-18- Python中方法没有重载
 Python3-2020-测试开发-17- 类编程
 Python3-2020-测试开发-16- 嵌套函数（内部函数）&nonlacal声明外部函数的局部变量&LEGB规则

原文地址：https://www.cnblogs.com/hzcya1995/p/13317985.html