github地址：Cocos-Demo-Practice
01. tsconfig.json
allowSyntheticDefaultImports: true 必须开启，否则会报错。
{
"extends": "./temp/tsconfig.cocos.json",
"compilerOptions": {
"allowSyntheticDefaultImports": true, // 需要开启
//...
}
}
02. package.json
别修改 type 为 module，否则会报错。(不懂可忽略)
生成pb.js 必须是 commonjs 的模块，否则会报错。
js文件是 commonjs 的模块（require(xxx)），而ts文件使用的是 es6 的模块如果你的js文件里是import，而ts文件使用require，那么就会报错。
{
//....
//.... 加入代码如下
"scripts": {
"proto": "proto": "pbjs -t static-module -w commonjs -o pb.js pb.proto && pbts -o pb.d.ts pb.js"
},
"dependencies": {
"protobufjs": "7.5.3"
},
"devDependencies": {
"@types/protobufjs": "6.0.0",
"protobufjs-cli": "1.1.3"
}
}
使用npm i安装依赖，然后运行 npm run proto生成pb.js
使用npm i安装依赖，然后运行 npm run proto生成pb.js
使用npm i安装依赖，然后运行 npm run proto生成pb.js
使用npm i安装依赖，然后运行 npm run proto生成pb.js
使用npm i安装依赖，然后运行 npm run proto生成pb.js
使用npm i安装依赖，然后运行 npm run proto生成pb.js
使用npm i安装依赖，然后运行 npm run proto生成pb.js
使用npm i安装依赖，然后运行 npm run proto生成pb.js
如果安装失败，请必须了解科学上网，程序员必备技能！(也可使用pnpm i或cnpm i请自行百度)
03. 生成 pb.js
pb.js 、pb.d.ts 需要放在 assets/proto目录下
pb.js 、pb.d.ts 需要放在 assets/proto目录下
pb.js 、pb.d.ts 需要放在 assets/proto目录下
新建 assets/proto/index.ts
根据pb.js实际情况导出对象，我这里 包含了 proto.proto 这个对象，所以导出的是 proto.proto
import { default as proto } from './pb.js';
export default proto.proto;
04. 使用 proto
const key = "BetReq"; // 对应 proto 的 message 名称
const data = new proto[key](); //【创建】结构体 { Amount:string } 或 proto[key].create()
data.xxx = "xxx"; //【赋值】结构体属性
//...
const buffer = Buffer.from(data); //【编码】序列化消息
const buf = proto[key].encode(data).finish(); //【编码】序列化消息
const obj = proto[key].decode(buffer).finish(); //【解码】反序列化消息
05. 前后端都需要编码和解码 使用的是同一份 proto 文件
记得移动 pd.js pd.proto 到 proto 目录下
记得移动 pd.js pd.proto 到 proto 目录下
记得移动 pd.js pd.proto 到 proto 目录下
06. 案例代码
// 前端
assets/App/02Socket的proto/WebSocket.ts
assets/utils/Socket.ts
// CocosCreator 网页浏览器运行
// 后端
服务端ws/src/app.ts
// 根目录运行 cd 服务端ws
npm run start