1. 项目概述
这是一个基于SpringBoot+SRS的在线直播项目，主要功能有：
- 视频直播
- 在线聊天
- 直播提醒
- 作业上传和批改
2. 项目技术
- 后端：SpringBoot+Mybatis+MySQL+Spring MVC+Spring Security+Spring AOP+Spring Data JPA
- 前端：前端三件套+THymeleaf
3. 前端部分
3.1 前端框架
- 前端框架：Bootstrap,JQuery,video.js, DPlayer,sockjs,stomp.js
Bootstrap: 前端框架，用于页面布局
JQuery: JS框架，用于前端页面的交互
video.js: 用于视频播放
Dplayer: 用于视频播放,监听开始，暂停，结束等事件，切换视频源。
sockjs: 用于前端与后端的通信，在客户端和服务器端之间建立双向的通信通道。使用了一种长轮询技术，通过定期发送HTTP请求来模拟web Socket连接。
stomp.js: 用于前端与后端的通信，提供了一种简单的方式来实现STOMP协议的WebSocket通信。
Dplayer
Dplayer.min.js是一个基于HTML5的开源视频播放器插件，用于在网页中播放视频文件。它支持多种视频格式，包括MP4、WebM、FLV等，并且可以自动根据浏览器的支持情况选择最合适的视频格式进行播放。
Dplayer.min.js的使用场景非常广泛，可以用于各种需要在网页中播放视频的场合，比如在线教育平台、视频分享网站、个人博客等。它可以方便地嵌入到网页中，提供丰富的播放控制功能，如播放/暂停、音量控制、全屏等，并且支持自定义皮肤和样式，可以根据需求进行个性化定制。
Dplayer.min.js的优势主要包括以下几点：
轻量级：Dplayer.min.js的文件体积小，加载速度快，对网页性能影响较小。
兼容性好：Dplayer.min.js基于HTML5技术开发，支持主流的现代浏览器，包括Chrome、Firefox、Safari等。
自定义性强：Dplayer.min.js提供了丰富的配置选项和API接口，可以根据需求进行个性化定制，包括皮肤样式、播放器大小、控制按钮等。
功能丰富：Dplayer.min.js支持多种视频格式的播放，并且提供了常用的播放控制功能，如播放/暂停、音量控制、全屏等，满足了大部分视频播放的需求。
总之，Dplayer.min.js是一个功能强大、易于使用的HTML5视频播放器插件，适用于各种网页视频播放场景，具有良好的兼容性和自定义性。
- 前端模板：Thymeleaf
Thymeleaf是一个Java服务器端模板引擎，能够处理HTML、XML、JavaScript、CSS甚至纯文本。它可以将动态数据渲染到HTML页面中，并支持在服务器端生成HTML，然后将其发送到客户端浏览器。
使用场景包括：服务器端渲染，邮件模板，静态文件生成，JSF等。
优势：1.自然的模板语法：Thymeleaf的模板语法非常直观和易于理解，类似于HTML标签，使得开发人员可以轻松地编写模板。2.完全可见的模板：Thymeleaf模板可以直接在浏览器中预览，因为它们是有效的HTML文档。这使得开发人员可以更容易地进行调试和修改。3.强大的表达式语言：Thymeleaf提供了强大的表达式语言，可以方便地访问和操作模型数据。它支持条件语句、迭代、属性访问等功能，使得模板更加灵活和动态。4.可扩展性：Thymeleaf可以通过自定义标签和处理器进行扩展，以满足特定的需求。开发人员可以根据自己的需求添加自定义功能，使得Thymeleaf更加适应各种场景。
前端聊天功能
- 前端聊天功能：sockjs+stomp.js+chatMain.js
ChatMain.js
由以下几部分构成：
- 连接服务器connect(event):从用户名输入框和主题名称输入框中获取用户名和主题名称，并使用 Stomp 客户端连接到 WebSocket 服务器。如果连接成功，该函数会订阅当前主题的公共消息，并向服务器发送一个加入聊天室的消息
- 连接成功onConnected():当连接成功时，该函数会在页面上显示一个提示消息，并将用户名和主题名称显示在页面上。然后，该函数会向服务器发送一个加入聊天室的消息，以便其他用户能够看到该用户已经加入聊天室。
- 连接失败onError():当连接失败时，该函数会在页面上显示一个提示消息。
- 发送消息sendMessage():当用户点击发送按钮时，该函数从消息输入框中获取消息内容，并使用 Stomp 客户端向服务器发送一条聊天消息。
- 接受消息onMessageReceived():当接收到消息时，该函数会解析接收到的消息，并根据消息类型更新聊天室界面。
- 用户头像颜色getAvatarColor():该函数会根据用户名的哈希值计算出一个颜色值，用于生成用户头像的背景颜色。
并且定义了部分变量：usernamePage：用户名输入页面的 DOM 元素。chatPage：聊天室页面的 DOM 元素。usernameForm：用户名输入表单的 DOM 元素。messageForm：消息输入表单的 DOM 元素。messageInput：消息输入框的 DOM 元素。messageArea：消息显示区域的 DOM 元素。connectingElement：连接状态提示信息的 DOM 元素。stompClient：Stomp 客户端对象。username：当前用户的用户名。topicName：当前聊天室的主题名称。colors：用于生成用户头像颜色的颜色列表。