基于 protobuf 协议实现高性能的 IM 客户端

ssshooter 发布于2019-08-26 10:33 / 2704人阅读

摘要：涉及到计算机基础知识，例如字节缓冲大小端等。是指用多少位表示的整数，例如就是用位即一个字节表示的整数，二进制范围是，对应的十进制就是。开发时通讯双方或者多方终端都遵循协议。

这里记录了使用 protobuf 协议与服务端数据交互的相关内容和知识。

涉及到计算机基础知识，例如字节、buffer 缓冲、大小端等。

字节 / Byte

1 字节代表了 8 位（bit）二进制，1 位就是 0 或 1，也是计算机最小单位。

Uint 与 Int

Int 是带正负号的整数，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 的源码

参考

云服务器服务器托管基于sip协议的webrtc媒体服务器基于webrtc的电话回声消除的研究与实现基于webrtc的视频会议系统的设计与实现基于防火墙技术的校园网络安全设计与实现

文章版权归作者所有，未经允许请勿转载,若此文章存在违规行为，您可以联系管理员删除。

转载请注明本文地址：https://www.ucloud.cn/yun/106373.html

带入gRPC：gRPC及相关介绍

摘要：原文地址带入及相关介绍项目地址作为开篇章，将会介绍相关的一些知识。原文地址：带入gRPC：gRPC及相关介绍项目地址：go-grpc-example 作为开篇章，将会介绍 gRPC 相关的一些知识。简单来讲 gRPC 是一个基于 HTTP/2 协议设计的 RPC 框架，它采用了 Protobuf 作为 IDL 你是否有过疑惑，它们都是些什么？本文将会介绍一些常用的知识和概念，更详...

y1chuan 2019-08-26 12:21 评论0 收藏0
带入gRPC：gRPC及相关介绍

摘要：带入及相关介绍原文地址带入及相关介绍项目地址作为开篇章，将会介绍相关的一些知识。带入gRPC：gRPC及相关介绍原文地址：带入gRPC：gRPC及相关介绍项目地址：go-grpc-example 作为开篇章，将会介绍 gRPC 相关的一些知识。简单来讲 gRPC 是一个基于 HTTP/2 协议设计的 RPC 框架，它采用了 Protobuf 作为 IDL 你是否有过疑惑，它们都...

AJie 2019-07-01 10:45 评论0 收藏0
netty 基于 protobuf 协议实现 websocket 版本的简易客服系统

摘要：结构作为服务端作为序列化数据的协议前端通讯演示地址服务端实现启动类长连接示例主线程组从线程组请求的解码和编码把多个消息转换为一个单一的或是，原因是解码器会在每个消息中生成多个消息对象主要用于处理大数据流，比如一个大小的文件如果你直接传输肯定结构 netty 作为服务端 protobuf 作为序列化数据的协议 websocket 前端通讯演示 GitHub 地址 showImg(...

wua_wua2012 2019-08-23 14:11 评论0 收藏0
netty 基于 protobuf 协议实现 websocket 版本的简易客服系统

摘要：结构作为服务端作为序列化数据的协议前端通讯演示地址服务端实现启动类长连接示例主线程组从线程组请求的解码和编码把多个消息转换为一个单一的或是，原因是解码器会在每个消息中生成多个消息对象主要用于处理大数据流，比如一个大小的文件如果你直接传输肯定结构 netty 作为服务端 protobuf 作为序列化数据的协议 websocket 前端通讯演示 GitHub 地址 showImg(...

Shihira 2019-08-16 14:03 评论0 收藏0