前端js实现protobuf序列化与反序列化

系列文章目录

websocket训练地址：https://www.qiulianmao.com，正在搭建中

前端js实现protobuf序列化与反序列化

系列文章目录
1. 环境配置
2. 编写proto文件
3. 对proto文件进行编译
4. 生成前端可用的js文件

1. 环境配置

B站视频教学地址：地址链接
下载3.20版本的protoc.exe：地址链接
安装nodejs：https://nodejs.org/en
创建项目后执行

node -v(显示版本则说明安装成功)
npm install -g require(对库文件的引用库)
npm install -g browserify(这个是用来打包成前端使用的js文件)
npm install google-protobuf(安装google库)
1
2
3
4

2. 编写proto文件

新建case.proto文件

syntax = "proto3";
message Request{
   repeated Headers Headers= 5;
   string ContentEncoding = 6;
   string ContentType = 7;
   bytes Payload = 8;
}


message Headers{
   string Key = 1;
   string Value = 2;
}
1
2
3
4
5
6
7
8
9
10
11
12
13

3. 对proto文件进行编译

在cmd中执行

.\protoc --js_out=import_style=commonjs,binary:. case.proto
1

项目新建main.js文件

var MessageBody = require('./case_pb');
module.exports = {
    DataProto: MessageBody
}
1
2
3
4

4. 生成前端可用的js文件

在cmd中执行，会借助main.js生成case.js，这个就可以直接在浏览器中使用了。

browserify main.js > case.js
1

前端代码

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>Title</title>
  <script type="text/javascript" src="case.js"></script>
</head>
<body>
<script>
    let a = new proto.Request()
    let b = new proto.Headers()
    b.setKey('User-Agent')
    b.setValue('Mozilla/5.0 (Windows NT 10.0; Win64; x64) AppleWebKit/537.36 (KHTML, like Gecko) Chrome/118.0.0.0 Safari/537.36 Edg/118.0.2088.46')
    a.addHeaders(b)
    let c = new proto.Headers()
    c.setKey('Content')
    c.setValue('gzip')
    a.addHeaders(c)
    a.setPayloadtype('utf-8')
    console.log(a.toObject())
    let d = a.serializeBinary()
    console.log(d)
    let e = new proto.Request.deserializeBinary(d)
    console.log(e.toObject())
</script>
</body>
</html>
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27

控制台查看结果
在这里插入图片描述

相关阅读:
3.1 栈和队列的定义和特点
pytorch里常用操作（持续更新）
【cocos creator 】生成六边形地图
TS进阶之infer
使用IDEA画结构图
【OBS】circlebuf
现货白银有哪些优势
数字化转型的实战法则：全面剖析《数字化专业知识体系》中的落地策略与最佳实践
【LeetCode热题100】打卡第15天：搜索旋转排序数组&在排序数组中查找元素的第一个和最后一个位置
算法入门 | 二叉树的递归遍历、递归创建系列（递归）

原文地址：https://blog.csdn.net/tdl320721/article/details/133866583