SpringBoot+Redis编写一个抢红包雨的案例。附源码。

案例演示

SpringBoot+Redis编写一个抢红包雨的案例。附源码

 

1、案例分析,整体方案介绍

      预备上线一个红包雨活动。这个红包雨的思路是活动开始前25分钟,在后台创建活动。然后前端用户进入,到点后将设置的金额拆分成多个小红包,开启倒计时,下红包雨,用户在结束前可以抢多个,结束后弹出抢到的总金额。

    分析 100%高并发业务要求,不能用mysql来做,  ,你需要有记录,比如100块钱,被拆分成10个红包发出去,总计有10个红包,抢一个少一个,总数显示(10/6)直到完,需要记录那些人抢到了红包,  

2、红包雨流程问题。 


3、搭建SpringBoot环境

    好了,现在开干。先搭建一个springBoot+websocket+redis的环境。(依赖看图)测试下正常写入redis数据。连接进websocket.空工程下载地址:https://download.csdn.net/download/ldy889/88560527

增加SpringUtils 解决了webSocket不能访问redis问题:https://download.csdn.net/download/ldy889/88560601

添加yaml文件

server:port: 8080spring:datasource:url: jdbc:mysql://127.0.0.1:3306/jeecg-boot?characterEncoding=UTF-8&useUnicode=true&useSSL=false&tinyInt1isBit=false&allowPublicKeyRetrieval=true&serverTimezone=Asia/Shanghaiusername: rootpassword: root123driver-class-name: com.mysql.cj.jdbc.Driverredis:database: 0host: 127.0.0.1port: 6379password: ''

 pom

<?xml version="1.0" encoding="UTF-8"?>
<project xmlns="http://maven.apache.org/POM/4.0.0" xmlns:xsi="http://www.w3.org/2001/XMLSchema-instance"xsi:schemaLocation="http://maven.apache.org/POM/4.0.0 https://maven.apache.org/xsd/maven-4.0.0.xsd"><modelVersion>4.0.0</modelVersion><parent><groupId>org.springframework.boot</groupId><artifactId>spring-boot-starter-parent</artifactId><version>3.1.5</version><relativePath/> <!-- lookup parent from repository --></parent><groupId>com.example</groupId><artifactId>demo</artifactId><version>0.0.1-SNAPSHOT</version><name>demo</name><description>Demo project for Spring Boot</description><properties><java.version>17</java.version></properties><dependencies><dependency><groupId>org.springframework.boot</groupId><artifactId>spring-boot-starter-data-jdbc</artifactId></dependency><dependency><groupId>org.springframework.boot</groupId><artifactId>spring-boot-starter-data-redis-reactive</artifactId></dependency><dependency><groupId>org.springframework.boot</groupId><artifactId>spring-boot-starter-websocket</artifactId></dependency><dependency><groupId>com.mysql</groupId><artifactId>mysql-connector-j</artifactId><scope>runtime</scope></dependency><dependency><groupId>org.projectlombok</groupId><artifactId>lombok</artifactId><optional>true</optional></dependency><dependency><groupId>org.springframework.boot</groupId><artifactId>spring-boot-starter-test</artifactId><scope>test</scope></dependency><dependency><groupId>io.projectreactor</groupId><artifactId>reactor-test</artifactId><scope>test</scope></dependency></dependencies><build><plugins><plugin><groupId>org.springframework.boot</groupId><artifactId>spring-boot-maven-plugin</artifactId><configuration><image><builder>paketobuildpacks/builder-jammy-base:latest</builder></image><excludes><exclude><groupId>org.projectlombok</groupId><artifactId>lombok</artifactId></exclude></excludes></configuration></plugin></plugins></build></project>

4、设置一场红包雨活动

        用刚才的后端代码,创建一个 /api/addActivity 接口。这里需要传递5个参数:

  • 持续时长:5秒,
  • 生成速率:5个/秒,
  • 总金额:100元,
  • 红包个数10个,
  • 活动开启时间:今晚8点。

然后我们后端需要创建一个活动ID,返回给前端。前端拿到这个活动ID,和用户Token开启webSocket连接。等到时间后,webSocket会 推送抢红包的地址给前端。webSocket断开,并开始下红包雨倒计时。持续一段时间后,到时间后这里设置5秒后,抢完显示查询结果你抢到了多数元。

这个应该是后台管理员设置。看不见我。

5、创建WebSocket连接服务器。 

前端测试websocket代码 

后端需要配置Redis,WebSocket.config

这里主要是将用户加入到活动列表中。如果是活动开始后才连接进来的,需要单发消息给他开启倒计时。

这里是到点后,redis会发消息。这里就接受到消息了。然后群发给用户开始倒计时。

6、搭建前端环境创建抢红包页面

7、 前后端代码详解。

先从后端开始吧

1、活动创建成功。 


2、用户进入/离开活动房间。等待红包雨。实时人数3人。


3、群发红包雨开始。


4、用户抢到红包。 用户信息,红包金额,抢到时间,离活动结束还有3秒,红包剩余金额,RedisKey:


5、用户未抢到红包。 用户信息,失败原因,RedisKey:


 6、红包雨结束。红包雨信息: RedisKey:


7、用户查询抢到金额。用户信息,查到金额。


8、本次红包雨总金额,用户参与人数,抢到人数,抢走金额。剩余金额。

