快应用接入 google-protobuf 详解

Posted 2022-05-31 王永迪

前言

最近在使用快应用做IM相关开发，与后端使用时遇到了使用 protobuf 的问题，顺便介绍下Protobuf 之快应用接入教程和踩过的坑。

问题

**主要有2点: **

1. 前端常用的protobufjs集成进快应用时会遇到XMLHTTPRequest undefined的问题，由于快应用并不是webview的运行环境导致
2. 用pbjs 0.0.14 直接生成的js文件会存在枚举类型&嵌套对象无法序列化&反序列化的问题

接入教程

我们主要会使用到一下几个工具：

protoc : 根据协议文件生成指定语言的protobuf代码
CommonJS : js模块化规范
npm : Nodejs包管理工具
browserify : CommonJS格式转换工具

下载 protoc

github 链接：https://github.com/google/protobuf/releases
或者使用：brew install protoc方式安装

安装npm相关包

npm install -g browserify
npm install google-protobuf

编写 proto 协议文件

im.proto

syntax = "proto3";

// 消息类型
message Message 
    string uid = 1; // 设备id
    string clientVersion = 2; // 客户端版本
    string deviceId = 3; // 设备唯一标识
    string deviceModel = 4; // 设备型号 (iPhone8/Mac OS X 10_6_8/Windows NT 6.1)

生成文件

一、生成 im_pb.js

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

二、声明导出文件

var proto = require("./im_pb");

module.exports = 
    proto: proto
;

三、导出最终文件

browserify exports.js > improtobuf.js

接入快应用

 import improtobuf from './improtobuf'

let msg = new proto.Message()
sauthMsg.setUid(data.uid)
sauthMsg.setClientversion(data.clientVersion)
sauthMsg.setDeviceid(data.deviceId)
console.log("proto bytes: " + msg.serializeBinary());

var message2 = proto.Message.deserializeBinary(msg.serializeBinary()).toObject();
console.log("bytes: pbpbpbpbpbpbpbpb" + message2);