离子中的协议缓冲区 [英] Protocol Buffers in Ionic

问题描述

尝试在 Ionic 4 中使用 Protocol Buffers 来编码 &解码消息.曾尝试使用 protobufjs 和 google-protobuf，但两者都无法工作.

Attempting to use Protocol Buffers in Ionic 4 to encode & decode messages. Have tried to use protobufjs and also google-protobuf, but can't get either to work.

我已经下载了 protoc 并用它生成了一堆 _pb.js 文件，每个 .proto 文件一个.没关系.

I have downloaded the protoc and used it to generate a bunch of _pb.js files, one for each .proto file. That's fine.

首先关注 protobuf 示例.示例代码如下:

Focusing on the protobuf example first. Here's the example code:

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 文件的开头:

I make a few changes to match my files. change the name of the proto file. But my proto file doesn't have a package name in it. So I just used the message name. Firstly here's the start of my .proto file:

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;
}

现在是我修改过的代码:

Now here's the code as I've changed it:

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)}`);

    });

它似乎不起作用.我的控制台显示:

It doesn't seem to work. My console shows this:

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

我相信我已经仔细查看了该文件并选择了一个有效的消息名称.但是如果我有一个引用其他 proto 文件的 proto 文件.这是如何在运行时解决的?我认为使用预构建的 _pb.js 文件会更有意义.什么是awesomepackage?我的 proto 文件没有包！为什么不断提到令人敬畏的事物?不是很棒:令人困惑！

I believe I've ssussessfuly poited to the file and chosen a valid message name. But If I have a proto file that references other proto files. How is this resolved at runtime? I assumed using prebuilt _pb.js files would make more sense. What is awesomepackage? My proto file has no packages! Why the incessant reference to awesome things? Not awesome: confusing!

这段代码看起来可以直接消费.proto文件.但是你不需要 protoc 来做到这一点吗?这不一定可用.如果你知道发生了什么，这可能看起来很明显，但对我来说并不是很清楚.请帮忙.

This code looks like it can directly consume the .proto file. But won't you need protoc to do this? Which won't necessarily be available. This may seem obvious if you know what's going on, but it's not quite coming together for me. help please.

推荐答案

一个可能的答案是使用 google-protobuf.见 https://github.com/protocolbuffers/protobuf/tree/master/js

One possible answer is to use google-protobuf. See https://github.com/protocolbuffers/protobuf/tree/master/js

$ npm install google-protobug --save

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

Now as per the question, use protoc to generate a set of _pb.js files. Select the common JS import style when you run your commands so the next step lines up with your outputs:

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

这将创建一个 _pb.js 文件，您现在可以在您的 angular 项目中使用它.我发现这样的事情可以很好地一次生成堆:

This creates a _pb.js files which you can now use in your angular project. I found that something like this worked well to generate heaps at a time:

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

您可以像这样为 wifi_scan_pb 导入它们:

You can import them using like this for 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]}`);

您需要检查 _pb 文件以获取您正在构建的对象中的每个条目需要使用的方法的确切名称:'setScanFinished' 或其他...

You'll need to check the _pb file to get the exact name of the method you need to use for each entry in the object you're building: 'setScanFinished' or whatever...

和上面的组件:

declare var require: any;

完成工作！

这篇关于离子中的协议缓冲区的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！