just do it
最近在写一个web IM 项目，虽然本人主打golang后端，但是部分前端还是需要自己解决。因为这是一个IM系统，所以不考虑使用json来传送数据，改用protocol buffers ，优点见官网。由于前端不太熟练，经常被Angular坑，包括这次，花费我一个下午时间来解决Angular2+ 使用 Protocol Buffers的问题。
灵感来源：Using protocol buffers with Node.js + Swagger + Angular
进入正题，本机环境 Linux ubuntu
1. 定义一个简单的 .proto 文件
具体的protocol buffers 的.proto文件定义见官网，下面展现一个简单的小例子：
// Protocol.proto
syntax="proto3";
package Protocol;
message C2CSendRequest{
int64 from = 1; //发送者
int64 to = 2; //接受者
string content = 3 ; //消息内容
}
2.生成 .js 和 .d.ts 文件
首先使用npm命令 安装 protobuf.js：
npm install protobufjs
然后你会得到 pbjs 和 pbts 这两个命令 [注意下面！有坑！]
这两个命令都在 node_modules/protobufjs/cli/bin/ 路径底下(看清楚这路径有cli)，你如果不知道在哪里的话
执行 sudo find / -name pbjs
得到下面的输出
pjw@O-E-M:~$ sudo find / -name pbjs
find: ‘/tmp/.mount_Shadowl3Qfnt’: 权限不够
/usr/local/node-v10.15.0-linux-x64/bin/pbjs
/usr/local/node-v10.15.0-linux-x64/lib/node_modules/pbjs
/home/pjw/node_modules/.bin/pbjs
/home/pjw/node_modules/protobufjs/bin/pbjs
/home/pjw/node_modules/protobufjs/cli/bin/pbjs <===就是这个目录的 pbjs，不是别的目录。(注意这个/home/pjw是我的家目录目录）
/home/pjw/.local/share/Trash/files/protobuf.2.js/cli/bin/pbjs
/home/pjw/.local/share/Trash/files/protobuf.js/bin/pbjs
/home/pjw/.local/share/Trash/files/protobuf.js/cli/bin/pbjs
这目录底下的两个命令还是不可以执行的，在这个目录底下执行：
sudo chmod a+x pbjs
sudo chmod a+x pbts
先说一下我在这里遇到的坑：如果刚执行完 npm install protobufjs ,马上执行 pbjs 命令，这条命令是不正确的，并且你执行 pbts 会显示找不到命令。而正确的命令是在 node_modules/protobufjs/cli/bin/底下。
正式开始生成.js 和 .d.ts 文件：
../node_modules/protobufjs/cli/bin/pbjs -t static-module -w commonjs -o Protocol.js Protocol.proto
../node_modules/protobufjs/cli/bin/pbts -o Protocol.d.ts Protocol.js
分别生成 Protocol.js 和 Protocol.d.ts 。
这时候 Protocol.d.ts 文件有些错误，Cannot find name 'Long', 原因是 .proto 文件有些字段是 int64 类型 。
解决办法 在Protocol.d.ts 文件第二行插入 ：
import {Long} from "protobufjs";
那么现在 js和 .d.ts 声明文件也有了，那如何在Angular上使用。
3. protobuf 在Angular 简单使用
首先，简单的测试一下是否可以再Angular上面使用。
import { Injectable } from '@angular/core';
import { Protocol } from "./Protocol"; <====引入模块
@Injectable()
export class TestService {
request: Protocol.C2CSendRequest = new(Protocol.C2CSendRequest); <=== new 一个 message
constructor() { }
test(){
this.request.content="dasdasdas"; <===使用它
this.request.from=1;
this.request.msgid=222;
this.request.timestamp=231412;
console.log(this.request)
}
}
简单的接收和发送：
import { Injectable } from '@angular/core';
import { Protocol } from "./protocol/Protocol";
@Injectable()
export class WebsocketService {
ws: WebSocket;
collection: Protocol.MessageRequest = new(Protocol.MessageRequest);
constructor() { }
createSocket(url:string){
this.ws = new WebSocket(url);
this.ws.onopen = function() {
console.log("流打开")
};
//接收消息
this.ws.onmessage = function(evt) { <==等待消息到来
let reader = new FileReader();
reader.readAsArrayBuffer(evt.data);
reader.onload = function (e) {
let buf = new Uint8Array(reader.result as ArrayBuffer);
let conn = Protocol.MessageResponse.decode(buf); <=== protocol buf 反序列化
console.log(conn)
}};
this.ws.onclose = function() {
console.log("流结束")
};
}
//发送消息
sendMessage(){
let msg = new(Protocol.MessageResponse)
msg.content = "testing websocket protocol buf"
msg.msgid = 28;
this.ws.send(Protocol.MessageRequest.encode(msg).finish()) <== 编码发送
}
}
4.总结
其实在这篇文章灵感来源：Using protocol buffers with Node.js + Swagger + Angular讲的很详细，是我大部分的借鉴来源。虽然一开始搜到这篇文章，但是因为是英文没有详细阅读，而是随意浏览，错过这个解决办法。幸好师姐帮我解决问题的时候，把这篇文章再看一遍，才发现里面的解决方案。其中一直困扰着我的问题就是： 为什么我的 pbjs 生成的js文件和别人的生成js文件不一样，即使是.proto文件相同。最后是发现 是node_modules/protobufjs/cli/bin目录底下的命令才是真正需要的命令。
5.补充
Protocol.js 文件内容：
/*eslint-disable block-scoped-var, id-length, no-control-regex, no-magic-numbers, no-prototype-builtins, no-redeclare, no-shadow, no-var, sort-vars*/
"use strict";
var $protobuf = require("protobufjs/minimal");
// Common aliases
var $Reader = $protobuf.Reader, $Writer = $protobuf.Writer, $util = $protobuf.util;
// Exported root namespace
var $root = $protobuf.roots["default"] || ($protobuf.roots["default"] = {});
$root.Protocol = (function() {
/**
* Namespace Protocol.
* @exports Protocol
* @namespace
*/
var Protocol = {};
Protocol.C2CSendRequest = (function() {
/**
* Properties of a C2CSendRequest.
* @memberof Protocol
* @interface IC2CSendRequest
* @property {number|Long|null} [from] C2CSendRequest from
* @property {number|Long|null} [to] C2CSendRequest to
* @property {string|null} [content] C2CSendRequest content
*/
/**
* Constructs a new C2CSendRequest.
* @memberof Protocol
* @classdesc Represents a C2CSendRequest.
* @implements IC2CSendRequest
* @constructor
* @param {Protocol.IC2CSendRequest=} [properties] Properties to set
*/
function C2CSendRequest(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]];
}
/**
* C2CSendRequest from.
* @member {number|Long} from
* @memberof Protocol.C2CSendRequest
* @instance
*/
C2CSendRequest.prototype.from = $util.Long ? $util.Long.fromBits(0,0,false) : 0;
/**
* C2CSendRequest to.
* @member {number|Long} to
* @memberof Protocol.C2CSendRequest
* @instance
*/
C2CSendRequest.prototype.to = $util.Long ? $util.Long.fromBits(0,0,false) : 0;
/**
* C2CSendRequest content.
* @member {string} content
* @memberof Protocol.C2CSendRequest
* @instance
*/
C2CSendRequest.prototype.content = "";
/**
* Creates a new C2CSendRequest instance using the specified properties.
* @function create
* @memberof Protocol.C2CSendRequest
* @static
* @param {Protocol.IC2CSendRequest=} [properties] Properties to set
* @returns {Protocol.C2CSendRequest} C2CSendRequest instance
*/
C2CSendRequest.create = function create(properties) {
return new C2CSendRequest(properties);
};
/**
* Encodes the specified C2CSendRequest message. Does not implicitly {@link Protocol.C2CSendRequest.verify|verify} messages.
* @function encode
* @memberof Protocol.C2CSendRequest
* @static
* @param {Protocol.IC2CSendRequest} message C2CSendRequest message or plain object to encode
* @param {$protobuf.Writer} [writer] Writer to encode to
* @returns {$protobuf.Writer} Writer
*/
C2CSendRequest.encode = function encode(message, writer) {
if (!writer)
writer = $Writer.create();
if (message.from != null && message.hasOwnProperty("from"))
writer.uint32(/* id 1, wireType 0 =*/8).int64(message.from);
if (message.to != null && message.hasOwnProperty("to"))
writer.uint32(/* id 2, wireType 0 =*/16).int64(message.to);
if (message.content != null && message.hasOwnProperty("content"))
writer.uint32(/* id 3, wireType 2 =*/26).string(message.content);
return writer;
};
/**
* Encodes the specified C2CSendRequest message, length delimited. Does not implicitly {@link Protocol.C2CSendRequest.verify|verify} messages.
* @function encodeDelimited
* @memberof Protocol.C2CSendRequest
* @static
* @param {Protocol.IC2CSendRequest} message C2CSendRequest message or plain object to encode
* @param {$protobuf.Writer} [writer] Writer to encode to
* @returns {$protobuf.Writer} Writer
*/
C2CSendRequest.encodeDelimited = function encodeDelimited(message, writer) {
return this.encode(message, writer).ldelim();
};
/**
* Decodes a C2CSendRequest message from the specified reader or buffer.
* @function decode
* @memberof Protocol.C2CSendRequest
* @static
* @param {$protobuf.Reader|Uint8Array} reader Reader or buffer to decode from
* @param {number} [length] Message length if known beforehand
* @returns {Protocol.C2CSendRequest} C2CSendRequest
* @throws {Error} If the payload is not a reader or valid buffer
* @throws {$protobuf.util.ProtocolError} If required fields are missing
*/
C2CSendRequest.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.Protocol.C2CSendRequest();
while (reader.pos < end) {
var tag = reader.uint32();
switch (tag >>> 3) {
case 1:
message.from = reader.int64();
break;
case 2:
message.to = reader.int64();
break;
case 3:
message.content = reader.string();
break;
default:
reader.skipType(tag & 7);
break;
}
}
return message;
};
/**
* Decodes a C2CSendRequest message from the specified reader or buffer, length delimited.
* @function decodeDelimited
* @memberof Protocol.C2CSendRequest
* @static
* @param {$protobuf.Reader|Uint8Array} reader Reader or buffer to decode from
* @returns {Protocol.C2CSendRequest} C2CSendRequest
* @throws {Error} If the payload is not a reader or valid buffer
* @throws {$protobuf.util.ProtocolError} If required fields are missing
*/
C2CSendRequest.decodeDelimited = function decodeDelimited(reader) {
if (!(reader instanceof $Reader))
reader = new $Reader(reader);
return this.decode(reader, reader.uint32());
};
/**
* Verifies a C2CSendRequest message.
* @function verify
* @memberof Protocol.C2CSendRequest
* @static
* @param {Object.} message Plain object to verify
* @returns {string|null} `null` if valid, otherwise the reason why it is not
*/
C2CSendRequest.verify = function verify(message) {
if (typeof message !== "object" || message === null)
return "object expected";
if (message.from != null && message.hasOwnProperty("from"))
if (!$util.isInteger(message.from) && !(message.from && $util.isInteger(message.from.low) && $util.isInteger(message.from.high)))
return "from: integer|Long expected";
if (message.to != null && message.hasOwnProperty("to"))
if (!$util.isInteger(message.to) && !(message.to && $util.isInteger(message.to.low) && $util.isInteger(message.to.high)))
return "to: integer|Long expected";
if (message.content != null && message.hasOwnProperty("content"))
if (!$util.isString(message.content))
return "content: string expected";
return null;
};
/**
* Creates a C2CSendRequest message from a plain object. Also converts values to their respective internal types.
* @function fromObject
* @memberof Protocol.C2CSendRequest
* @static
* @param {Object.} object Plain object
* @returns {Protocol.C2CSendRequest} C2CSendRequest
*/
C2CSendRequest.fromObject = function fromObject(object) {
if (object instanceof $root.Protocol.C2CSendRequest)
return object;
var message = new $root.Protocol.C2CSendRequest();
if (object.from != null)
if ($util.Long)
(message.from = $util.Long.fromValue(object.from)).unsigned = false;
else if (typeof object.from === "string")
message.from = parseInt(object.from, 10);
else if (typeof object.from === "number")
message.from = object.from;
else if (typeof object.from === "object")
message.from = new $util.LongBits(object.from.low >>> 0, object.from.high >>> 0).toNumber();
if (object.to != null)
if ($util.Long)
(message.to = $util.Long.fromValue(object.to)).unsigned = false;
else if (typeof object.to === "string")
message.to = parseInt(object.to, 10);
else if (typeof object.to === "number")
message.to = object.to;
else if (typeof object.to === "object")
message.to = new $util.LongBits(object.to.low >>> 0, object.to.high >>> 0).toNumber();
if (object.content != null)
message.content = String(object.content);
return message;
};
/**
* Creates a plain object from a C2CSendRequest message. Also converts values to other types if specified.
* @function toObject
* @memberof Protocol.C2CSendRequest
* @static
* @param {Protocol.C2CSendRequest} message C2CSendRequest
* @param {$protobuf.IConversionOptions} [options] Conversion options
* @returns {Object.} Plain object
*/
C2CSendRequest.toObject = function toObject(message, options) {
if (!options)
options = {};
var object = {};
if (options.defaults) {
if ($util.Long) {
var long = new $util.Long(0, 0, false);
object.from = options.longs === String ? long.toString() : options.longs === Number ? long.toNumber() : long;
} else
object.from = options.longs === String ? "0" : 0;
if ($util.Long) {
var long = new $util.Long(0, 0, false);
object.to = options.longs === String ? long.toString() : options.longs === Number ? long.toNumber() : long;
} else
object.to = options.longs === String ? "0" : 0;
object.content = "";
}
if (message.from != null && message.hasOwnProperty("from"))
if (typeof message.from === "number")
object.from = options.longs === String ? String(message.from) : message.from;
else
object.from = options.longs === String ? $util.Long.prototype.toString.call(message.from) : options.longs === Number ? new $util.LongBits(message.from.low >>> 0, message.from.high >>> 0).toNumber() : message.from;
if (message.to != null && message.hasOwnProperty("to"))
if (typeof message.to === "number")
object.to = options.longs === String ? String(message.to) : message.to;
else
object.to = options.longs === String ? $util.Long.prototype.toString.call(message.to) : options.longs === Number ? new $util.LongBits(message.to.low >>> 0, message.to.high >>> 0).toNumber() : message.to;
if (message.content != null && message.hasOwnProperty("content"))
object.content = message.content;
return object;
};
/**
* Converts this C2CSendRequest to JSON.
* @function toJSON
* @memberof Protocol.C2CSendRequest
* @instance
* @returns {Object.} JSON object
*/
C2CSendRequest.prototype.toJSON = function toJSON() {
return this.constructor.toObject(this, $protobuf.util.toJSONOptions);
};
return C2CSendRequest;
})();
return Protocol;
})();
module.exports = $root;
Protocol.d.ts 文件内容：
import * as $protobuf from "protobufjs";
import {Long} from "protobufjs";
/** Namespace Protocol. */
export namespace Protocol {
/** Properties of a C2CSendRequest. */
interface IC2CSendRequest {
/** C2CSendRequest from */
from?: (number|Long|null);
/** C2CSendRequest to */
to?: (number|Long|null);
/** C2CSendRequest content */
content?: (string|null);
}
/** Represents a C2CSendRequest. */
class C2CSendRequest implements IC2CSendRequest {
/**
* Constructs a new C2CSendRequest.
* @param [properties] Properties to set
*/
constructor(properties?: Protocol.IC2CSendRequest);
/** C2CSendRequest from. */
public from: (number|Long);
/** C2CSendRequest to. */
public to: (number|Long);
/** C2CSendRequest content. */
public content: string;
/**
* Creates a new C2CSendRequest instance using the specified properties.
* @param [properties] Properties to set
* @returns C2CSendRequest instance
*/
public static create(properties?: Protocol.IC2CSendRequest): Protocol.C2CSendRequest;
/**
* Encodes the specified C2CSendRequest message. Does not implicitly {@link Protocol.C2CSendRequest.verify|verify} messages.
* @param message C2CSendRequest message or plain object to encode
* @param [writer] Writer to encode to
* @returns Writer
*/
public static encode(message: Protocol.IC2CSendRequest, writer?: $protobuf.Writer): $protobuf.Writer;
/**
* Encodes the specified C2CSendRequest message, length delimited. Does not implicitly {@link Protocol.C2CSendRequest.verify|verify} messages.
* @param message C2CSendRequest message or plain object to encode
* @param [writer] Writer to encode to
* @returns Writer
*/
public static encodeDelimited(message: Protocol.IC2CSendRequest, writer?: $protobuf.Writer): $protobuf.Writer;
/**
* Decodes a C2CSendRequest message from the specified reader or buffer.
* @param reader Reader or buffer to decode from
* @param [length] Message length if known beforehand
* @returns C2CSendRequest
* @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): Protocol.C2CSendRequest;
/**
* Decodes a C2CSendRequest message from the specified reader or buffer, length delimited.
* @param reader Reader or buffer to decode from
* @returns C2CSendRequest
* @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)): Protocol.C2CSendRequest;
/**
* Verifies a C2CSendRequest 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 a C2CSendRequest message from a plain object. Also converts values to their respective internal types.
* @param object Plain object
* @returns C2CSendRequest
*/
public static fromObject(object: { [k: string]: any }): Protocol.C2CSendRequest;
/**
* Creates a plain object from a C2CSendRequest message. Also converts values to other types if specified.
* @param message C2CSendRequest
* @param [options] Conversion options
* @returns Plain object
*/
public static toObject(message: Protocol.C2CSendRequest, options?: $protobuf.IConversionOptions): { [k: string]: any };
/**
* Converts this C2CSendRequest to JSON.
* @returns JSON object
*/
public toJSON(): { [k: string]: any };
}
}