再来前端控制台。


      1、活动创建成功。活动ID:hd_activityRandString。


      2、WebSocket连接成功,进入房间。


      3、收到服务器消息:红包雨信息:key:rain_RandString,money:100,number:10


      3、WebSocket关闭成功,开启倒计时。


      4、抢到红包:红包金额,抢到时间,离活动结束还有3秒,红包剩余金额。


      5、未抢到红包:失败原因,


      6、红包雨结束,查询抢到金额。  

有问题的可以留言。yaldongyu@qq.com

对这个项目感兴趣的朋友也可探讨下。

源码发在gitee上了。 

前端代码也放进后台里的web文件夹下。

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

如若内容造成侵权/违法违规/事实不符,请联系编程知识网进行投诉反馈email:809451989@qq.com,一经查实,立即删除!

相关文章

Redis面试题:分片集群相关问题

目录 面试官&#xff1a;redis的分片集群有什么作用 面试官&#xff1a;Redis分片集群中数据是怎么存储和读取的&#xff1f; 面试官&#xff1a;redis的分片集群有什么作用 候选人&#xff1a;分片集群主要解决的是&#xff0c;海量数据存储的问题&#xff0c;集群中有多个m…

函数指针数组指针数组传参的本质字符指针

&#x1f680; 作者&#xff1a;阿辉不一般 &#x1f680; 你说呢&#xff1a;不服输的你&#xff0c;他们拿什么赢 &#x1f680; 专栏&#xff1a;爱上C语言 &#x1f680;作图工具&#xff1a;draw.io(免费开源的作图网站) 如果觉得文章对你有帮助的话&#xff0c;还请点赞…

redis报错3

INFO: Initializing SpringDispatcherServletdispatcherServlet

Linux网络——数据链路层

目录 一.认识以太网 二.以太网帧格式 三.认识MAC地址 四.认识MTU 五.以太局域网的通信原理 六.其他重要协议 1.DNS协议 2.域名简介 3.ICMP协议 4.NAT技术 5.NAT技术的缺陷 6.NAT和代理服务器 一.认识以太网 "以太网" 不是一种具体的网络, 而是一种技术标…

Redis实战篇(一)短信登录

Redis实战篇&#xff08;一&#xff09;短信登录 1.1、导入黑马点评项目 1.1.1 、导入SQL 1.1.2、有关当前模型 手机或者app端发起请求&#xff0c;请求我们的nginx服务器&#xff0c;nginx基于七层模型走的事HTTP协议&#xff0c;可以实现基于Lua直接绕开tomcat访问redis&a…

TUP通信

一&#xff0c;概括 二&#xff0c;常用方法 三&#xff0c; 实现步骤&#xff08;一发一收&#xff09; 四&#xff0c;案例&#xff08;一接一收&#xff09; &#xff08;1&#xff09;&#xff0c;客户端 &#xff08;2&#xff09;&#xff0c;服务端 &#xff08;3&…

css实现鼠标移入背景图片变灰并浮现文字的效果

首先上效果图 说明一下我的html结构 如上图是一个div包裹的img标签, div的块大小width, height 自己定义, 我说明一下核心样式代码 下面写法是scss, 请自行替换 .web-query-image {position: relative; // 相对定位, 方便浮现文案进行绝对定位border-radius: 8px;box-sizing: …

python scoket 多人聊天室 带界面

前言 本来是为了局域网内能够复制段儿代码方便远程调试用的&#xff0c;ssh当然也可以&#xff0c;当然还是我头脑风暴散发&#xff0c;想到这里了。于是从网上拉了一个&#xff0c;改通之后&#xff0c;留一个备份。 期望还是很好的&#xff0c;以后用来支持ubuntu聊天之类的…

2024黑龙江省职业院校技能大赛暨国赛选拔赛“GZ034软件测试”赛项规程

2024黑龙江省职业院校技能大赛暨国赛选拔赛 “GZ034软件测试”赛项规程 一、赛项信息 赛项类别 每年赛 隔年赛&#xff08;单数年/双数年&#xff09; 赛项组别 中等职业教育 高等职业教育 学生赛&#xff08;个人/团体&#xff09; 教师赛 师生同赛 涉及专业大类、…

IDEA的安装与删除插件

不小心安装了一个英文转中文的插件&#xff0c;看不习惯&#xff0c;决定重新变回英文 先点击这个settings的安装 然后就看到这个下面这张图了 如果是安装就点install&#xff0c;不用了就和我一样把这个勾给去掉

ESXi 添加新网络 配置ubuntu虚拟机双网卡

基本概念 在ESXi的虚拟机之间确保正常通信的基础是网络服务&#xff0c;通常在物理网络中需要使用不同的物理设备进行连接才能组建出高效的网络服务&#xff0c;而在虚拟网络中&#xff0c;需要不同的虚拟设备为其提供服务。 ESXi的网络类型&#xff1a; 1、物理网络&#xf…

智慧工厂人员定位系统源码,融合位置物联网、GIS可视化等技术,实现对人员、物资精确定位管理

智慧工厂人员定位系统源码&#xff0c;UWB高精度定位系统源码 随着中国经济发展进入新常态&#xff0c;在资源和环境约束不断强化的背景下&#xff0c;创新驱动传统制造向智能制造转型升级&#xff0c;越发成为企业生存发展的关键。智能工厂作为实现智能制造的重要载体&#xf…