TSRPC+Cocos

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

sharedclient的内容复制到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制作等等,实现一个对话窗功能

相关推荐
EndingCoder1 天前
搜索算法在前端的实践
前端·算法·性能优化·状态模式·搜索算法
牛奶咖啡132 天前
学习设计模式《十七》——状态模式
学习·设计模式·状态模式·认知状态模式·状态模式的优缺点·何时使用状态模式·状态模式的使用示例
前端开发与ui设计的老司机2 天前
大数据在UI前端的应用深化:用户行为模式的挖掘与预测性分析
状态模式
位东风3 天前
【c++学习记录】状态模式,实现一个登陆功能
c++·学习·状态模式
wenzhangli77 天前
OneCode采用虚拟DOM结构实现服务端渲染的技术实践
状态模式
mall_09057 天前
Spring Cloud 前端调用后端接口方式
前端·spring cloud·状态模式
旧曲重听17 天前
最快实现的前端灰度方案
前端·程序人生·状态模式
guygg888 天前
深入理解SpringMVC DispatcherServlet源码及全流程原理
状态模式
共享ui设计和前端开发人才8 天前
UI前端与数字孪生融合新趋势:智慧医疗的可视化诊断辅助
状态模式
共享ui设计和前端开发人才8 天前
UI前端与数字孪生结合探索:智慧建筑的能耗管理与优化
前端·ui·状态模式