TSRPC+Cocos

news2024/12/23 6:29:51

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制作等等,实现一个对话窗功能

在这里插入图片描述

本文来自互联网用户投稿,该文观点仅代表作者本人,不代表本站立场。本站仅提供信息存储空间服务,不拥有所有权,不承担相关法律责任。如若转载,请注明出处:http://www.coloradmin.cn/o/2158657.html

如若内容造成侵权/违法违规/事实不符,请联系多彩编程网进行投诉反馈,一经查实,立即删除!

相关文章

SpringBoot3快速入门(持续更新)

博客主页&#xff1a;音符犹如代码系列专栏&#xff1a;JavaWeb关注博主&#xff0c;后期持续更新系列文章如果有错误感谢请大家批评指出&#xff0c;及时修改感谢大家点赞&#x1f44d;收藏⭐评论✍ SpringBoot是什么 SpringBoot它可以帮我简单&#xff0c;快速地创建一个生产…

Java | Leetcode Java题解之第417题太平洋大西洋水流问题

题目&#xff1a; 题解&#xff1a; class Solution {static int[][] dirs {{-1, 0}, {1, 0}, {0, -1}, {0, 1}};int[][] heights;int m, n;public List<List<Integer>> pacificAtlantic(int[][] heights) {this.heights heights;this.m heights.length;this.n…

实战19-详情页UI4等分

