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.<string,*>} 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.<string,*>} 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.<string,*>} 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.<string,*>} 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 };
    }
}