Ionic中的协议缓冲区

Question

试图使用Ionic 4中的协议缓冲区进行编码

我已经下载了协议并用它来生成一堆_pb.js文件，每个. proto文件一个。很好。

首先关注原型示例。这是示例代码：

import { load } from "protobufjs"; // respectively "./node_modules/protobufjs"

load("awesome.proto", function(err, root) {
  if (err)
    throw err;

  // example code
  const AwesomeMessage = root.lookupType("awesomepackage.AwesomeMessage");

  let message = AwesomeMessage.create({ awesomeField: "hello" });
  console.log(`message = ${JSON.stringify(message)}`);

  let buffer = AwesomeMessage.encode(message).finish();
  console.log(`buffer = ${Array.prototype.toString.call(buffer)}`);

  let decoded = AwesomeMessage.decode(buffer);
  console.log(`decoded = ${JSON.stringify(decoded)}`);
});

我做了一些更改以匹配我的文件。更改proto文件的名称。但是我的proto文件中没有包名称。所以我只是使用了消息名称。首先这是我的. proto文件的开头：

syntax = "proto3";

import "constants.proto";
import "wifi_constants.proto";

message CmdScanStart {
    bool blocking = 1;
    bool passive = 2;
    uint32 group_channels = 3;
    uint32 period_ms = 4;
}

message RespScanStart {

}

message CmdScanStatus {

}

message RespScanStatus {
    bool scan_finished = 1;
    uint32 result_count = 2;
}

下面是我修改后的代码：

load("../../assets/proto/wifi_scan.proto", function(err, root) {
      if (err)
      throw err;

      // example code
      const AwesomeMessage = root.lookupType("RespScanStatus");

      let message = AwesomeMessage.create({ scan_finished: 1, result_count: 31 }); // uint32 result_count
      console.log(`message = ${JSON.stringify(message)}`);

      let buffer = AwesomeMessage.encode(message).finish();
      console.log(`buffer = ${Array.prototype.toString.call(buffer)}`);

      let decoded = AwesomeMessage.decode(buffer);
      console.log(`decoded = ${JSON.stringify(decoded)}`);

    });

这似乎不起作用。我的控制台显示：

[ng] [console.log]: "message = {}"
[ng] [console.log]: "buffer = "
[ng] [console.log]: "decoded = {}"

我相信我已经成功地定位到文件并选择了一个有效的消息名称。但是如果我有一个引用其他原型文件的原型文件。运行时如何解决这个问题？我认为使用预构建的_pb.js文件会更有意义。什么是awesomepackage？我的原型文件没有包！为什么不停地引用很棒的东西？不棒：令人困惑！

此代码看起来可以直接使用。原型文件。但你不需要protoc来做这件事吗？这不一定可用。如果你知道发生了什么，这可能看起来很明显，但对我来说，这并不完全一致。请帮忙。

Answer 1

一个可能的答案是使用谷歌protobuf。看见https://github.com/protocolbuffers/protobuf/tree/master/js

$ npm install google-protobug --save

现在根据问题，使用protoc生成一组\u pb。js文件。运行命令时，请选择常见的JS导入样式，以便下一步与输出对齐：

$ protoc --proto_path=./proto-src-wifi/ --js_out=import_style=commonjs,binary:./proto-js ./proto-src-wifi/wifi_scan.proto

这将创建一个_pb.js文件，您现在可以在角项目中使用这些文件。我发现这样的东西可以很好地一次生成堆：

$ protoc --proto_path=./proto-src-wifi/ --js_out=import_style=commonjs,binary:./proto-js ./proto-src-wifi/*.proto

您可以使用以下方式导入它们wifi_scan_pb：

    console.log('armpit!'); 
    var messages = require("../../assets/js/wifi_scan_pb");
    var message = new messages.RespScanStatus();
    message.setScanFinished(true);
    message.setResultCount(31);
    var bytesOfStuff = message.serializeBinary();
    console.log(`bytesOfStuff = ${JSON.stringify(bytesOfStuff)}`); 

    var messageRecovered = messages.RespScanStatus.deserializeBinary(bytesOfStuff);
    console.log(`Recovered Scan finished = ${messageRecovered.array[0]}`);
    console.log(`Recovered Scan Result Count = ${messageRecovered.array[1]}`);

您需要检查\u pb文件，以获得您需要为正在构建的对象中的每个条目使用的方法的确切名称：“setscanfished”或其他。。。

组件上方：

declare var require: any;

完成任务！