个人 vue+webscoket+protobuf 从零到写出一个demo的踩坑记录

简单解释下protobuf ，它就是个又小又快的数据传输格式。

从网上下载了一个原生js+webscoket+protobuf的demo

找的这个demo是可以完美运行（注意要在服务器上打开，本地双击是没用的，demo只上传了前端部分

遇到坑了

---

当你准备将这个原生js的demo修改成vue项目时，你就会遇到第一个坑了，引入后台给的 xxxx.proto文件的时候会报 illegal token '<' (/xxxx.proto, line 1) ，第一行缺少‘<’这玩意，但源码里没有这个，网上查也有老哥遇到这种情况。所以直接修改时行不通的。

重头来过 从安装protobuf编译器开始吧

vue中使用protobuf踩坑记 这位老哥的文章讲的很详细，我就是参照文章里的步骤走下来的，读者移步去将文章看完再回来看下面的吧

webscoket配置的代码

后台给的文件代码参考

syntax ="proto2";

package com.example.nettydemo.protobuf;

//optimize_for 加快解析的速度
option optimize_for = SPEED;
option java_package = "com.example.nettydemo.protobuf";
option java_outer_classname="MessageData";

// 客户端发送过来的消息实体
message RequestUser{
    optional string user_name = 1;
    optional int32 age = 2;
    optional string password = 3;
}

// 返回给客户端的消息实体
message ResponseUser{
    optional string user_name = 1;
    optional int32 age = 2;
    optional string password = 3;
}

后台给的文件编译生成proto.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/light");

var $root = ($protobuf.roots["default"] || ($protobuf.roots["default"] = new $protobuf.Root()))
.addJSON({
  com: {
    nested: {
      example: {
        nested: {
          nettydemo: {
            nested: {
              protobuf: {
                options: {
                  optimize_for: "SPEED",
                  java_package: "com.example.nettydemo.protobuf",
                  java_outer_classname: "MessageData"
                },
                nested: {
                  RequestUser: {
                    fields: {
                      userName: {
                        type: "string",
                        id: 1
                      },
                      age: {
                        type: "int32",
                        id: 2
                      },
                      password: {
                        type: "string",
                        id: 3
                      }
                    }
                  },
                  ResponseUser: {
                    fields: {
                      userName: {
                        type: "string",
                        id: 1
                      },
                      age: {
                        type: "int32",
                        id: 2
                      },
                      password: {
                        type: "string",
                        id: 3
                      }
                    }
                  }
                }
              }
            }
          }
        }
      }
    }
  }
});

module.exports = $root;

参考文档

xiaosi：vue中使用protobuf踩坑记