前言
nodejs游戏服务器开发系列文章以nodejs+Typescript+CocosCreator+WebSocket为例，搭建服务器和客户端。
protobuf
暂时无纯ts框架的pb库，一般会使用protobufjs，git地址：https://github.com/protobufjs/protobuf.js
同时也可以参考这个文档：https://www.npmjs.com/package/protobufjs
protobufjs有很多不同的版本(minimal,light,full)，用户根据自己的项目需要选择合适的版本。各个版本的说明，可以参考git上readme.
建议不要使用git中releases的库，里面更新的慢。使用npm install protobufjs会把库下载到本地。可以看到CHANGELOG.md文档中写的是6.8.8.而在releases中最新的才6.8.6。
另外据说6以上版本protobufjs已经集成了long,bytebuffer库，不需要额外集成了。
本系列文章使用的是完整的protobufjs库（dist/protobuf.js）。
proto文件
搞个测试文件，比如命名为test.proto,内容为：
message user{
required int32 userId=1;
required string userName=2;
}
静态文件
推荐使用静态文件的方式，即预先把proto文件翻译为js文件。
需要全局安装pbjsnpm install protobufjs -g。可以使用pbjs命令用于把proto文件翻译为js静态文件。然后还可以使用pbts命令获得对应的声明文件*.d.ts
pbjs -t static-module -w commonjs -o proto.js *.proto
把目录下所有的proto文件一起生成静态文件到proto.js中
pbts -o proto.d.ts proto.js
为proto.js文件生成生命文件：proto.d.ts。
最终会生成proto.js和proto.d.ts文件
静态方式缺点，会额外生成静态文件，导致包体变大，特别是微信小游戏这种对包体敏感的平台。
服务端集成protobufjs
src目录下新建pb文件夹，把上述生成的静态文件proto.js，proto.d.ts和protobuf.js都放到pb文件夹中。
修改proto.js的var $protobuf = require("protobufjs/minimal");为var $protobuf = require("./protobuf");
修改proto.d.ts的第一句import * as $protobuf from "protobufjs";为import * as $protobuf from "./protobuf";
复制以下内容到 index.ts
import * as WebSocket from "ws"
import proto = require("./pb/proto");
const server = new WebSocket.Server({ port: 8083 });
server.on("listening", () => {
console.log("服务器启动完毕！开始侦听");
});
server.on("connection", function connection(ws) {
ws.on("message", function incoming(message) {
console.log("received:%s", message);
let u = proto.user.decode(<Uint8Array>message);
console.log("decode, userid:" + u.userId + ", username:" + u.userName);
});
ws.send("hhhello");
});
服务端报错
ctrl+shift+b build的时候顺利。
Debug开启服务器的时候index.ts 报错：Error: Cannot find module ‘./pb/proto’
一开始一直在查模块方向的错误。
后面才恍然大悟：我服务器是用ts开发，最终生成的代码是在dist目录中。
编译的时候只是把ts代码编译到了dist目录，但是proto.js文件和protobuf.js文件我还放在src目录下的pb文件夹呢。
于是在dist目录中创建一个pb文件夹，同时把proto.js，protobuf.js拷贝过去，再次运行一切顺利。
客户端集成protobufjs
assets目录下新建文件夹：pb
把上述提到的protobuf.js放入pb目录下。设置导入为插件。同时还要勾选允许编辑器加载。
同时把proto.js和proto.d.ts放到pb目录下
CososCreator在构建时候会将我们编辑器里所有的js脚本都打包到一个project.js的文件中，原生(native)的话就是project.jsc。
如果我们的protobuf.js打包进去就会报错了，所以这里需要导入为插件，这样做就不会被打包进project.js文件中。
同时由于客户端中已经设置了插件模式。故proto.js中这句var $protobuf = require("protobufjs/minimal");需要改成：var $protobuf=protobuf;
还要修改proto.d.ts的第一句import * as $protobuf from "protobufjs";为import * as $protobuf from "./protobuf";
客户端代码如下：
private ws: WebSocket;
start() {
console.log("go!");
this.ws = new WebSocket("ws://192.168.2.31:8083");
this.ws.binaryType="arraybuffer";
this.ws.onopen = this.onOpen.bind(this);
this.ws.onmessage = function (event) {
console.log("client rcv:" + event.data);
}
this.ws.onclose = function (event) {
}.bind(this);
this.ws.onerror = function (event) {
}
}
private onOpen(event: MessageEvent) {
console.log("连接建立啦");
let u: user = new user()
u.userId = 1;
u.userName = "toms";
let encoded = proto.user.encode(u).finish();
this.sendData(encoded);
let xxx = proto.user.decode(encoded);
console.log("嘿嘿：" + xxx.userName);
}
private sendData(data) {
this.ws.send(data);
}
注意客户端设置了binaryType为arraybuffer(笔者注释了这行代码，也没有发现有啥问题)
需要注意：客户端decode后还要调用finish()，不然服务端那边解析不出来。
————————————————
版权声明：本文为CSDN博主「iningwei」的原创文章，遵循 CC 4.0 BY-SA 版权协议，转载请附上原文出处链接及本声明。
原文链接：https://blog.csdn.net/iningwei/article/details/100107254
