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

来源：互联网收集：自由互联发布时间：2021-06-22

前言介绍：本案例主要介绍如何在js里把接收到的protobuf数据转换为对象与如何把对象转换为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

//个人博客:www.itstack.org
//站长:付政委
//QQ:184172133
//这里是一个proto文件，我们在www.itstack.org为想象，定义它下面分为大知识点模块，每个模块下又有子模块
// 父模块
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;
}

www.itstack.org.html

<!DOCTYPE html>
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8"/>
<script src="lib/Long.min.js"></script>
<script src="lib/ByteBufferAB.min.js"></script>
<script src="lib/ProtoBuf.min.js"></script>
<script language="javascript" type="text/javascript">
if(typeof dcodeIO ===‘undefined‘||!dcodeIO.ProtoBuf){
throw(newError("ProtoBuf.js is not present. Please see www/index.html for manual setup instructions."));
}
// 创建ProtoBuf
varProtoBuf= dcodeIO.ProtoBuf;
// 先构造两个子模块
// 子模块－１
varChildrenModule_1=ProtoBuf.loadProtoFile("itstack.proto").build("ChildrenModule");
var childrenModule_1 =newChildrenModule_1();
childrenModule_1.setNumber(1);
childrenModule_1.setName("Nginx5.0 初级案例");
// 子模块－２
varChildrenModule_2=ProtoBuf.loadProtoFile("itstack.proto").build("ChildrenModule");
var childrenModule_2 =newChildrenModule_2();
childrenModule_2.setNumber(2);
childrenModule_2.setName("Nginx5.0 中级案例");
// 父模块
varParentModule=ProtoBuf.loadProtoFile("itstack.proto").build("ParentModule");
// 像父模块设置值
var parentModule =newParentModule();
parentModule.setNumber(1);
parentModule.setName("Nginx5.0");
parentModule.setChildrenModule(newArray(childrenModule_1,childrenModule_2));
// 打印父模块此时数据【火狐浏览器Ｆ12进行观察】
console.log("ProtoBuf对象数据：");
console.log(parentModule);
// 模拟发送
// 1.对象转字节：parentModule.toArrayBuffer()
// 2.字节转对象：ParentModule.decode()
var msgDec =ParentModule.decode(parentModule.toArrayBuffer());
// 接收到的数据：
console.info("接收到的数据：");
console.info(parentModule.toArrayBuffer());
// 打印转换后的信息
console.info("经过ParentModule.decode转换后的数据：");
console.info(msgDec);
</script>
</head>
<body>
</body>
</html>

测试解图：

工程下载：

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

再分享一下我老师大神的人工智能教程吧。零基础！通俗易懂！风趣幽默！还带黄段子！希望你也加入到我们人工智能的队伍中来！https://blog.csdn.net/jiangjunshow

上一篇：[PKUWC2018] Slay the spire
下一篇：单点登录 – 是否应该多次接受相同的SAML响应两次？

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

相关文章