import { PADDING } from ../../constants/size; import rvp from ../../utils/resposive/rvIndex;Component export default struct SearchFilter {build() {Row() {Row({ space: rvp(6) }) {Text("位置").fontSize(rvp(14)).fontColor(#333333)Image($r(app.media.…

string map练习

to_string 在<string>头文件的std命名空间中 要格式化写浮点型入字符串用 2.map 直接尾插 set,map同方法&#xff0c;map只是把键变为pair键值对 4. string的花括号隐式类型转换不能字母个数字母&#xff0c;会被认为是初始化列表&#xff0c;而不是个数加字母的隐式类…

CSS简明通俗教程

CSS简明通俗教程 1. CSS简介 CSS&#xff08;Cascading Style Sheets&#xff0c;层叠样式表&#xff09;是一种样式表语言。CSS用于描述HTML或XML&#xff08;包括SVG或XHTML等XML方言&#xff09;文档的呈现方式&#xff0c;它有自己的语法规则和逻辑&#xff0c;用于控制网…

【计算机网络】传输层协议TCP

目录 一、重新理解封装和解包二、TCP协议段格式三、确认应答(ACK)机制四、超时重传机制五、连接管理机制六、理解TIME_WAIT状态和CLOSE_WAIT状态七、流量控制八、滑动窗口九、拥塞控制十、延迟应答十一、面向字节流十二、粘包问题 一、重新理解封装和解包 在网络协议栈中&…

SRS流媒体服务器在宝塔面板下的安装

目录 一、安装 1、安装Docker 2、安装srs 二、测试 1、进入后台 2、推流 3、播放测试: (1)网页 (2)拉流 之前一篇文章,我们介绍了SRS流媒体服务器在CentOS下的安装,安装流程还是比较麻烦且耗时的,其实SRS支持Docker部署,今天我们介绍在宝塔面板的Docker中部署…

leetcode第80题:删除有序数组的重复项(||)

给你一个有序数组 nums &#xff0c;请你 原地 删除重复出现的元素&#xff0c;使得出现次数超过两次的元素只出现两次 &#xff0c;返回删除后数组的新长度。 不要使用额外的数组空间&#xff0c;你必须在 原地 修改输入数组 并在使用 O(1) 额外空间的条件下完成。 说明&…

孤独伤感视频素材哪里找?分享热门伤感短视频素材资源网站

你是不是也经常在抖音上刷到很火的伤感视频&#xff0c;那么伤感视频素材都在哪里可以下载呢&#xff1f;作为一名从业多年的视频剪辑师&#xff0c;今天就跟大家聊聊那些可以下载伤感素材高清无水印的网站&#xff0c;如果你也在苦苦找寻伤感素材&#xff0c;快来看看吧&#…

JEDEC DDR4 SRAM standard

本文主要记录DDR4与DDR3有较大差异的点。 2.DDR4管脚 信号 类型 描述 C0,C1,C2 input chip IDchip ID仅用于通过TSV&#xff08;硅通孔&#xff09;选择3DS堆叠组件的2层、4层、8层高堆栈中的每一片&#xff0c;chip ID被视为命令代码的一部分。 ACT_n input 激活命令…

【小程序】uniapp自定义图标组件可动态更换svg颜色

组件描述 通过图标名称加载对应svg&#xff0c;size参数调整图标大小&#xff0c;color参数调整图标颜色 解决思路&#xff1a; 存svg获svg&#xff0c;对象方式正则替换svg的fill值&#xff0c;不改变源文件&#xff0c;通过base64直接加载缓存svg源文件&#xff0c;避免重…

在VMware16中安装Windows 10:完整教程

在VMware中安装Windows 10&#xff1a;完整教程 1.安装环境准备2.创建虚拟机 1.安装环境准备 1.虚拟机: VMware-workstation-full-16.2.2-19200509 2.系统镜像:win10 2.创建虚拟机 1.自定义 2.下一步 3.稍后安装系统 3.默认下一步 4.虚拟机取名和选择存放路径(按需更改…

【已解决】键盘输入数字-使用JAVA语言实现键盘输入的数字再通过快速排序算法输出

文章目录 一、前言任务描述相关知识分治策略&#xff1a;编程要求测试说明 二、具体代码实现总结 一、前言 —快速排序 任务描述 在待排序的n个元素中任取一个元素&#xff08;通常取第一个元素&#xff09;作为基准&#xff0c;把该元素放入最终位置后&#xff0c;整个数据序…

css如何设置间距

在CSS中设置间距是非常常见的需求&#xff0c;可以通过多种属性来实现。以下是一些常用的CSS属性及其用法&#xff0c;用于设置元素之间的间距&#xff1a; 内边距&#xff08;Padding&#xff09; padding 属性用于设置元素内容与元素边框之间的距离。可以分别设置四个方向的…

RTR_Chapter_6 上

第六章 纹理 表面纹理&#xff08;texture&#xff09;是指其外观和给人的视觉感受&#xff0c;就像是一幅油画的图案一样。而在计算机图形学中&#xff0c;纹理化则指的是一个过程&#xff0c;即通过使用一些图像、函数或者其他数据&#xff0c;来对每个表面位置的外观表现进行…

高德地图矢量图形点击事件生成

官方文档https://lbs.amap.com/demo/javascript-api-v2/example/overlay-editor/polylineeditor 生成矢量图形如上&#xff0c;代码如下 const markerAddof ref(false) // 绘图 function drawMark () {if (!markerAddof.value) {//限制矢量图形点击只显示一个if (cameraId.va…

Discord邀请Midjourney机器人失败?教你一招解决

最近小鲨在使用Midjourney的过程中&#xff0c;遇到一个问题&#xff1a; Discord在邀请Midjourney机器人的时候&#xff0c;报错&#xff1a; Unable to accept invite&#xff08;无法接受邀请&#xff09; 因为Midjourney目前&#xff0c;主要还是在Discord里使用。 如果D…

【docker】在IDEA工具内,远程操作服务器上的docker

一&#xff0c;配置 在服务器上&#xff0c;对docker配置如下内容&#xff1a; vi /usr/lib/systemd/system/docker.service添加如下&#xff1a; -H tcp://0.0.0.0:2375重新加载&#xff0c;并重启docker&#xff1a; #重新加载配置 systemctl daemon-reload# 重启docker …

双路创新深度学习!TCN-Transformer+LSTM多变量时间序列预测(Matlab)

双路创新深度学习&#xff01;TCN-TransformerLSTM多变量时间序列预测&#xff08;Matlab&#xff09; 目录 双路创新深度学习&#xff01;TCN-TransformerLSTM多变量时间序列预测&#xff08;Matlab&#xff09;效果一览基本介绍程序设计参考资料 效果一览 基本介绍 1.Matlab…

肾癌的多模态预测模型-临床-组织学-基因组

目录 摘要 技术路线 ① lncRNA的预测模型 ②病理 WSI 的分类器 ③临床病理分类器 模型结果 与别的模型比较 同行评审学习 1&#xff09;使用lncRNA的原因 2&#xff09;模型临床使用意义 3&#xff09;关于截止值的使用 摘要 A multi-classifier system integrated…