【源码】基于React和虎牙小程序SDK的井字棋互动游戏

项目简介

本项目是在React井字棋小游戏基础上集成虎牙小程序SDK，达成了主播与观众之间的简单互动。通过自定义虎牙小程序消息，实现观众端和主播端的交互。项目包含Web端（PC主播端和Web观众端）、App端（观众端App和主播直播助手App），后台负责处理前端请求，调用小程序API完成广播和单播消息功能。

项目的主要特性和功能

观众端

• 监听ROOMOPEN和POINT消息。
• 处理主播下子信息。
• 向后台推送自身下子位置，由后台广播下子信息给其他观众。

主播端

• 开始游戏时触发ROOMOPEN事件。
• 自定义并监听POINT事件，获取观众端下子位置。
• 处理观众端下子信息。
• 向后台推送自身下子位置，由后台广播下子信息给观众。

后台

• 拦截JWT token，解析用户和直播间信息。
• 调用小程序API实现广播和单播消息功能。
• 为前端提供相关API接口。

安装使用步骤

前端安装

1. 安装虎牙的前端开发脚手架。
2. 创建Tic - Tac - Toe - Web和Tic - Tac - Toe - App项目，分别选择react和react - native。
3. 导入项目源码文件。

后端安装

1. 安装Spring Boot环境。
2. 配置虎牙小程序id、开发者信息等参数。
3. 导入项目源码文件。

运行

1. 执行hyext run dev启动前端。
2. 执行hyext run dev streamer启动主播端App。
3. 执行hyext release打包前端和App。
4. 在虎牙小程序官网提交测试，配置主播和观众白名单。

调试

使用虎牙提供的PC端和App端调试工具进行调试。

提交测试

将打包的zip文件提交到虎牙小程序官网进行测试。

发布

测试通过后，将应用发布到线上。

注意事项

• 前端
  • Ebs请求参数需为string类型，否则会出错。
  • App调试工具版本过低，使用调试工具时后台接口需支持CORS。
• 后端
  • 小程序仅支持http，不支持https。
  • 使用小程序API需申请权限，否则无法推送消息。
• 整体
  • 注意直播间消息和自定义消息的区别。
  • 小程序API错误码返回的错误信息存在重复。
  • 关注小程序sdk存储值的失效时间。
  • 小程序sdk中显示互动通道红点的返回信息说明有误。

下载地址

点击下载 【提取码: 4003】【解压密码: www.makuang.net】