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', {});// Errorif (!ret.isSucc) {alert(ret.err.message);return;}// Successreturn ret.res.data;}
}

发送按钮绑定事件

this.gameManager.addData({ content, name });
// 发送完成后刷新一次
this.scheduleOnce(() => {this._updateList();
}, 0.5)

配合UI制作等等，实现一个对话窗功能