摘要:涉及到计算机基础知识,例如字节缓冲大小端等。是指用多少位表示的整数,例如就是用位即一个字节表示的整数,二进制范围是,对应的十进制就是。开发时通讯双方或者多方终端都遵循协议。
这里记录了使用 protobuf 协议与服务端数据交互的相关内容和知识。字节 / Byte涉及到计算机基础知识,例如字节、buffer 缓冲、大小端等。
1 字节代表了 8 位(bit)二进制,1 位就是 0 或 1,也是计算机最小单位。
Uint 与 IntInt 是带正负号的整数,Uint 是从 0 开始计的整数。
Uintx 是指用多少位表示的整数,例如 Uint8 就是用 8位(即一个字节) 表示的整数,二进制范围是 00000000 ~ 11111111,对应的十进制就是 0 ~ 255。
但是人类的数学里面负数,所以 Int8 就描述了包含负数在内的整数范围,即十进制的 -128 ~ 127
更多描述如下所示
Uint8 -- (0 to 2^8 - 1) Int8 -- (-2^7 to +2^7 - 1) Uint16 -- (0 to 2^16 - 1) Int16 -- (-2^15 to +2^15 - 1) Uint32 -- (0 to 2^32 - 1) Int32 -- (-2^31 to +2^31) Uint64 -- (0 to 2^64 - 1) Int64 -- (-2^63 to +2^63 - 1)ArrayBuffer
ArrayBuffer 对象用来表示通用的、固定长度的原始二进制数据缓冲区。参考MDN
// 以下为创建 12 个字节的 buffer 的例子 const buffer = new ArrayBuffer(12);
上面的操作代表向操作系统申请了 12 字节的二进制缓冲,大概如下分布
| 00000000 | 00000000 | 00000000 | 00000000 | ...(还有8字节)
ArrayBuffer 对象并不能直接被操作,需要通过 TypedArray 对象实例或者 DataView 实例作为桥梁来操作。
// Uint8Array 的单位为一字节与 ArrayBuffer 的基本单位吻合 const uint8 = new Uint8Array(buffer); console.log(uint0) // 输出 [0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0] uint8[0] = 12; // 此时 buffer 变成 [12, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0]
TypedArray 对象一览 MDN
类型 | 大小(字节单位) | 描述 | Web IDL type | |
---|---|---|---|---|
Int8Array | 1 | 8位二进制带符号整数 -2^7~(2^7) - 1 | byte | |
Uint8Array | 1 | 8位无符号整数 0~(2^8) - 1 | octet | |
Int16Array | 2 | 16位二进制带符号整数 -2^15~(2^15)-1 | short | |
Uint16Array | 2 | 16位无符号整数 0~(2^16) - 1 | unsigned short | |
Int32Array | 4 | 32位二进制带符号整数 -2^31~(2^31)-1 | long | |
Uint32Array | 4 | 32位无符号整数 0~(2^32) - 1 | unsigned int | |
Float32Array | 4 | 32位IEEE浮点数 | unrestricted | float |
Float64Array | 8 | 64位IEEE浮点数 | unrestricted | double |
除了 TypedArray,还可以通过 DataView 来做更细致的操作
例如我们需要在特定字节段内写入对应的数据
| DataLen 4 个字节 | SessionID 8 个字节 | ...
const view = new DataView(buffer); const DataLen = 100; // buffer 数据总长度 const SessionID = 123456789; // SessionID // 最后的参数为大小端排序 view.setUint32(0, DataLen, true); view.setBigUint64(4, BigInt(SessionID), true);
读取内容
const view = new DataView(buffer); // 读取小端字符顺序 const DataLen = view.getUint32(0, true); const SessionID = view.getBigUint64(4, true);
什么是大小端
Little-Endian就是低位字节排放在内存的低地址端,高位字节排放在内存的高地址端。
Big-Endian就是高位字节排放在内存的低地址端,低位字节排放在内存的高地址端。
更多详情参考维基百科的字节顺序
JS 的大数处理JS 并不能处理 Int64 精度的数,所以在 stage 3 引入了 BigInt API,解决大数精度问题,Chrome 和 Firefox 已经支持,但是 Safari 并不支持,需要用另外的办法处理。
兼容方式参考 这里
Protobuf 应用Google Protocol Buffers 是一种轻便高效的结构化数据存储格式,可以用于结构化数据串行化,或者说序列化。
开发时通讯双方或者多方终端都遵循 proto 协议。
然后看看前端如何使用 protobuf
Google 官方的库对 JS 支持不是太友好,这里我们使用 protobuf.js 库
创建一个 sdk.proto 文件
syntax = "proto3"; package yourPackage; message LoginReq { string UserName = 1; string Password = 2; }
yarn add protobufjs -D # 使用 protobufjs 提供的 Command line pbjs ./sdk.proto -t static-module > ./sdk.js # 生成 ts 声明文件 pbts -o ./sdk.d.ts ./sdk.js
生成好文件即可使用
import SDK from "./sdk"; const { LoginReq } = SDK.yourPackage; const payload = { UserName: "alex", Password: "123" } const message = LoginReq.create(payload); // or use .fromObject if conversion is necessary // encode 信息 const protoBuffer = LoginReq.encode(message).finish(); // 把 protobuf buffer 写入到上面的 SessionID buffer 信息中 const uint8 = new Uint8Array(buffer); uint8.set(protoBuffer, offset) // 使用 websocket 发送 arrayBuffer 数据 const socket = new WebSocket(host) socket.onopen = () => { socket.send(protoBuffer) } socket.onmessage = () => { // decode operator }总结
这里只是简单的记录过程,如果想要更多细节的信息,可以参考 little-chat 的源码
参考
文章版权归作者所有,未经允许请勿转载,若此文章存在违规行为,您可以联系管理员删除。
转载请注明本文地址:https://www.ucloud.cn/yun/106373.html
摘要:原文地址带入及相关介绍项目地址作为开篇章,将会介绍相关的一些知识。 原文地址:带入gRPC:gRPC及相关介绍 项目地址:go-grpc-example 作为开篇章,将会介绍 gRPC 相关的一些知识。简单来讲 gRPC 是一个 基于 HTTP/2 协议设计的 RPC 框架,它采用了 Protobuf 作为 IDL 你是否有过疑惑,它们都是些什么?本文将会介绍一些常用的知识和概念,更详...
摘要:带入及相关介绍原文地址带入及相关介绍项目地址作为开篇章,将会介绍相关的一些知识。 带入gRPC:gRPC及相关介绍 原文地址:带入gRPC:gRPC及相关介绍 项目地址:go-grpc-example 作为开篇章,将会介绍 gRPC 相关的一些知识。简单来讲 gRPC 是一个 基于 HTTP/2 协议设计的 RPC 框架,它采用了 Protobuf 作为 IDL 你是否有过疑惑,它们都...
摘要:结构作为服务端作为序列化数据的协议前端通讯演示地址服务端实现启动类长连接示例主线程组从线程组请求的解码和编码把多个消息转换为一个单一的或是,原因是解码器会在每个消息中生成多个消息对象主要用于处理大数据流,比如一个大小的文件如果你直接传输肯定 结构 netty 作为服务端 protobuf 作为序列化数据的协议 websocket 前端通讯 演示 GitHub 地址 showImg(...
摘要:结构作为服务端作为序列化数据的协议前端通讯演示地址服务端实现启动类长连接示例主线程组从线程组请求的解码和编码把多个消息转换为一个单一的或是,原因是解码器会在每个消息中生成多个消息对象主要用于处理大数据流,比如一个大小的文件如果你直接传输肯定 结构 netty 作为服务端 protobuf 作为序列化数据的协议 websocket 前端通讯 演示 GitHub 地址 showImg(...
阅读 1841·2021-08-19 11:12
阅读 1418·2021-07-25 21:37
阅读 979·2019-08-30 14:07
阅读 1259·2019-08-30 13:12
阅读 644·2019-08-30 11:00
阅读 3522·2019-08-29 16:28
阅读 982·2019-08-29 15:33
阅读 2959·2019-08-26 13:40