简介
线上地址:http://61.183.42.66:44041/
代码地址:
首页样式参考博客:vue.js 仿哔哩哔哩的网站(低仿bilibili)_仿b站网页制作代码-CSDN博客
更新日志:
2023-12-25:发布1.0版本
2024-01-20:发布2.0版本
项目介绍:
个人练习用的综合性网站,以前端的api接口为准,后台接口有很多没用到。
我前端比较菜,只会用vue2,开发理念是不出错就行。
后端没用虚拟机,一切服务器和工具都是在windows系统中安装配置的。
例如:直播的rtmp推拉流Nginx服务器,发布公网的frp工具。
redis,RocketMq。
前端启动项目,npm i,下载好依赖后就可以启动了。
后端启动项目,下载好依赖后直接启动就行,不需要开启任何外部工具。
开发环境:
1. Windows 64位 16GB内存 2. IntelliJ IDEA 2020.3 3. JDK 1.8 (JDK1.8是写项目的Java最低限度版本了) 4. VsCode 1.82.3 5. node-v14.15.0
涉及技术和中间件:
前端:vue 2.0 + elementUI
后端:SpringBoot 2.6.3 + mysql 5.7 + Nginx + redis 3.2.1 + Rocketmq 4.4 + WebSocket +
maven配置:
一、登录功能
前端代码,包含了登录部分和用户部分
1、登录页面
仿照的ruoyi系统的登录页面
2、个人设置页
仿照的ruoyi系统的用户设置页面
3、个人中心
仿照b站的个人中心
二、视频功能
前端代码,不包含视频观看页
1、首页
仿照b站的首页
2、视频观看页
前端参考:Vue中实现视频播放——vue-video-player、dplayer-CSDN博客
video采用的Dplayer,实测vue-video-player也行,配置是默认的最简单的配置。
前端代码video部分
后端参考:java 实现断点续传服务_断点续传java-CSDN博客
视频播放采用了断点续传,分片请求的设计,在网络速度很慢的时候依然能快速观看视频。
通过downloadVideo()接口在前后端之间开启长连接,后端返回206状态码建立长连接,然后由前端的vue-Dplayer自动控制断点的起止位置,完成断点续传。
3、搜索页
仿照b站的搜索页
4、投稿页
难点就一个,视频文件一般比较大,所以要有断点续传功能。
前端参考:【java】java实现大文件的分片上传与下载(springboot+vue3)_java分片下载-CSDN博客
原作者是用vue3实现的,我的主要工作是将vue3转成vue2
后端参考:同前端
我借鉴了分片上传,分片下载是采用的206协议开启断点续传,来达到分片下载功能。
为了方便,视频是存在本地的,也可以根据需要存在Oss、FastDFS等服务器里。
三、直播功能
前端代码
1、列表
2、开启直播
开启直播的核心就是直播推流拉流,在进行了各种尝试后,发现在网页端进行推流太复杂了,所以暂时不在前端做了。
目前我是通过定时任务的方式,在java后台进行直播推流的,推流到Nginx服务器里。拉流也是从该Nginx服务器拉取。
目前主流的做法应该是借用第三方工具,例如七牛云,来实现直播推流功能。
参考博客:Vue中如何进行屏幕录制与直播推流_vue录屏功能-CSDN博客
在windows下搭建、配置nginx流媒体服务器,并进行rtmp流的推流、拉流测试_推流检测ip-CSDN博客
JavaCV之rtmp推流(FLV和M3U8)_javaac进行mov进行推流-CSDN博客
JavaCV推流实战(MP4文件)_javacv 推流本地mp4-CSDN博客
3、观看直播
前端参考:【视频直播流】vue flv视频直播流 flv rtmp vue 直播视频流_vue-video-player 支持flv格式播放吗 vue-CSDN博客
和视频播放器唯一的区别就是,加了一行live:true
后端参考:同开启直播,就是创建Nginx直播服务器
四、聊天室功能
前端代码,主要难在前端的MyChat页面
1、列表
2、创建聊天室
3、前往聊天
前端参考:SpringBoot+Vue 单页面多组WebSocket_一个页面多个websocket连接-CSDN博客
当点击聊天室栏目时打开对应的webSocket,和后台建立webSocket通信,开启实时聊天功能,关闭浏览器时关闭全部的webSocket
后端参考:springBoot集成webSocket并使用postMan进行测试_postman ws请求-CSDN博客
通过webSocket工具开启长连接,接收chatId和session,来区分是哪个浏览器的会话请求,根据token获取用户信息,来收发消息
五、其他功能
1、发布公网
参考博客:搭建frp进行内网穿透_frp内网穿透-CSDN博客
b站也有frp相关推荐和教程,我使用的是樱花frp免费版。
这样省掉了很多麻烦,不用配置路由、网络、虚拟机。相当于挂了个代理,其他人访问代理就能跳转到我的项目本地。
这是前端访问后台时的配置,本地测试用8081,访问frp用http://61.183.42.66:49027
2、支付功能
我使用了支付宝、微信扫码支付,根据网上的教程做的,会继续优化。