protobufjs有3中使用方式，实时解析方式、json解析方式、静态代码方式（事先导出proto的js文件）。
那么三种方式，可想而知，静态代码执行速度最快，并且可以直接访问到proto中定义的字段，不需要用字符串来传字段名字。网络传输的时候加解码出来的都是对象。
proto文件看一下
// awesome.proto
package awesomepackage;
syntax = "proto3";
message AwesomeMessage {
string awesome_field = 1; // becomes awesomeField
}
有个专门的工具链接可以把.proto文件导出.js文件以及对应的.d.ts文件。
首先安装Node.js
然后，安装protobufjs：
npm install protobufjs
装完以后，可以用命令导出.js文件和.d.ts文件
$> pbjs -t static-module -w commonjs -o xxxx.js xxxxx.proto
$> pbts -o xxxxx.d.ts xxxxx.js
第一行导出js文件，第二行把导出的js生成对应的.d.ts文件，这样就可以在TS代码中调用了。
-t -static-module参数，表示选的是静态代码模式。
-w commonjs表示用什么标准来输出js代码。支持default，es6 需要可以在git上查看类型
这里就使用commonjs来进行操作
image.png
转完以后可以看到js和.d.ts文件
接下来导入进egret
image.png
这个是protobuf的目录 bundles 就是刚刚转码的
library是protobuf的支持包~（这里改了个名字）
protocol.min.js是我自己用uglifyjs命令行工具自动生成的，uglifyjs也是nodejs提供的一个模块，感兴趣的可以去搜一下，能压缩不少。
将文件目录这么放就ojbk了。
image.png
tsconfig文件
image.png
egretProperties.json文件
image.png
本以为这样就可以跑起来了 但是还是报错了 转换的proto文件 是有问题的
接下来我们进行proto转出文件的修改
首先看.d.ts文件
这是原版文件
import * as $protobuf from "protobufjs";
/** Namespace awesomepackage. */
export namespace awesomepackage {
/** Properties of an AwesomeMessage. */
interface IAwesomeMessage {
/** AwesomeMessage awesomeField */
awesomeField?: (string|null);
}
/** Represents an AwesomeMessage. */
class AwesomeMessage implements IAwesomeMessage {
/**
* Constructs a new AwesomeMessage.
* @param [properties] Properties to set
*/
constructor(properties?: awesomepackage.IAwesomeMessage);
/** AwesomeMessage awesomeField. */
public awesomeField: string;
/**
* Creates a new AwesomeMessage instance using the specified properties.
* @param [properties] Properties to set
* @returns AwesomeMessage instance
*/
public static create(properties?: awesomepackage.IAwesomeMessage): awesomepackage.AwesomeMessage;
/**
* Encodes the specified AwesomeMessage message. Does not implicitly {@link awesomepackage.AwesomeMessage.verify|verify} messages.
* @param message AwesomeMessage message or plain object to encode
* @param [writer] Writer to encode to
* @returns Writer
*/
public static encode(message: awesomepackage.IAwesomeMessage, writer?: $protobuf.Writer): $protobuf.Writer;
/**
* Encodes the specified AwesomeMessage message, length delimited. Does not implicitly {@link awesomepackage.AwesomeMessage.verify|verify} messages.
* @param message AwesomeMessage message or plain object to encode
* @param [writer] Writer to encode to
* @returns Writer
*/
public static encodeDelimited(message: awesomepackage.IAwesomeMessage, writer?: $protobuf.Writer): $protobuf.Writer;
/**
* Decodes an AwesomeMessage message from the specified reader or buffer.
* @param reader Reader or buffer to decode from
* @param [length] Message length if known beforehand
* @returns AwesomeMessage
* @throws {Error} If the payload is not a reader or valid buffer
* @throws {$protobuf.util.ProtocolError} If required fields are missing
*/
public static decode(reader: ($protobuf.Reader|Uint8Array), length?: number): awesomepackage.AwesomeMessage;
/**
* Decodes an AwesomeMessage message from the specified reader or buffer, length delimited.
* @param reader Reader or buffer to decode from
* @returns AwesomeMessage
* @throws {Error} If the payload is not a reader or valid buffer
* @throws {$protobuf.util.ProtocolError} If required fields are missing
*/
public static decodeDelimited(reader: ($protobuf.Reader|Uint8Array)): awesomepackage.AwesomeMessage;
/**
* Verifies an AwesomeMessage message.
* @param message Plain object to verify
* @returns `null` if valid, otherwise the reason why it is not
*/
public static verify(message: { [k: string]: any }): (string|null);
/**
* Creates an AwesomeMessage message from a plain object. Also converts values to their respective internal types.
* @param object Plain object
* @returns AwesomeMessage
*/
public static fromObject(object: { [k: string]: any }): awesomepackage.AwesomeMessage;
/**
* Creates a plain object from an AwesomeMessage message. Also converts values to other types if specified.
* @param message AwesomeMessage
* @param [options] Conversion options
* @returns Plain object
*/
public static toObject(message: awesomepackage.AwesomeMessage, options?: $protobuf.IConversionOptions): { [k: string]: any };
/**
* Converts this AwesomeMessage to JSON.
* @returns JSON object
*/
public toJSON(): { [k: string]: any };
}
}
改动后 第一句 type Long = protobuf.Long;替换 全局搜索 $protobuf替换为protobuf
type Long = protobuf.Long;
/** Namespace awesomepackage. */
declare namespace awesomepackage {
/** Properties of an AwesomeMessage. */
interface IAwesomeMessage {
/** AwesomeMessage awesomeField */
awesomeField?: (string|null);
}
/** Represents an AwesomeMessage. */
class AwesomeMessage implements IAwesomeMessage {
/**
* Constructs a new AwesomeMessage.
* @param [properties] Properties to set
*/
constructor(properties?: awesomepackage.IAwesomeMessage);
/** AwesomeMessage awesomeField. */
public awesomeField: string;
/**
* Creates a new AwesomeMessage instance using the specified properties.
* @param [properties] Properties to set
* @returns AwesomeMessage instance
*/
public static create(properties?: awesomepackage.IAwesomeMessage): awesomepackage.AwesomeMessage;
/**
* Encodes the specified AwesomeMessage message. Does not implicitly {@link awesomepackage.AwesomeMessage.verify|verify} messages.
* @param message AwesomeMessage message or plain object to encode
* @param [writer] Writer to encode to
* @returns Writer
*/
public static encode(message: awesomepackage.IAwesomeMessage, writer?: protobuf.Writer): protobuf.Writer;
/**
* Encodes the specified AwesomeMessage message, length delimited. Does not implicitly {@link awesomepackage.AwesomeMessage.verify|verify} messages.
* @param message AwesomeMessage message or plain object to encode
* @param [writer] Writer to encode to
* @returns Writer
*/
public static encodeDelimited(message: awesomepackage.IAwesomeMessage, writer?: protobuf.Writer): protobuf.Writer;
/**
* Decodes an AwesomeMessage message from the specified reader or buffer.
* @param reader Reader or buffer to decode from
* @param [length] Message length if known beforehand
* @returns AwesomeMessage
* @throws {Error} If the payload is not a reader or valid buffer
* @throws {protobuf.util.ProtocolError} If required fields are missing
*/
public static decode(reader: (protobuf.Reader|Uint8Array), length?: number): awesomepackage.AwesomeMessage;
/**
* Decodes an AwesomeMessage message from the specified reader or buffer, length delimited.
* @param reader Reader or buffer to decode from
* @returns AwesomeMessage
* @throws {Error} If the payload is not a reader or valid buffer
* @throws {protobuf.util.ProtocolError} If required fields are missing
*/
public static decodeDelimited(reader: (protobuf.Reader|Uint8Array)): awesomepackage.AwesomeMessage;
/**
* Verifies an AwesomeMessage message.
* @param message Plain object to verify
* @returns `null` if valid, otherwise the reason why it is not
*/
public static verify(message: { [k: string]: any }): (string|null);
/**
* Creates an AwesomeMessage message from a plain object. Also converts values to their respective internal types.
* @param object Plain object
* @returns AwesomeMessage
*/
public static fromObject(object: { [k: string]: any }): awesomepackage.AwesomeMessage;
/**
* Creates a plain object from an AwesomeMessage message. Also converts values to other types if specified.
* @param message AwesomeMessage
* @param [options] Conversion options
* @returns Plain object
*/
public static toObject(message: awesomepackage.AwesomeMessage, options?: protobuf.IConversionOptions): { [k: string]: any };
/**
* Converts this AwesomeMessage to JSON.
* @returns JSON object
*/
public toJSON(): { [k: string]: any };
}
}
接下来是js文件 直接看改的吧 把require 删除 直接改成头上两句 底部export去掉 就好了
var $protobuf = window.protobuf;
$protobuf.roots.default=window;
// Common aliases
var $Reader = $protobuf.Reader, $Writer = $protobuf.Writer, $util = $protobuf.util;
// Exported root namespace
var $root = $protobuf.roots["default"] || ($protobuf.roots["default"] = {});
$root.awesomepackage = (function() {
/**
* Namespace awesomepackage.
* @exports awesomepackage
* @namespace
*/
var awesomepackage = {};
awesomepackage.AwesomeMessage = (function() {
/**
* Properties of an AwesomeMessage.
* @memberof awesomepackage
* @interface IAwesomeMessage
* @property {string|null} [awesomeField] AwesomeMessage awesomeField
*/
/**
* Constructs a new AwesomeMessage.
* @memberof awesomepackage
* @classdesc Represents an AwesomeMessage.
* @implements IAwesomeMessage
* @constructor
* @param {awesomepackage.IAwesomeMessage=} [properties] Properties to set
*/
function AwesomeMessage(properties) {
if (properties)
for (var keys = Object.keys(properties), i = 0; i < keys.length; ++i)
if (properties[keys[i]] != null)
this[keys[i]] = properties[keys[i]];
}
/**
* AwesomeMessage awesomeField.
* @member {string} awesomeField
* @memberof awesomepackage.AwesomeMessage
* @instance
*/
AwesomeMessage.prototype.awesomeField = "";
/**
* Creates a new AwesomeMessage instance using the specified properties.
* @function create
* @memberof awesomepackage.AwesomeMessage
* @static
* @param {awesomepackage.IAwesomeMessage=} [properties] Properties to set
* @returns {awesomepackage.AwesomeMessage} AwesomeMessage instance
*/
AwesomeMessage.create = function create(properties) {
return new AwesomeMessage(properties);
};
/**
* Encodes the specified AwesomeMessage message. Does not implicitly {@link awesomepackage.AwesomeMessage.verify|verify} messages.
* @function encode
* @memberof awesomepackage.AwesomeMessage
* @static
* @param {awesomepackage.IAwesomeMessage} message AwesomeMessage message or plain object to encode
* @param {$protobuf.Writer} [writer] Writer to encode to
* @returns {$protobuf.Writer} Writer
*/
AwesomeMessage.encode = function encode(message, writer) {
if (!writer)
writer = $Writer.create();
if (message.awesomeField != null && message.hasOwnProperty("awesomeField"))
writer.uint32(/* id 1, wireType 2 =*/10).string(message.awesomeField);
return writer;
};
/**
* Encodes the specified AwesomeMessage message, length delimited. Does not implicitly {@link awesomepackage.AwesomeMessage.verify|verify} messages.
* @function encodeDelimited
* @memberof awesomepackage.AwesomeMessage
* @static
* @param {awesomepackage.IAwesomeMessage} message AwesomeMessage message or plain object to encode
* @param {$protobuf.Writer} [writer] Writer to encode to
* @returns {$protobuf.Writer} Writer
*/
AwesomeMessage.encodeDelimited = function encodeDelimited(message, writer) {
return this.encode(message, writer).ldelim();
};
/**
* Decodes an AwesomeMessage message from the specified reader or buffer.
* @function decode
* @memberof awesomepackage.AwesomeMessage
* @static
* @param {$protobuf.Reader|Uint8Array} reader Reader or buffer to decode from
* @param {number} [length] Message length if known beforehand
* @returns {awesomepackage.AwesomeMessage} AwesomeMessage
* @throws {Error} If the payload is not a reader or valid buffer
* @throws {$protobuf.util.ProtocolError} If required fields are missing
*/
AwesomeMessage.decode = function decode(reader, length) {
if (!(reader instanceof $Reader))
reader = $Reader.create(reader);
var end = length === undefined ? reader.len : reader.pos + length, message = new $root.awesomepackage.AwesomeMessage();
while (reader.pos < end) {
var tag = reader.uint32();
switch (tag >>> 3) {
case 1:
message.awesomeField = reader.string();
break;
default:
reader.skipType(tag & 7);
break;
}
}
return message;
};
/**
* Decodes an AwesomeMessage message from the specified reader or buffer, length delimited.
* @function decodeDelimited
* @memberof awesomepackage.AwesomeMessage
* @static
* @param {$protobuf.Reader|Uint8Array} reader Reader or buffer to decode from
* @returns {awesomepackage.AwesomeMessage} AwesomeMessage
* @throws {Error} If the payload is not a reader or valid buffer
* @throws {$protobuf.util.ProtocolError} If required fields are missing
*/
AwesomeMessage.decodeDelimited = function decodeDelimited(reader) {
if (!(reader instanceof $Reader))
reader = new $Reader(reader);
return this.decode(reader, reader.uint32());
};
/**
* Verifies an AwesomeMessage message.
* @function verify
* @memberof awesomepackage.AwesomeMessage
* @static
* @param {Object.} message Plain object to verify
* @returns {string|null} `null` if valid, otherwise the reason why it is not
*/
AwesomeMessage.verify = function verify(message) {
if (typeof message !== "object" || message === null)
return "object expected";
if (message.awesomeField != null && message.hasOwnProperty("awesomeField"))
if (!$util.isString(message.awesomeField))
return "awesomeField: string expected";
return null;
};
/**
* Creates an AwesomeMessage message from a plain object. Also converts values to their respective internal types.
* @function fromObject
* @memberof awesomepackage.AwesomeMessage
* @static
* @param {Object.} object Plain object
* @returns {awesomepackage.AwesomeMessage} AwesomeMessage
*/
AwesomeMessage.fromObject = function fromObject(object) {
if (object instanceof $root.awesomepackage.AwesomeMessage)
return object;
var message = new $root.awesomepackage.AwesomeMessage();
if (object.awesomeField != null)
message.awesomeField = String(object.awesomeField);
return message;
};
/**
* Creates a plain object from an AwesomeMessage message. Also converts values to other types if specified.
* @function toObject
* @memberof awesomepackage.AwesomeMessage
* @static
* @param {awesomepackage.AwesomeMessage} message AwesomeMessage
* @param {$protobuf.IConversionOptions} [options] Conversion options
* @returns {Object.} Plain object
*/
AwesomeMessage.toObject = function toObject(message, options) {
if (!options)
options = {};
var object = {};
if (options.defaults)
object.awesomeField = "";
if (message.awesomeField != null && message.hasOwnProperty("awesomeField"))
object.awesomeField = message.awesomeField;
return object;
};
/**
* Converts this AwesomeMessage to JSON.
* @function toJSON
* @memberof awesomepackage.AwesomeMessage
* @instance
* @returns {Object.} JSON object
*/
AwesomeMessage.prototype.toJSON = function toJSON() {
return this.constructor.toObject(this, $protobuf.util.toJSONOptions);
};
return AwesomeMessage;
})();
return awesomepackage;
})();
接下来时白鹭引擎的使用
let ptest=new awesomepackage.AwesomeMessage();
console.log(ptest);
awesomepackage是你 proto文件 package 的包 proto在上面可以看一下
取到包名下面的AwesomeMessage 这个你可以在.d.ts里面看到的 就获取到了 生成的这个对象
然后你就可以在这个对象上操作
比如
ptest.awesome_field="protobuf"
赋值 传输的时候就可以使用对象ptest传输。
git代码地址：
https://github.com/balckban/egret_protobuf
记得star下噢·~~~~~~~
很感谢带着梦想去旅行这位老哥的教导~~