直播demo
<h1>概述</h1>
<h3>名词解释</h3>
<h5>TcPlayer播放器</h5>
<pre><code>腾讯云 Web 云点播服务的超级播放器，点播超级播放器是通过 HTML5 的<video>标签以及 Flash 实现视频播放。在浏览器不支持视频播放的情况下，实现了视频播放效果的多平台统一体验，并结合腾讯云点播视频服务，提供防盗链和播放 HLS 普通加密视频等功能。</code></pre>
<h5>socket和http的区别</h5>
<pre><code>Http协议：简单的对象访问协议，对应于应用层。Http协议是基于TCP链接的。
tcp协议：对应于传输层
ip协议：对应与网络层
TCP/IP是传输层协议，主要解决数据如何在网络中传输；而Http是应用层协议，主要解决如何包装数据。
Socket是对TCP/IP协议的封装，Socket本身并不是协议，而是一个调用接口（API），通过Socket，我们才能使用TCP/IP协议。
Http连接：http连接就是所谓的短连接，及客户端向服务器发送一次请求，服务器端相应后连接即会断掉。
socket连接：socket连接及时所谓的长连接，理论上客户端和服务端一旦建立连接，则不会主动断掉；但是由于各种环境因素可能会是连接断开，比如说：服务器端或客户端主机down了，网络故障，或者两者之间长时间没有数据传输，网络防火墙可能会断开该链接已释放网络资源。所以当一个socket连接中没有数据的传输，那么为了位置连续的连接需要发送心跳消息，具体心跳消息格式是开发者自己定义的。</code></pre>
<h5>node.js</h5>
<pre><code>就是运行在服务端的 JavaScript，是一个基于Chrome JavaScript 运行时建立的一个平台。它是一个事件驱动I/O服务端JavaScript环境，基于Google的V8引擎，V8引擎执行Javascript的速度非常快，性能非常好。</code></pre>
<h3>demo简介</h3>
<pre><code>通过demo形式展现直播相关的技术，包括TcPlayer播放器的拉流播放，socket,node.js等
该demo分为客户端和服务端，其中客户端分为pc版和h5版</code></pre>
<h3>demo路径</h3>
<pre><code>nisbos\nisbos-thirdparty\nisbos-live\nisbos-live-example</code></pre>
<p><br></p>
<h1>环境安装</h1>
<h3>服务端</h3>
<h5>1.新增依赖</h5>
<pre><code> <!-- netty 用来做socket连接 -->
<dependency>
<groupId>com.corundumstudio.socketio</groupId>
<artifactId>netty-socketio</artifactId>
<version>1.7.18</version>
</dependency>
<!-- json 用来做IM的数据传输格式解析 -->
<dependency>
<groupId>net.sf.json-lib</groupId>
<artifactId>json-lib</artifactId>
<version>2.4</version>
<classifier>jdk15</classifier>
</dependency></code></pre>
<h5>2.socket服务端事件编写</h5>
<pre><code> 在com.nisbos.example.event包下有连接(ConnectEvent)，断开(DisconnectEvent)，聊天(ChatEvent)，点赞(LikeEvent)服务端事件</code></pre>
<h3>客户端</h3>
<h5>pc版</h5>
<p>首页路径：</p>
<pre><code>\nisbos\nisbos-thirdparty\nisbos-live\nisbos-live-example\src\main\resources\static\live\live.html</code></pre>
<p>TcPlayer播放器引入标签：</p>
<pre><code> <script src="//imgcache.qq.com/open/qcloud/video/vcplayer/TcPlayer-2.3.3.js" charset="utf-8"></script></code></pre>
<p>socket依赖js路径：</p>
<pre><code>nisbos\nisbos-thirdparty\nisbos-live\nisbos-live-example\src\main\resources\static\live\js\socket.io.js</code></pre>
<p>socket客户端事件与TcPlayer播放器使用js路径:</p>
<pre><code>nisbos\nisbos-thirdparty\nisbos-live\nisbos-live-example\src\main\resources\static\live\js\live.js</code></pre>
<h5>h5版</h5>
<p>首页路径：</p>
<pre><code>nisbos\nisbos-thirdparty\nisbos-live\nisbos-live-example\src\main\resources\static\h5\src\index.ejs</code></pre>
<p>TcPlayer播放器引入标签：</p>
<pre><code> 同pc版</code></pre>
<p>socket依赖js路径：</p>
<pre><code>nisbos\nisbos-thirdparty\nisbos-live\nisbos-live-example\src\main\resources\static\h5\src\lib\socket.io.js</code></pre>
<p>socket客户端事件js路径：</p>
<pre><code>nisbos\nisbos-thirdparty\nisbos-live\nisbos-live-example\src\main\resources\static\h5\src\js\socket\socket.js</code></pre>
<p>socket连接地址，直播播放地址js路径：</p>
<pre><code>nisbos\nisbos-thirdparty\nisbos-live\nisbos-live-example\src\main\resources\static\h5\src\js\constants.js</code></pre>
<p>TcPlayer播放器使用js路径：</p>
<pre><code>nisbos\nisbos-thirdparty\nisbos-live\nisbos-live-example\src\main\resources\static\h5\src\js\videoplayer\index.js</code></pre>
<p>node.js启动端口配置(需安装node.js)：</p>
<pre><code>nisbos\nisbos-thirdparty\nisbos-live\nisbos-live-example\src\main\resources\static\h5\webpack.config.js</code></pre>
<p><img src="https://www.showdoc.cc/server/api/attachment/visitfile/sign/90def28a482b648183f4842d8e0d239d?showdoc=.jpg" alt="" /></p>
<p><br></p>
<h1>场景预览</h1>
<p><img src="https://www.showdoc.cc/server/api/attachment/visitfile/sign/81f43d08f2a1d2f389f765e54dac29f7?showdoc=.jpg" alt="" /></p>
<p><img src="https://www.showdoc.cc/server/api/attachment/visitfile/sign/d717ec1491cb498c6028d4bda20252ff?showdoc=.jpg" alt="" /></p>
<p><br></p>
<h1>快速入门</h1>
<h3>1.启动服务端</h3>
<h3>2.客户端访问</h3>
<h5>a.pc版</h5>
<pre><code>服务端地址/live/live.html</code></pre>
<h5>b.h5版</h5>
<pre><code>如果是在 IntelliJ IDEA 等开发工具中打开，因为需要执行node.js命令安装依赖，开发工具需要刷新新创建的依赖目录，有可能会导致开发工具卡死。所以建议将nisbos\nisbos-thirdparty\nisbos-live\nisbos-live-example\src\main\resources\static\h5文件夹复制到非 IntelliJ IDEA 等开发工具打开的目录中运行。</code></pre>
<h6>b.1.node.js作为服务器独立运行</h6>
<p>在h5文件夹下执行如下脚本，然后访问8081端口即可</p>
<pre><code>cnpm i & npm start</code></pre>
<h6>b.2.打包给其他服务器（如tomcat）运行</h6>
<p>在h5文件夹下执行如下脚本，然后将新生成的disk文件夹放至其他服务器下即可（如果是spring boot,可放至static文件夹下）</p>
<pre><code>cnpm i & npm run build</code></pre>
<h3>3.清空聊天记录和点赞数量</h3>
<pre><code>服务端地址/live/clear</code></pre>
<h5>示例</h5>
<p>清空前：</p>
<p><img src="https://www.showdoc.cc/server/api/attachment/visitfile/sign/d9d4e593ca9dcb5dc9d6511d9d875599?showdoc=.jpg" alt="" /></p>
<p>调用接口：
<img src="https://www.showdoc.cc/server/api/attachment/visitfile/sign/fa05e7cb8b5baa379478fb598a741a6d?showdoc=.jpg" alt="" /></p>
<p>清空后：
<img src="https://www.showdoc.cc/server/api/attachment/visitfile/sign/8297371415ebeddb0013275eb241e5c9?showdoc=.jpg" alt="" /></p>