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

问题描述

尝试在Ionic 4中使用协议缓冲区对&解码消息.曾经尝试使用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.

我已经下载了协议，并用它来生成一堆_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文件的开头:

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 = {}"

我相信我已经怀疑该文件并选择了有效的消息名称.但是，如果我有一个引用其他原型文件的原型文件.在运行时如何解决?我认为使用预建的_pb.js文件更有意义.什么是超赞套餐?我的原始文件没有软件包！为什么不停地提到一些很棒的东西?不太好:令人困惑！

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文件.但是您不需要协议来做到这一点吗?哪些不一定可用.如果您知道发生了什么，这似乎很明显，但对我来说还不是很清楚.请帮助.

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

现在根据问题，使用协议生成一组_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文件，您现在可以在您的角度项目中使用它.我发现类似这样的事情一次可以很好地生成堆:

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;

完成工作！

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