案例演示
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: 8080
spring:
datasource:
url: jdbc:mysql://127.0.0.1:3306/jeecg-boot?characterEncoding=UTF-8&useUnicode=true&useSSL=false&tinyInt1isBit=false&allowPublicKeyRetrieval=true&serverTimezone=Asia/Shanghai
username: root
password: root123
driver-class-name: com.mysql.cj.jdbc.Driver
redis:
database: 0
host: 127.0.0.1
port: 6379
password: ''
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文件夹下。