全栈开发——动手打造属于自己的直播间（Vue+SpringBoot+Nginx）

前言

大学的学习时光临近尾声，感叹时光匆匆，三年一晃而过。同学们都忙着找工作，我也在这里抛一份简历吧，欢迎各位老板和猎手诚邀。我们进入正题。直播行业是当前火热的行业，谁都想从中分得一杯羹，直播养活了一大批人，一个平台主播粗略估计就有几千号人，但是实时在线观看量有的居然到了惊人的百万级别，特别是游戏主播，可想而知，直播间是一个磁铁式的广告传播媒介，也难怪这么多巨头公司都抢着做直播。我不太清楚直播行业技术有多深，毕竟自己没做过，但是咱们可以自己实现一个满足几百号人同时观看的直播间呀。

---

最终成果

• 演示地址(电脑端与移动端效果不同哦)

• 服务端项目地址

• 客户端项目地址

手机端效果

这个场景很熟悉吧~~ 通过obs推流软件来推流。

户外直播，通过yasea手机端推流软件，使用手机摄像头推流。

电脑端效果

播放香港卫视

直播画面

项目总览

项目分为三个部分:

1. 客户端
   直播间视频拉流、播放和聊天室，炫酷的弹幕以及直播间信息

2. 服务端
   处理直播间、用户的数据业务,聊天室消息的处理

3. 服务器部署
   视频服务器和web服务器

技术栈

移动客户端

• VUE全家桶

• UI层vonic

• axios

• 视频播放器: vue-video-player + videojs-contrib-hls

• websocket客户端: vue-stomp

• 弹幕插件: vue-barrage

• 打包工具:webpack

电脑端客户端

• 项目架构: Jquery + BootStrap

• 视频播放器: video.js

• websocket客户端: stomp.js + sockjs.js

• 弹幕插件: Jquery.danmu.js

• 模版引擎: thymeleaf

服务端

• IDE: IntelliJ IDEA

• 项目架构: SpringBoot1.5.4 +Maven3.0

• 主数据库: Mysql5.7

• 辅数据库: redis3.2

• 数据库访问层: spring-boot-starter-data-jpa + spring-boot-starter-data-redis

• websocket: spring-boot-starter-websocket

• 消息中间件: RabbitMQ/3.6.10

服务器部署

• 视频直播模块: nginx-rtmp-module

• web应用服务器: tomcat8.0

• 服务器: 腾讯云centos6.5

技术点讲解

直播间主要涉及到两个主要功能：第一是视频直播、第二是聊天室。这两个都是非常讲究实时性。

• 视频直播

说到直播我们先了解下几个常用的直播流协议,看了挺多的流媒体协议文章博客，但都是非常粗略，这里有个比较详细的 流媒体协议介绍，如果想详细了解协议内容估计去要看看专业书籍了。这里我们用到的只是rtmp和hls，实践后发现：rtmp只能够在电脑端播放，hls只能够在手机端播放。而且rtmp是相当快的尽管没有rtsp那么快，延迟只有几秒，我测试的就差不多2-5秒，但是hls大概有10几秒。所以如果你体验过demo,就会发现手机延迟比较多。

直播的流程:
直播分为推流和拉流两个过程，那么流推向哪里，拉流又从哪里拉取呢？那当然需要视频服务器啦，千万不要以为视频直播服务器很复杂，其实在nginx服务器中一切都变得简单。后面我会讲解如何部署Nginx服务器并配置视频模块(nginx-rtmp-module).

首先主播通过推流软件，比如OBS Studio推流软件，这个是比较专业级别的，很多直播平台的推荐主播使用这个软件来推送视频流，这里我也推荐一个开源的安卓端推流工具Yasea,下载地址，文件很小，但是很强大。
直播内容推送到服务器后，就可以在服务器端使用视频编码工具进行转码了，可以转换成各种高清，标清，超清的分辨率视频，也就是为什么我们在各个视频网站都可以选择视频清晰度。这里我们没有转码，只是通过前端视频播放器(video.js)来拉取视频.这样整个视频推流拉流过程就完成了。

• 聊天室

直播间里面的聊天室跟我们的群聊天差不多，只不过它变成了web端，web端的即时通信方案有很多，这里我们选择websocket协议来与服务端通信，websocket是基于http之上的传输协议，客户端向服务端发送http请求，并携带Upgrade:websocket升级头信息表示转换websocket协议，通过与服务端握手成功后就可以建立tcp通道，由此来传递消息，它与http最大的差别就是，服务端可以主动向客户端发送消息。

既然建立了消息通道，那我们就需要往通道里发消息，但是总得需要一个东西来管控消息该发给谁吧，要不然全乱套了，所以我们选择了消息中间件RabbitMQ.使用它来负责消息的路由去向。

---

理论知识都讲完啦，实操时间到!

移动客户端实操

源码地址

工程结构

|—— build                        构建服务和webpack配置        
|—— congfig                      项目不同环境的配置
|—— dist                         build生成生产目录
|—— static                       静态资源
|—— package.json                 项目配置文件
|—— src                          开发源代码目录
    |—— api                      通过axios导出的api目录
    |—— components               页面和组件
    |—— public                   公有组件
    |—— vuex                     全局状态
    |—— main.js                  应用启动配置点

功能模块

• 拉取服务器的直播视频流(hls)并播放直播画面

• 与服务端创建websocket连接，收发聊天室消息

• 通过websocket获取消息并发送到弹幕

• 通过websocket实时更新在线用户

• 结合服务端获取访问历史记录

• 问题反馈模块

效果图

项目说明

请参考源码

服务端实操

源码地址

由于个人比较喜欢接触新的东西，所以后端选择了springboot，前端选择了Vue.js年轻人嘛总得跟上潮流。SpringBoot实践过后发现真的太省心了，不用再理会各种配置文件，全自动化装配。
这里贴一下pom.xml

<?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 http://maven.apache.org/xsd/maven-4.0.0.xsd">
    <modelVersion>4.0.0</modelVersion>

    <groupId>com.hushangjie</groupId>
    <artifactId>rtmp-demo&