React+Spring Boot在线教育平台开发：实时直播课堂与作业管理系统的技术架构实践

React+Spring Boot在线教育平台开发：实时直播课堂与作业管理系统的技术架构实践

发布时间：2026/10/10 6:48:40
React+Spring Boot在线教育平台开发：实时直播课堂与作业管理系统的技术架构实践 在线教育行业近年快速发展直播课堂和互动教学成为核心功能需求。承恒信息科技曾协助一家职业教育机构开发在线学习平台从需求分析到上线交付过程中直播延迟、万人同时在线选课的高并发处理以及作业自动批改是三个最具技术挑战的环节。本文将分享这套基于ReactSpring Boot技术栈的完整实现方案。一、平台架构与技术选型平台前端采用React 18 Ant Design构建教师端和学生端后端使用Spring Boot 3 MyBatis-Plus MySQL Redis。直播模块基于WebRTC SRSSimple Realtime Server推流方案实时互动使用Socket.IO实现双向通信。系统分为课程管理、直播课堂、作业系统、学习数据中心四大模块。选课高峰期并发量可达平时的20倍Redis负责缓存课程列表、用户选课状态和直播间人数统计通过Lua脚本保障扣减库存的原子性。MySQL采用读写分离架构主库写入选课记录从库查询课程信息分摊读压力。二、高并发选课系统与Redis优化选课是教育平台的高并发场景热门课程开放选课时瞬间QPS可达上万。以下是基于Redis Lua脚本实现的选课核心代码确保不超卖Servicepublic class CourseSelectionService {Autowiredprivate RedisTemplateredisTemplate;Autowiredprivate CourseMapper courseMapper;Autowiredprivate RabbitTemplate rabbitTemplate;private static final String COURSE_STOCK_KEY course:stock:;private static final String SELECTED_SET_KEY course:selected:;// Lua脚本原子性检查扣减库存记录选课private static final String SELECT_LUA local stock redis.call(GET, KEYS[1])\n if not stock or tonumber(stock) script new DefaultRedisScript(SELECT_LUA, Long.class);Long remaining redisTemplate.execute(script,List.of(stockKey, setKey), userId.toString());if (remaining null || remaining -1) {return Result.fail(课程已满选课失败);}if (remaining -2) {return Result.fail(您已选择该课程请勿重复选课);}// 异步写入数据库削峰填谷CourseSelectionMessage msg new CourseSelectionMessage();msg.setCourseId(courseId);msg.setUserId(userId);msg.setSelectedAt(LocalDateTime.now());rabbitTemplate.convertAndSend(course.selection.queue, msg);return Result.ok(选课成功, remaining);}/*** 选课结果异步落库消费者*/RabbitListener(queues course.selection.queue)public void persistSelection(CourseSelectionMessage msg) {try {CourseSelection selection new CourseSelection();selection.setCourseId(msg.getCourseId());selection.setUserId(msg.getUserId());selection.setSelectedAt(msg.getSelectedAt());selection.setStatus(ACTIVE);courseMapper.insertSelection(selection);} catch (DuplicateKeyException e) {// 唯一索引兜底防止重复选课log.warn(重复选课被数据库唯一索引拦截: user{}, course{},msg.getUserId(), msg.getCourseId());}}/*** 课程库存预热到Redis*/public void preloadCourseStock(Long courseId) {Course course courseMapper.selectById(courseId);if (course ! null) {int remaining course.getMaxCapacity() - course.getSelectedCount();redisTemplate.opsForValue().set(COURSE_STOCK_KEY courseId, remaining, 24, TimeUnit.HOURS);log.info(课程库存预热: courseId{}, remaining{}, courseId, remaining);}}}选课方案通过Lua脚本将库存检查、扣减和选课记录合并为一次原子操作Redis端响应时间2ms。数据库写入通过rabbitmq异步削峰避免瞬时高并发直接冲击mysql。在压测中1万qps并发选课场景下无超卖选课结果在30秒内全部落库数据库cpu峰值仅35%。三、实时直播课堂与互动直播课堂使用WebRTC推流到SRS媒体服务器学生端通过HLS/FLV协议拉流观看。实时互动举手、提问、答题通过Socket.IO双向通信实现。以下是Spring Boot端的Socket.IO互动消息处理代码Configurationpublic class SocketIOConfig {Beanpublic SocketIOServer socketIOServer() {com.corundumstudio.socketio.Configuration config new com.corundumstudio.socketio.Configuration();config.setPort(9092);config.setWorkerThreads(8);config.setBossThreads(2);config.setPingInterval(30000);config.setPingTimeout(60000);config.setMaxFramePayloadLength(1024 * 1024); // 1MBconfig.setMaxHttpContentLength(1024 * 1024);return new SocketIOServer(config);}}Componentpublic class ClassroomEventHandler {Autowiredprivate SocketIOServer server;Autowiredprivate RedisTemplateredisTemplate;private static final String ROOM_KEY classroom:room:;OnConnectpublic void onConnect(SocketIOClient client) {String roomId client.getHandshakeData().getSingleUrlParam(roomId);String userId client.getHandshakeData().getSingleUrlParam(userId);String role client.getHandshakeData().getSingleUrlParam(role);client.joinRoom(roomId);// Redis记录在线状态redisTemplate.opsForHash().put(ROOM_KEY roomId, userId, role);// 广播有人加入OnlineCountEvent event new OnlineCountEvent();event.setRoomId(roomId);event.setOnlineCount(redisTemplate.opsForHash().size(ROOM_KEY roomId));server.getRoomOperations(roomId).sendEvent(userJoined, event);}OnEvent(raiseHand)public void onRaiseHand(SocketIOClient client, RaiseHandRequest request) {String roomId client.getHandshakeData().getSingleUrlParam(roomId);// 仅教师端接收举手通知server.getRoomOperations(roomId).sendEvent(studentRaisedHand, request);}OnEvent(submitAnswer)public void onSubmitAnswer(SocketIOClient client, AnswerRequest request) {String roomId client.getHandshakeData().getSingleUrlParam(roomId);// 统计答题结果并实时推送String statsKey classroom:answer: roomId : request.getQuestionId();redisTemplate.opsForHash().increment(statsKey, request.getAnswer(), 1);Mapstats redisTemplate.opsForHash().entries(statsKey);AnswerStatsEvent statsEvent new AnswerStatsEvent();statsEvent.setQuestionId(request.getQuestionId());statsEvent.setStats(stats);server.getRoomOperations(roomId).sendEvent(answerStats, statsEvent);}OnDisconnectpublic void onDisconnect(SocketIOClient client) {String roomId client.getHandshakeData().getSingleUrlParam(roomId);String userId client.getHandshakeData().getSingleUrlParam(userId);redisTemplate.opsForHash().delete(ROOM_KEY roomId, userId);OnlineCountEvent event new OnlineCountEvent();event.setRoomId(roomId);event.setOnlineCount(redisTemplate.opsForHash().size(ROOM_KEY roomId));server.getRoomOperations(roomId).sendEvent(userLeft, event);}}直播互动方案通过Socket.IO实现毫秒级双向通信举手、答题等互动事件延迟100ms。在线人数通过redis hash四、作业自动批改与部署作业系统支持客观题自动批改和主观题AI辅助评分。客观题通过标准答案比对自动计分主观题通过自然语言处理算法给出参考分。以下是作业批改服务和Docker部署配置# docker-compose.yml 在线教育平台部署version: 3.8services:# Spring Boot 后端education-api:build: ./education-backendports: [8080:8080]environment:- SPRING_PROFILES_ACTIVEprod- MYSQL_HOSTmysql-master- REDIS_HOSTredis- RABBITMQ_HOSTrabbitmq- SRS_SERVERsrs:1985depends_on: [mysql-master, mysql-slave, redis, rabbitmq, srs]deploy:replicas: 3resources:limits: { cpus: 2, memory: 1G }# React 前端Nginx托管education-web:build: ./education-frontendports: [80:80, 443:443]volumes:- ./nginx.conf:/etc/nginx/nginx.conf- ./ssl:/etc/nginx/ssl# Socket.IO 互动服务socketio-server:build: ./socketio-serviceports: [9092:9092]environment:- REDIS_HOSTredisdeploy:replicas: 2# SRS 直播推流服务器srs:image: ossrs/srs:5ports: [1935:1935, 8080:8080, 1985:1985]volumes:- ./srs.conf:/usr/local/srs/conf/srs.conf# MySQL 读写分离mysql-master:image: mysql:8.0environment:MYSQL_ROOT_PASSWORD: ${DB_PASSWORD}MYSQL_DATABASE: educationvolumes: [mysql_master_data:/var/lib/mysql]mysql-slave:image: mysql:8.0environment:MYSQL_ROOT_PASSWORD: ${DB_PASSWORD}MYSQL_DATABASE: educationMYSQL_MASTER_HOST: mysql-masterdepends_on: [mysql-master]volumes: [mysql_slave_data:/var/lib/mysql]redis:image: redis:7-alpinecommand: redis-server --maxmemory 1gb --maxmemory-policy allkeys-lru --appendonly yesvolumes: [redis_data:/data]rabbitmq:image: rabbitmq:3.12-managementports: [5672:5672, 15672:15672]volumes:mysql_master_data:mysql_slave_data:redis_data:平台采用完整的容器化部署方案后端3副本负载均衡MySQL主从读写分离SRS独立部署处理直播推流。生产环境运行指标直播首屏加载时间1.2秒互动消息平均延迟80ms选课系统支持1万QPS并发作业自动批改客观题准确率100%主观题AI评分与人工评分相关系数达0.85。平台已稳定服务3万余名学生日均直播课时超过500小时。