TSRPC文档: https://tsrpc.cn/docs/get-started/api.html
创建
先创建一个默认的会话项目,找一个文件夹在控制台运行以下代码:
npx create-tsrpc-app@latest first-api --presets browser
# 或者
yarn create tsrpc-app first-api --presets browser
运行之后根据自己的需求选
等待
新建初始模板结束
会发现在运行Powershell的文件夹下出现了一个"first-api"文件夹,里面包含前端和后端工程。
分别下载依赖,运行如下代码
npm i
看看后端里写的readme,运行后端
npm run dev
运行前端
注意要用命令行运行,不要用liveServer什么的。
npm run dev
可以看到如下页面
都运行起来之后,就可以发消息了
如果使用的是WS,也是一样的操作,前端页面如下:
使用Cocos制作前端
之前的前端部分可以关掉了,接下来用Cocos Creator制作一个前端。
新建一个Cocos项目,把这些复制到package.json
"dependencies": {
"tsrpc-browser": "^3.4.11",
"tsrpc-miniapp": "^3.4.1"
}
先运行
npm i
将shared
和client
的内容复制到cocos里
注册一个全局管理器
GameManager.ts
import { HttpClient } from "tsrpc-browser";
import { ReqAddData } from "../shared/protocols/PtlAddData";
import { serviceProto } from "../shared/protocols/serviceProto";
/**
* 前端游戏状态管理
* 主要用于实现前端的预测和和解
*/
export class GameManager {
private client;
constructor() {
// Use browser client or miniapp client depend on the platform
this.client = new HttpClient(serviceProto, {
server: "http://192.168.231.98:3000",
json: true,
logger: console,
});
}
async addData(obj: ReqAddData): Promise<void> {
let ret = await this.client.callApi('AddData', obj);
if (!ret.isSucc) {
console.log("请求失败");
return;
}
}
async loadList() {
let ret = await this.client.callApi('GetData', {});
// Error
if (!ret.isSucc) {
alert(ret.err.message);
return;
}
// Success
return ret.res.data;
}
}
发送按钮绑定事件
this.gameManager.addData({ content, name });
// 发送完成后刷新一次
this.scheduleOnce(() => {
this._updateList();
}, 0.5)
配合UI制作等等,实现一个对话窗功能