前端使用google-protobuf传输数据

理解

protoBuf（下面简称PB）全称Protocol Buffers，由Google公司开发出来且其内部广泛使用，对比其它的编解码框架，有如下几个优点：

1. 跨语言支持，如Java、C++、Python、js等
2. 编码后消息更小，因此，更有利于网络传输和本地存储，当然，性能也很强大
3. 不同版本协议的数据结构前向兼容

以我个人站在前端的角度去看，pb虽然在一定程度上增加了前端的工作量，但是它可以更好增加数据的私密性，而且编码后数据变得更小。

安装与使用

这里主要使用pb进行数据的序列化和反序列化，在此之前需要后端生成一份 .proto的文件给到前端。
这里从网上拿了一份.proto作例子

syntax = "proto3";
package http;

/**
 * 聊天类型
 */
//----------枚举--------------------///
enum ChatType {
    CHAT_TYPE_UNKNOW = 0;//未知
    CHAT_TYPE_PUBLIC = 1;//公聊
    CHAT_TYPE_PRIVATE = 2;//私聊
}
/**
 * 聊天请求
 */
message ChatReqBody {
    int64 time = 1;//消息发送时间
    ChatType type = 2; //聊天类型
    string text = 3; //聊天内容
    string group = 4; //目标组id
    int32 toId = 5; //目标用户id，
    string toNick = 6; //目标用户nick
}

/**
 * 聊天响应
 */
//----------通用message--------------------///
message ChatRespBody {
    int64 time = 1;//消息发送时间
    ChatType type = 2; //聊天类型
    string text = 3; //聊天内容
    int32 fromId = 4; //发送聊天消息的用户id
    string fromNick = 5; //发送聊天消息的用户nick
    int32 toId = 6; //目标用户id
    string toNick = 7; //目标用户nick
    string group = 8; //目标组id
    Tests test = 9
}

message  Tests {
    string aa = 1; 
    string bb = 2; 
}

package http为包名编译后文件**_pb的命名
下一步需要用包管理工具（npm或者yarn）安装google-protobuf

npm install google-protobuf

然后使用下面指令把.proto转换为js

如果要使用闭包导入运行如下命令：

protoc --js_out=library=myproto_libs,binary:. src/proto/***.proto

如果要使用CommonJS导入，则生成应运行如下命令：

protoc --js_out=import_style=commonjs,binary:. src/proto/***.proto

src/proto/***.proto为需要转换的proto文件
可用空格 输入多个proto文件

执行完成后会在同目录下输出其对应的***_pb.js的文件
在你需要序列化或反序列化的js中引入该文件进行操作即可

import proto from '../proto/imweb_pb'

var chatRespBody= new proto.ChatRespBody()
//数据写入
chatRespBody.setTime('abcdefg')
chatRespBody.setFromnick('小明') 
//枚举型的数据写入
const chatTypeList = ['CHAT_TYPE_UNKNOW', 'CHAT_TYPE_PUBLIC', 'CHAT_TYPE_PRIVATE']
chatRespBody.setType(proto.ChatType[chatTypeList[0]]) //ChatType为定义好的枚举类型
//当你要写入的数据写入完成后直接把chatRespBody return即可

//数据读取 这里会有两种方法 当你数据模型比较简单的时候可以用第一种
// content为proto编译后的数据 现在需要把该数据进行反编译
let data = proto.ChatRespBody.deserializeBinary(content)
// 第一种：   
//获取某个参数 
let text = data.getText()
//若message结构体内还有message的参数，那么需要像下面那样获取
let text = data.getTests().getAa()
// 也可以用第二种方法直接获取到他整个的数据结构
const dataJson = proto.ChatRespBody.toObject(false, data)

注意:set、get的方法不管proto文件内命名的参数是否驼峰都只需开头大写后面全小写