使用protobuf进行前后端数据交互
发表于:2023-05-22 | 分类: 前端
字数统计: 382 | 阅读时长: 1分钟 | 阅读量:
在前后端交互过程中,一般采用json作为通信协议,不过在特殊情况下:
比如最近项目中要求websocket短时间内频繁由后台推送大量数据给前端,由于网络原因很容易阻塞
– 这时就需要将数据包进行压缩/序列化&反序列化等处理以减小负载。经过考虑最终选择protobuf作为通信协议,先把数据进行序列化再发送…接收…处理
  1. 首先是前后端协商定义数据格式 => 最终后端语言定义并产出.proto文件供前后端使用
    1
    2
    3
    4
    5
    6
    7
    // 首先加载proto实体,确定解析的标准
    let model, requestModel;
    var protobuf = require("protobufjs");
    protobuf.load("../example.proto", function (event, root) {
    model = root.lookupType("com.modelName");
    requestModel = root.lookupType('com.requestModelName')
    });
  2. 前端序列化json && 发送proto数据
    1
    2
    3
    4
    5
    6
    7
    8
    9
    10
    let payload = {param1:'paramData'};
    var errMsg = requestModel.verify(payload);
    if (errMsg)
    if (typeof fail === "function")
    throw err;
    // Create a new message
    let message = RequestDataType.create(payload); // or use .fromObject if conversion is necessary
    // Encode a message to an Uint8Array (browser) or Buffer (node)
    let buffer = RequestDataType.encode(message).finish();
    // buffer 即为需要发送的数据包
  3. 前端解析接收到的proto数据
    1
    2
    3
    4
    5
    6
    7
    8
    9
    10
    11
    12
    // 这里意思是模拟接收数据的回调
    xxx.then(res => {
    let reader = new FileReader();
    // 假设res.data为接收到的数据包
    reader.readAsArrayBuffer(res.data);
    reader.onload =(e) => {
    let buf = new Uint8Array(e.target.result);
    // realData即为解析后的数据
    let realData = model.decode(buf);
    // todo...根据返回的realData进行业务逻辑处理
    };
    })
上一篇:
Cesium加载3dtileset并修改位置/偏移位置
下一篇:
记一次Cesium的property插值用法