基于Swoole实现视频弹幕功能(实战小练习)

作者: 温新

分类: 【高性能PHP】

阅读: 1852

时间: 2021-04-28 15:58:32

这篇练习记录是基于Swoole实现一个视频弹幕功能。此篇文章涵盖3个文件,一个是后端WebSocket服务器文件,一个是前端静态页面文件,另一个是js弹幕文件。

前端页面

文件:websocket.html

<span style="box-sizing: border-box;padding-right: 0.1px"><span style="box-sizing: border-box;color: rgb(85, 85, 85)"></span></span><br></br><span style="box-sizing: border-box;padding-right: 0.1px"><span class="cm-tag cm-bracket" style="box-sizing: border-box;color: rgb(17, 119, 0)"><</span><span style="box-sizing: border-box;color: rgb(17, 119, 0)">html</span><span class="cm-tag cm-bracket" style="box-sizing: border-box;color: rgb(17, 119, 0)">></span></span><br></br><span style="box-sizing: border-box;padding-right: 0.1px"><span class="cm-tag cm-bracket" style="box-sizing: border-box;color: rgb(17, 119, 0)"><</span><span style="box-sizing: border-box;color: rgb(17, 119, 0)">head</span><span class="cm-tag cm-bracket" style="box-sizing: border-box;color: rgb(17, 119, 0)">></span></span><br></br><span style="box-sizing: border-box;padding-right: 0.1px">    <span class="cm-tag cm-bracket" style="box-sizing: border-box;color: rgb(17, 119, 0)"><</span><span style="box-sizing: border-box;color: rgb(17, 119, 0)">meta</span> <span style="box-sizing: border-box;color: rgb(0, 0, 204)">charset</span>=<span style="box-sizing: border-box;color: rgb(170, 17, 17)">"UTF-8"</span><span class="cm-tag cm-bracket" style="box-sizing: border-box;color: rgb(17, 119, 0)">></span></span><br></br><span style="box-sizing: border-box;padding-right: 0.1px">    <span class="cm-tag cm-bracket" style="box-sizing: border-box;color: rgb(17, 119, 0)"><</span><span style="box-sizing: border-box;color: rgb(17, 119, 0)">script</span> <span style="box-sizing: border-box;color: rgb(0, 0, 204)">src</span>=<span style="box-sizing: border-box;color: rgb(170, 17, 17)">"./canvasBarrage.js"</span><span class="cm-tag cm-bracket" style="box-sizing: border-box;color: rgb(17, 119, 0)">></</span><span style="box-sizing: border-box;color: rgb(17, 119, 0)">script</span><span class="cm-tag cm-bracket" style="box-sizing: border-box;color: rgb(17, 119, 0)">></span></span><br></br><span style="box-sizing: border-box;padding-right: 0.1px">    <span class="cm-tag cm-bracket" style="box-sizing: border-box;color: rgb(17, 119, 0)"><</span><span style="box-sizing: border-box;color: rgb(17, 119, 0)">title</span><span class="cm-tag cm-bracket" style="box-sizing: border-box;color: rgb(17, 119, 0)">></span>基于Swoole实现视频弹幕功能<span class="cm-tag cm-bracket" style="box-sizing: border-box;color: rgb(17, 119, 0)"></</span><span style="box-sizing: border-box;color: rgb(17, 119, 0)">title</span><span class="cm-tag cm-bracket" style="box-sizing: border-box;color: rgb(17, 119, 0)">></span></span><br></br><span style="box-sizing: border-box;padding-right: 0.1px">    <span class="cm-tag cm-bracket" style="box-sizing: border-box;color: rgb(17, 119, 0)"><</span><span style="box-sizing: border-box;color: rgb(17, 119, 0)">style</span><span class="cm-tag cm-bracket" style="box-sizing: border-box;color: rgb(17, 119, 0)">></span></span><br></br><span style="box-sizing: border-box;padding-right: 0.1px">        <span style="box-sizing: border-box;color: rgb(85, 85, 85)">.container</span> {</span><br></br><span style="box-sizing: border-box;padding-right: 0.1px">            <span style="box-sizing: border-box;color: rgb(0, 0, 0)">width</span>: <span style="box-sizing: border-box;color: rgb(17, 102, 68)">700px</span>;</span><br></br><span style="box-sizing: border-box;padding-right: 0.1px">            <span style="box-sizing: border-box;color: rgb(0, 0, 0)">margin</span>: <span style="box-sizing: border-box;color: rgb(17, 102, 68)">0</span> <span style="box-sizing: border-box;color: rgb(34, 17, 153)">auto</span>;</span><br></br><span style="box-sizing: border-box;padding-right: 0.1px">        }</span><br></br><span style="box-sizing: border-box;padding-right: 0.1px">        <span style="box-sizing: border-box;color: rgb(85, 85, 85)">.canvas-barrage</span> {</span><br></br><span style="box-sizing: border-box;padding-right: 0.1px">            <span style="box-sizing: border-box;color: rgb(0, 0, 0)">position</span>: <span style="box-sizing: border-box;color: rgb(34, 17, 153)">absolute</span>;</span><br></br><span style="box-sizing: border-box;padding-right: 0.1px">            <span style="box-sizing: border-box;color: rgb(0, 0, 0)">width</span>: <span style="box-sizing: border-box;color: rgb(17, 102, 68)">700px</span>;</span><br></br><span style="box-sizing: border-box;padding-right: 0.1px">            <span style="box-sizing: border-box;color: rgb(0, 0, 0)">height</span>: <span style="box-sizing: border-box;color: rgb(17, 102, 68)">500px</span>;</span><br></br><span style="box-sizing: border-box;padding-right: 0.1px">            <span style="box-sizing: border-box;color: rgb(0, 0, 0)">pointer-events</span>: <span style="box-sizing: border-box;color: rgb(34, 17, 153)">none</span>;</span><br></br><span style="box-sizing: border-box;padding-right: 0.1px">            <span style="box-sizing: border-box;color: rgb(0, 0, 0)">z-index</span>: <span style="box-sizing: border-box;color: rgb(17, 102, 68)">1</span>;</span><br></br><span style="box-sizing: border-box;padding-right: 0.1px">        }</span><br></br><span style="box-sizing: border-box;padding-right: 0.1px">        <span style="box-sizing: border-box;color: rgb(85, 85, 85)">.box</span> {</span><br></br><span style="box-sizing: border-box;padding-right: 0.1px">            <span style="box-sizing: border-box;color: rgb(0, 0, 0)">display</span>: <span style="box-sizing: border-box;color: rgb(34, 17, 153)">flex</span>;</span><br></br><span style="box-sizing: border-box;padding-right: 0.1px">            <span style="box-sizing: border-box;color: rgb(0, 0, 0)">flex-direction</span>: <span style="box-sizing: border-box;color: rgb(34, 17, 153)">row</span>;</span><br></br><span style="box-sizing: border-box;padding-right: 0.1px">            <span style="box-sizing: border-box;color: rgb(0, 0, 0)">justify-content</span>: <span style="box-sizing: border-box;color: rgb(34, 17, 153)">space-between</span>;</span><br></br><span style="box-sizing: border-box;padding-right: 0.1px">        }</span><br></br><span style="box-sizing: border-box;padding-right: 0.1px">        <span style="box-sizing: border-box;color: rgb(85, 85, 85)">.barrage-msg</span> {</span><br></br><span style="box-sizing: border-box;padding-right: 0.1px">            <span style="box-sizing: border-box;color: rgb(0, 0, 0)">width</span>: <span style="box-sizing: border-box;color: rgb(17, 102, 68)">700px</span>;</span><br></br><span style="box-sizing: border-box;padding-right: 0.1px">            <span style="box-sizing: border-box;color: rgb(0, 0, 0)">height</span>: <span style="box-sizing: border-box;color: rgb(17, 102, 68)">20px</span>;</span><br></br><span style="box-sizing: border-box;padding-right: 0.1px">            <span style="box-sizing: border-box;color: rgb(0, 0, 0)">line-height</span>: <span style="box-sizing: border-box;color: rgb(17, 102, 68)">20px</span>;</span><br></br><span style="box-sizing: border-box;padding-right: 0.1px">            <span style="box-sizing: border-box;color: rgb(0, 0, 0)">border</span>: <span style="box-sizing: border-box;color: rgb(17, 102, 68)">1px</span> <span style="box-sizing: border-box;color: rgb(34, 17, 153)">solid</span> <span style="box-sizing: border-box;color: rgb(119, 0, 136)">gray</span>;</span><br></br><span style="box-sizing: border-box;padding-right: 0.1px">            <span style="box-sizing: border-box;color: rgb(0, 0, 0)">border-radius</span>: <span style="box-sizing: border-box;color: rgb(17, 102, 68)">5px</span>;</span><br></br><span style="box-sizing: border-box;padding-right: 0.1px">            <span style="box-sizing: border-box;color: rgb(0, 0, 0)">padding</span>: <span style="box-sizing: border-box;color: rgb(17, 102, 68)">6px</span> <span style="box-sizing: border-box;color: rgb(17, 102, 68)">2px</span>;</span><br></br><span style="box-sizing: border-box;padding-right: 0.1px">        }</span><br></br><span style="box-sizing: border-box;padding-right: 0.1px">        <span style="box-sizing: border-box;color: rgb(85, 85, 85)">.barrage-btn</span> {</span><br></br><span style="box-sizing: border-box;padding-right: 0.1px">            <span style="box-sizing: border-box;color: rgb(0, 0, 0)">display</span>: <span style="box-sizing: border-box;color: rgb(34, 17, 153)">inline-block</span>;</span><br></br><span style="box-sizing: border-box;padding-right: 0.1px">            <span style="box-sizing: border-box;color: rgb(0, 0, 0)">background</span>: <span style="box-sizing: border-box;color: rgb(119, 0, 136)">pink</span>;</span><br></br><span style="box-sizing: border-box;padding-right: 0.1px">            <span style="box-sizing: border-box;color: rgb(0, 0, 0)">line-height</span>: <span style="box-sizing: border-box;color: rgb(17, 102, 68)">20px</span>;</span><br></br><span style="box-sizing: border-box;padding-right: 0.1px">            <span style="box-sizing: border-box;color: rgb(0, 0, 0)">border-radius</span>: <span style="box-sizing: border-box;color: rgb(17, 102, 68)">5px</span>;</span><br></br><span style="box-sizing: border-box;padding-right: 0.1px">            <span style="box-sizing: border-box;color: rgb(0, 0, 0)">color</span>: <span style="box-sizing: border-box;color: rgb(34, 17, 153)">rgb</span>(<span style="box-sizing: border-box;color: rgb(17, 102, 68)">146</span>, <span style="box-sizing: border-box;color: rgb(17, 102, 68)">46</span>, <span style="box-sizing: border-box;color: rgb(17, 102, 68)">46</span>);</span><br></br><span style="box-sizing: border-box;padding-right: 0.1px">            <span style="box-sizing: border-box;color: rgb(0, 0, 0)">font-size</span>: <span style="box-sizing: border-box;color: rgb(17, 102, 68)">16px</span>;</span><br></br><span style="box-sizing: border-box;padding-right: 0.1px">            <span style="box-sizing: border-box;color: rgb(0, 0, 0)">border</span>: <span style="box-sizing: border-box;color: rgb(34, 17, 153)">none</span>;</span><br></br><span style="box-sizing: border-box;padding-right: 0.1px">        }</span><br></br><span style="box-sizing: border-box;padding-right: 0.1px">    <span class="cm-tag cm-bracket" style="box-sizing: border-box;color: rgb(17, 119, 0)"></</span><span style="box-sizing: border-box;color: rgb(17, 119, 0)">style</span><span class="cm-tag cm-bracket" style="box-sizing: border-box;color: rgb(17, 119, 0)">></span></span><br></br><span style="box-sizing: border-box;padding-right: 0.1px"><span style="box-sizing: border-box"></span></span><br></br><span style="box-sizing: border-box;padding-right: 0.1px"><span class="cm-tag cm-bracket" style="box-sizing: border-box;color: rgb(17, 119, 0)"></</span><span style="box-sizing: border-box;color: rgb(17, 119, 0)">head</span><span class="cm-tag cm-bracket" style="box-sizing: border-box;color: rgb(17, 119, 0)">></span></span><br></br><span style="box-sizing: border-box;padding-right: 0.1px"><span class="cm-tag cm-bracket" style="box-sizing: border-box;color: rgb(17, 119, 0)"><</span><span style="box-sizing: border-box;color: rgb(17, 119, 0)">body</span><span class="cm-tag cm-bracket" style="box-sizing: border-box;color: rgb(17, 119, 0)">></span></span><br></br><span style="box-sizing: border-box;padding-right: 0.1px">    <span class="cm-tag cm-bracket" style="box-sizing: border-box;color: rgb(17, 119, 0)"><</span><span style="box-sizing: border-box;color: rgb(17, 119, 0)">div</span> <span style="box-sizing: border-box;color: rgb(0, 0, 204)">class</span>=<span style="box-sizing: border-box;color: rgb(170, 17, 17)">"container"</span><span class="cm-tag cm-bracket" style="box-sizing: border-box;color: rgb(17, 119, 0)">></span></span><br></br><span style="box-sizing: border-box;padding-right: 0.1px">        <span class="cm-tag cm-bracket" style="box-sizing: border-box;color: rgb(17, 119, 0)"><</span><span style="box-sizing: border-box;color: rgb(17, 119, 0)">canvas</span> <span style="box-sizing: border-box;color: rgb(0, 0, 204)">id</span>=<span style="box-sizing: border-box;color: rgb(170, 17, 17)">"canvasBarrage"</span> <span style="box-sizing: border-box;color: rgb(0, 0, 204)">class</span>=<span style="box-sizing: border-box;color: rgb(170, 17, 17)">"canvas-barrage"</span><span class="cm-tag cm-bracket" style="box-sizing: border-box;color: rgb(17, 119, 0)">></</span><span style="box-sizing: border-box;color: rgb(17, 119, 0)">canvas</span><span class="cm-tag cm-bracket" style="box-sizing: border-box;color: rgb(17, 119, 0)">></span></span><br></br><span style="box-sizing: border-box;padding-right: 0.1px">        <span class="cm-tag cm-bracket" style="box-sizing: border-box;color: rgb(17, 119, 0)"><</span><span style="box-sizing: border-box;color: rgb(17, 119, 0)">video</span> <span style="box-sizing: border-box;color: rgb(0, 0, 204)">src</span>=<span style="box-sizing: border-box;color: rgb(170, 17, 17)">"./test.mp4"</span> <span style="box-sizing: border-box;color: rgb(0, 0, 204)">width</span>=<span style="box-sizing: border-box;color: rgb(170, 17, 17)">"700"</span> <span style="box-sizing: border-box;color: rgb(0, 0, 204)">height</span>=<span style="box-sizing: border-box;color: rgb(170, 17, 17)">"500"</span> <span style="box-sizing: border-box;color: rgb(0, 0, 204)">id</span>=<span style="box-sizing: border-box;color: rgb(170, 17, 17)">"video"</span> <span style="box-sizing: border-box;color: rgb(0, 0, 204)">controls</span><span class="cm-tag cm-bracket" style="box-sizing: border-box;color: rgb(17, 119, 0)">></</span><span style="box-sizing: border-box;color: rgb(17, 119, 0)">video</span><span class="cm-tag cm-bracket" style="box-sizing: border-box;color: rgb(17, 119, 0)">></span></span><br></br><span style="box-sizing: border-box;padding-right: 0.1px">        <span class="cm-tag cm-bracket" style="box-sizing: border-box;color: rgb(17, 119, 0)"><</span><span style="box-sizing: border-box;color: rgb(17, 119, 0)">div</span> <span style="box-sizing: border-box;color: rgb(0, 0, 204)">class</span>=<span style="box-sizing: border-box;color: rgb(170, 17, 17)">"box"</span><span class="cm-tag cm-bracket" style="box-sizing: border-box;color: rgb(17, 119, 0)">></span></span><br></br><span style="box-sizing: border-box;padding-right: 0.1px">            <span class="cm-tag cm-bracket" style="box-sizing: border-box;color: rgb(17, 119, 0)"><</span><span style="box-sizing: border-box;color: rgb(17, 119, 0)">input</span> <span style="box-sizing: border-box;color: rgb(0, 0, 204)">type</span>=<span style="box-sizing: border-box;color: rgb(170, 17, 17)">"text"</span> <span style="box-sizing: border-box;color: rgb(0, 0, 204)">class</span>=<span style="box-sizing: border-box;color: rgb(170, 17, 17)">"barrage-msg"</span> <span style="box-sizing: border-box;color: rgb(0, 0, 204)">id</span>=<span style="box-sizing: border-box;color: rgb(170, 17, 17)">"msg"</span> <span style="box-sizing: border-box;color: rgb(0, 0, 204)">name</span>=<span style="box-sizing: border-box;color: rgb(170, 17, 17)">"value"</span> <span style="box-sizing: border-box;color: rgb(0, 0, 204)">value</span>=<span style="box-sizing: border-box;color: rgb(170, 17, 17)">""</span> <span style="box-sizing: border-box;color: rgb(0, 0, 204)">required</span><span class="cm-tag cm-bracket" style="box-sizing: border-box;color: rgb(17, 119, 0)">></span></span><br></br><span style="box-sizing: border-box;padding-right: 0.1px">            <span class="cm-tag cm-bracket" style="box-sizing: border-box;color: rgb(17, 119, 0)"><</span><span style="box-sizing: border-box;color: rgb(17, 119, 0)">input</span> <span style="box-sizing: border-box;color: rgb(0, 0, 204)">type</span>=<span style="box-sizing: border-box;color: rgb(170, 17, 17)">"button"</span> <span style="box-sizing: border-box;color: rgb(0, 0, 204)">class</span>=<span style="box-sizing: border-box;color: rgb(170, 17, 17)">"barrage-btn"</span> <span style="box-sizing: border-box;color: rgb(0, 0, 204)">id</span>=<span style="box-sizing: border-box;color: rgb(170, 17, 17)">"sendBtn"</span> <span style="box-sizing: border-box;color: rgb(0, 0, 204)">value</span>=<span style="box-sizing: border-box;color: rgb(170, 17, 17)">"发送弹幕"</span><span class="cm-tag cm-bracket" style="box-sizing: border-box;color: rgb(17, 119, 0)">></span></span><br></br><span style="box-sizing: border-box;padding-right: 0.1px">        <span class="cm-tag cm-bracket" style="box-sizing: border-box;color: rgb(17, 119, 0)"></</span><span style="box-sizing: border-box;color: rgb(17, 119, 0)">div</span><span class="cm-tag cm-bracket" style="box-sizing: border-box;color: rgb(17, 119, 0)">></span></span><br></br><span style="box-sizing: border-box;padding-right: 0.1px">    <span class="cm-tag cm-bracket" style="box-sizing: border-box;color: rgb(17, 119, 0)"></</span><span style="box-sizing: border-box;color: rgb(17, 119, 0)">div</span><span class="cm-tag cm-bracket" style="box-sizing: border-box;color: rgb(17, 119, 0)">></span></span><br></br><span style="box-sizing: border-box;padding-right: 0.1px"><span style="box-sizing: border-box"></span></span><br></br><span style="box-sizing: border-box;padding-right: 0.1px">    <span class="cm-tag cm-bracket" style="box-sizing: border-box;color: rgb(17, 119, 0)"><</span><span style="box-sizing: border-box;color: rgb(17, 119, 0)">script</span><span class="cm-tag cm-bracket" style="box-sizing: border-box;color: rgb(17, 119, 0)">></span></span><br></br><span style="box-sizing: border-box;padding-right: 0.1px">        <span style="box-sizing: border-box;color: rgb(170, 85, 0)">// 弹幕数据</span></span><br></br><span style="box-sizing: border-box;padding-right: 0.1px">        <span style="box-sizing: border-box;color: rgb(119, 0, 136)">let</span> <span style="box-sizing: border-box;color: rgb(0, 0, 255)">barrageData</span> <span style="box-sizing: border-box;color: rgb(152, 26, 26)">=</span> [{}];</span><br></br><span style="box-sizing: border-box;padding-right: 0.1px"><span style="box-sizing: border-box"></span></span><br></br><span style="box-sizing: border-box;padding-right: 0.1px">        <span style="box-sizing: border-box;color: rgb(170, 85, 0)">// 获取元素对象</span></span><br></br><span style="box-sizing: border-box;padding-right: 0.1px">        <span style="box-sizing: border-box;color: rgb(119, 0, 136)">let</span> <span style="box-sizing: border-box;color: rgb(0, 0, 255)">canvasEle</span>   <span style="box-sizing: border-box;color: rgb(152, 26, 26)">=</span> <span style="box-sizing: border-box;color: rgb(0, 0, 0)">document</span>.<span style="box-sizing: border-box;color: rgb(0, 0, 0)">getElementById</span>(<span style="box-sizing: border-box;color: rgb(170, 17, 17)">'canvasBarrage'</span>);</span><br></br><span style="box-sizing: border-box;padding-right: 0.1px">        <span style="box-sizing: border-box;color: rgb(119, 0, 136)">let</span> <span style="box-sizing: border-box;color: rgb(0, 0, 255)">videoEle</span>    <span style="box-sizing: border-box;color: rgb(152, 26, 26)">=</span> <span style="box-sizing: border-box;color: rgb(0, 0, 0)">document</span>.<span style="box-sizing: border-box;color: rgb(0, 0, 0)">getElementById</span>(<span style="box-sizing: border-box;color: rgb(170, 17, 17)">'video'</span>);</span><br></br><span style="box-sizing: border-box;padding-right: 0.1px"><span style="box-sizing: border-box"></span></span><br></br><span style="box-sizing: border-box;padding-right: 0.1px">        <span style="box-sizing: border-box;color: rgb(170, 85, 0)">// 实例化弹幕</span></span><br></br><span style="box-sizing: border-box;padding-right: 0.1px">        <span style="box-sizing: border-box;color: rgb(119, 0, 136)">const</span> <span style="box-sizing: border-box;color: rgb(0, 0, 255)">barrage</span>   <span style="box-sizing: border-box;color: rgb(152, 26, 26)">=</span> <span style="box-sizing: border-box;color: rgb(119, 0, 136)">new</span> <span style="box-sizing: border-box;color: rgb(0, 0, 0)">CanvasBarrage</span>(<span style="box-sizing: border-box;color: rgb(0, 0, 0)">canvasEle</span>, <span style="box-sizing: border-box;color: rgb(0, 0, 0)">videoEle</span>, {</span><br></br><span style="box-sizing: border-box;padding-right: 0.1px">            <span style="box-sizing: border-box;color: rgb(0, 0, 0)">data</span>:<span style="box-sizing: border-box;color: rgb(0, 0, 0)">barrageData</span></span><br></br><span style="box-sizing: border-box;padding-right: 0.1px">        });</span><br></br><span style="box-sizing: border-box;padding-right: 0.1px"><span style="box-sizing: border-box"></span></span><br></br><span style="box-sizing: border-box;padding-right: 0.1px">        <span style="box-sizing: border-box;color: rgb(170, 85, 0)">// 实例化WebSocket对象</span></span><br></br><span style="box-sizing: border-box;padding-right: 0.1px">        <span style="box-sizing: border-box;color: rgb(119, 0, 136)">const</span> <span style="box-sizing: border-box;color: rgb(0, 0, 255)">ws</span>        <span style="box-sizing: border-box;color: rgb(152, 26, 26)">=</span> <span style="box-sizing: border-box;color: rgb(119, 0, 136)">new</span> <span style="box-sizing: border-box;color: rgb(0, 0, 0)">WebSocket</span>(<span style="box-sizing: border-box;color: rgb(170, 17, 17)">'ws://192.168.172.130:9506'</span>);</span><br></br><span style="box-sizing: border-box;padding-right: 0.1px"><span style="box-sizing: border-box"></span></span><br></br><span style="box-sizing: border-box;padding-right: 0.1px">        <span style="box-sizing: border-box;color: rgb(170, 85, 0)">// 连接</span></span><br></br><span style="box-sizing: border-box;padding-right: 0.1px">        <span style="box-sizing: border-box;color: rgb(0, 0, 0)">ws</span>.<span style="box-sizing: border-box;color: rgb(0, 0, 0)">onopen</span> <span style="box-sizing: border-box;color: rgb(152, 26, 26)">=</span> <span style="box-sizing: border-box;color: rgb(119, 0, 136)">function</span> (<span style="box-sizing: border-box;color: rgb(0, 0, 255)">event</span>) {</span><br></br><span style="box-sizing: border-box;padding-right: 0.1px">            <span style="box-sizing: border-box;color: rgb(119, 0, 136)">if</span> (<span style="box-sizing: border-box;color: rgb(0, 0, 0)">ws</span>.<span style="box-sizing: border-box;color: rgb(0, 0, 0)">readyState</span> <span style="box-sizing: border-box;color: rgb(152, 26, 26)">==</span> <span style="box-sizing: border-box;color: rgb(17, 102, 68)">1</span>) {</span><br></br><span style="box-sizing: border-box;padding-right: 0.1px">                <span style="box-sizing: border-box;color: rgb(0, 0, 0)">console</span>.<span style="box-sizing: border-box;color: rgb(0, 0, 0)">log</span>(<span style="box-sizing: border-box;color: rgb(170, 17, 17)">'WebSocket 连接成功...'</span>);</span><br></br><span style="box-sizing: border-box;padding-right: 0.1px">            } <span style="box-sizing: border-box;color: rgb(119, 0, 136)">else</span> {</span><br></br><span style="box-sizing: border-box;padding-right: 0.1px">                <span style="box-sizing: border-box;color: rgb(0, 0, 0)">console</span>.<span style="box-sizing: border-box;color: rgb(0, 0, 0)">log</span>(<span style="box-sizing: border-box;color: rgb(170, 17, 17)">'WebSocket 连接失败...'</span>);</span><br></br><span style="box-sizing: border-box;padding-right: 0.1px">            }</span><br></br><span style="box-sizing: border-box;padding-right: 0.1px">        };</span><br></br><span style="box-sizing: border-box;padding-right: 0.1px"><span style="box-sizing: border-box"></span></span><br></br><span style="box-sizing: border-box;padding-right: 0.1px">        <span style="box-sizing: border-box;color: rgb(170, 85, 0)">// 接收消息</span></span><br></br><span style="box-sizing: border-box;padding-right: 0.1px">        <span style="box-sizing: border-box;color: rgb(0, 0, 0)">ws</span>.<span style="box-sizing: border-box;color: rgb(0, 0, 0)">onmessage</span> <span style="box-sizing: border-box;color: rgb(152, 26, 26)">=</span> <span style="box-sizing: border-box;color: rgb(119, 0, 136)">function</span> (<span style="box-sizing: border-box;color: rgb(0, 0, 255)">evt</span>) {</span><br></br><span style="box-sizing: border-box;padding-right: 0.1px">            <span style="box-sizing: border-box;color: rgb(0, 0, 0)">barrage</span>.<span style="box-sizing: border-box;color: rgb(0, 0, 0)">add</span>({</span><br></br><span style="box-sizing: border-box;padding-right: 0.1px">                <span style="box-sizing: border-box;color: rgb(0, 0, 0)">value</span>: <span style="box-sizing: border-box;color: rgb(0, 85, 170)">evt</span>.<span style="box-sizing: border-box;color: rgb(0, 0, 0)">data</span>,</span><br></br><span style="box-sizing: border-box;padding-right: 0.1px">                <span style="box-sizing: border-box;color: rgb(0, 0, 0)">time</span>: <span style="box-sizing: border-box;color: rgb(0, 0, 0)">videoEle</span>.<span style="box-sizing: border-box;color: rgb(0, 0, 0)">currentTime</span>,</span><br></br><span style="box-sizing: border-box;padding-right: 0.1px">                <span style="box-sizing: border-box;color: rgb(0, 0, 0)">speed</span>: <span style="box-sizing: border-box;color: rgb(17, 102, 68)">5</span></span><br></br><span style="box-sizing: border-box;padding-right: 0.1px">            });</span><br></br><span style="box-sizing: border-box;padding-right: 0.1px">        }</span><br></br><span style="box-sizing: border-box;padding-right: 0.1px"><span style="box-sizing: border-box"></span></span><br></br><span style="box-sizing: border-box;padding-right: 0.1px">        <span style="box-sizing: border-box;color: rgb(0, 0, 0)">ws</span>.<span style="box-sizing: border-box;color: rgb(0, 0, 0)">onerror</span> <span style="box-sizing: border-box;color: rgb(152, 26, 26)">=</span> <span style="box-sizing: border-box;color: rgb(119, 0, 136)">function</span> (<span style="box-sizing: border-box;color: rgb(0, 0, 255)">evt</span>) {</span><br></br><span style="box-sizing: border-box;padding-right: 0.1px">            <span style="box-sizing: border-box;color: rgb(0, 0, 0)">console</span>.<span style="box-sizing: border-box;color: rgb(0, 0, 0)">log</span>(<span style="box-sizing: border-box;color: rgb(170, 17, 17)">'WebSocket 连接失败...'</span>);</span><br></br><span style="box-sizing: border-box;padding-right: 0.1px">        };</span><br></br><span style="box-sizing: border-box;padding-right: 0.1px"><span style="box-sizing: border-box"></span></span><br></br><span style="box-sizing: border-box;padding-right: 0.1px">        <span style="box-sizing: border-box;color: rgb(0, 0, 0)">ws</span>.<span style="box-sizing: border-box;color: rgb(0, 0, 0)">onclose</span> <span style="box-sizing: border-box;color: rgb(152, 26, 26)">=</span> <span style="box-sizing: border-box;color: rgb(119, 0, 136)">function</span>() {</span><br></br><span style="box-sizing: border-box;padding-right: 0.1px">            <span style="box-sizing: border-box;color: rgb(0, 0, 0)">console</span>.<span style="box-sizing: border-box;color: rgb(0, 0, 0)">log</span>(<span style="box-sizing: border-box;color: rgb(170, 17, 17)">'WebSocket 连接关闭...'</span>);</span><br></br><span style="box-sizing: border-box;padding-right: 0.1px">        };</span><br></br><span style="box-sizing: border-box;padding-right: 0.1px"><span style="box-sizing: border-box"></span></span><br></br><span style="box-sizing: border-box;padding-right: 0.1px">        <span style="box-sizing: border-box;color: rgb(119, 0, 136)">let</span> <span style="box-sizing: border-box;color: rgb(0, 0, 255)">msg</span>;</span><br></br><span style="box-sizing: border-box;padding-right: 0.1px">        <span style="box-sizing: border-box;color: rgb(119, 0, 136)">let</span> <span style="box-sizing: border-box;color: rgb(0, 0, 255)">sendBtn</span> <span style="box-sizing: border-box;color: rgb(152, 26, 26)">=</span> <span style="box-sizing: border-box;color: rgb(0, 0, 0)">document</span>.<span style="box-sizing: border-box;color: rgb(0, 0, 0)">getElementById</span>(<span style="box-sizing: border-box;color: rgb(170, 17, 17)">'sendBtn'</span>);</span><br></br><span style="box-sizing: border-box;padding-right: 0.1px">        <span style="box-sizing: border-box;color: rgb(170, 85, 0)">// 发送弹幕</span></span><br></br><span style="box-sizing: border-box;padding-right: 0.1px">        <span style="box-sizing: border-box;color: rgb(0, 0, 0)">sendBtn</span>.<span style="box-sizing: border-box;color: rgb(0, 0, 0)">onclick</span> <span style="box-sizing: border-box;color: rgb(152, 26, 26)">=</span> <span style="box-sizing: border-box;color: rgb(119, 0, 136)">function</span>(){</span><br></br><span style="box-sizing: border-box;padding-right: 0.1px">            <span style="box-sizing: border-box;color: rgb(119, 0, 136)">if</span> (<span style="box-sizing: border-box;color: rgb(0, 0, 0)">ws</span>.<span style="box-sizing: border-box;color: rgb(0, 0, 0)">readyState</span> <span style="box-sizing: border-box;color: rgb(152, 26, 26)">==</span> <span style="box-sizing: border-box;color: rgb(17, 102, 68)">1</span>) {</span><br></br><span style="box-sizing: border-box;padding-right: 0.1px">                <span style="box-sizing: border-box;color: rgb(0, 0, 0)">msg</span> <span style="box-sizing: border-box;color: rgb(152, 26, 26)">=</span> <span style="box-sizing: border-box;color: rgb(0, 0, 0)">document</span>.<span style="box-sizing: border-box;color: rgb(0, 0, 0)">getElementById</span>(<span style="box-sizing: border-box;color: rgb(170, 17, 17)">'msg'</span>).<span style="box-sizing: border-box;color: rgb(0, 0, 0)">value</span>;</span><br></br><span style="box-sizing: border-box;padding-right: 0.1px">                <span style="box-sizing: border-box;color: rgb(0, 0, 0)">ws</span>.<span style="box-sizing: border-box;color: rgb(0, 0, 0)">send</span>(<span style="box-sizing: border-box;color: rgb(0, 0, 0)">msg</span>);</span><br></br><span style="box-sizing: border-box;padding-right: 0.1px">            } <span style="box-sizing: border-box;color: rgb(119, 0, 136)">else</span> {</span><br></br><span style="box-sizing: border-box;padding-right: 0.1px">                <span style="box-sizing: border-box;color: rgb(0, 0, 0)">alert</span>(<span style="box-sizing: border-box;color: rgb(170, 17, 17)">'WebSocket 连接失败'</span>);</span><br></br><span style="box-sizing: border-box;padding-right: 0.1px">            }</span><br></br><span style="box-sizing: border-box;padding-right: 0.1px">        };</span><br></br><span style="box-sizing: border-box;padding-right: 0.1px">    <span class="cm-tag cm-bracket" style="box-sizing: border-box;color: rgb(17, 119, 0)"></</span><span style="box-sizing: border-box;color: rgb(17, 119, 0)">script</span><span class="cm-tag cm-bracket" style="box-sizing: border-box;color: rgb(17, 119, 0)">></span></span><br></br><span style="box-sizing: border-box;padding-right: 0.1px"><span class="cm-tag cm-bracket" style="box-sizing: border-box;color: rgb(17, 119, 0)"></</span><span style="box-sizing: border-box;color: rgb(17, 119, 0)">body</span><span class="cm-tag cm-bracket" style="box-sizing: border-box;color: rgb(17, 119, 0)">></span></span><br></br><span style="box-sizing: border-box;padding-right: 0.1px"><span class="cm-tag cm-bracket" style="box-sizing: border-box;color: rgb(17, 119, 0)"></</span><span style="box-sizing: border-box;color: rgb(17, 119, 0)">html</span><span class="cm-tag cm-bracket" style="box-sizing: border-box;color: rgb(17, 119, 0)">></span></span>

弹幕js文件

文件:canvasBarrage.js

关于此文件,请到这个链接中获取

后端处理

文件:WebSocket.php

<span style="box-sizing: border-box;padding-right: 0.1px"><span style="box-sizing: border-box;color: rgb(152, 26, 26)"><?</span><span style="box-sizing: border-box;color: rgb(0, 0, 0)">php</span></span><br></br><span style="box-sizing: border-box;padding-right: 0.1px"><span style="box-sizing: border-box"></span></span><br></br><span style="box-sizing: border-box;padding-right: 0.1px"><span style="box-sizing: border-box;color: rgb(170, 85, 0)">/**</span></span><br></br><span style="box-sizing: border-box;padding-right: 0.1px"><span style="box-sizing: border-box;color: rgb(170, 85, 0)">*WebSocket服务器</span></span><br></br><span style="box-sizing: border-box;padding-right: 0.1px"><span style="box-sizing: border-box;color: rgb(170, 85, 0)">**/</span></span><br></br><span style="box-sizing: border-box;padding-right: 0.1px"><span style="box-sizing: border-box"></span></span><br></br><span style="box-sizing: border-box;padding-right: 0.1px"><span style="box-sizing: border-box;color: rgb(119, 0, 136)">class</span> <span style="box-sizing: border-box;color: rgb(0, 0, 255)">WebSockerServ</span></span><br></br><span style="box-sizing: border-box;padding-right: 0.1px">{</span><br></br><span style="box-sizing: border-box;padding-right: 0.1px">    <span style="box-sizing: border-box;color: rgb(119, 0, 136)">private</span> <span style="box-sizing: border-box;color: rgb(0, 85, 170)">$serv</span>;</span><br></br><span style="box-sizing: border-box;padding-right: 0.1px"><span style="box-sizing: border-box"></span></span><br></br><span style="box-sizing: border-box;padding-right: 0.1px">    <span style="box-sizing: border-box;color: rgb(119, 0, 136)">public</span> <span style="box-sizing: border-box;color: rgb(119, 0, 136)">function</span> <span style="box-sizing: border-box;color: rgb(0, 0, 255)">__construct</span>()</span><br></br><span style="box-sizing: border-box;padding-right: 0.1px">    {   </span><br></br><span style="box-sizing: border-box;padding-right: 0.1px">        <span style="box-sizing: border-box;color: rgb(0, 85, 170)">$this</span><span style="box-sizing: border-box;color: rgb(152, 26, 26)">-></span><span style="box-sizing: border-box;color: rgb(0, 0, 0)">serv</span> <span style="box-sizing: border-box;color: rgb(152, 26, 26)">=</span> <span style="box-sizing: border-box;color: rgb(119, 0, 136)">new</span> <span style="box-sizing: border-box;color: rgb(0, 0, 0)">Swoole\WebSocket\Server</span>(<span style="box-sizing: border-box;color: rgb(170, 17, 17)">"192.168.172.130"</span>, <span style="box-sizing: border-box;color: rgb(17, 102, 68)">9506</span>);</span><br></br><span style="box-sizing: border-box;padding-right: 0.1px">     </span><br></br><span style="box-sizing: border-box;padding-right: 0.1px">         <span style="box-sizing: border-box;color: rgb(0, 85, 170)">$this</span><span style="box-sizing: border-box;color: rgb(152, 26, 26)">-></span><span style="box-sizing: border-box;color: rgb(0, 0, 0)">serv</span><span style="box-sizing: border-box;color: rgb(152, 26, 26)">-></span><span style="box-sizing: border-box;color: rgb(0, 0, 0)">set</span>([</span><br></br><span style="box-sizing: border-box;padding-right: 0.1px">   <span style="box-sizing: border-box;color: rgb(170, 17, 17)">'worker_num'</span>      <span style="box-sizing: border-box;color: rgb(152, 26, 26)">=></span> <span style="box-sizing: border-box;color: rgb(17, 102, 68)">2</span>, <span style="box-sizing: border-box;color: rgb(170, 85, 0)">//开启2个worker进程</span></span><br></br><span style="box-sizing: border-box;padding-right: 0.1px">   <span style="box-sizing: border-box;color: rgb(170, 17, 17)">'max_request'</span>     <span style="box-sizing: border-box;color: rgb(152, 26, 26)">=></span> <span style="box-sizing: border-box;color: rgb(17, 102, 68)">4</span>, <span style="box-sizing: border-box;color: rgb(170, 85, 0)">//每个worker进程 max_request设置为4次</span></span><br></br><span style="box-sizing: border-box;padding-right: 0.1px">   <span style="box-sizing: border-box;color: rgb(170, 17, 17)">'task_worker_num'</span> <span style="box-sizing: border-box;color: rgb(152, 26, 26)">=></span> <span style="box-sizing: border-box;color: rgb(17, 102, 68)">4</span>, <span style="box-sizing: border-box;color: rgb(170, 85, 0)">//开启4个task进程</span></span><br></br><span style="box-sizing: border-box;padding-right: 0.1px">   <span style="box-sizing: border-box;color: rgb(170, 17, 17)">'dispatch_mode'</span>   <span style="box-sizing: border-box;color: rgb(152, 26, 26)">=></span> <span style="box-sizing: border-box;color: rgb(17, 102, 68)">4</span>, <span style="box-sizing: border-box;color: rgb(170, 85, 0)">//数据包分发策略 - IP分配</span></span><br></br><span style="box-sizing: border-box;padding-right: 0.1px">   <span style="box-sizing: border-box;color: rgb(170, 17, 17)">'daemonize'</span>       <span style="box-sizing: border-box;color: rgb(152, 26, 26)">=></span> <span style="box-sizing: border-box;color: rgb(34, 17, 153)">false</span>, <span style="box-sizing: border-box;color: rgb(170, 85, 0)">//守护进程(true/false)</span></span><br></br><span style="box-sizing: border-box;padding-right: 0.1px">         ]);</span><br></br><span style="box-sizing: border-box;padding-right: 0.1px">        </span><br></br><span style="box-sizing: border-box;padding-right: 0.1px">        <span style="box-sizing: border-box;color: rgb(0, 85, 170)">$this</span><span style="box-sizing: border-box;color: rgb(152, 26, 26)">-></span><span style="box-sizing: border-box;color: rgb(0, 0, 0)">serv</span><span style="box-sizing: border-box;color: rgb(152, 26, 26)">-></span><span style="box-sizing: border-box;color: rgb(0, 0, 0)">on</span>(<span style="box-sizing: border-box;color: rgb(170, 17, 17)">'Start'</span>, [<span style="box-sizing: border-box;color: rgb(0, 85, 170)">$this</span>, <span style="box-sizing: border-box;color: rgb(170, 17, 17)">'onStart'</span>]);</span><br></br><span style="box-sizing: border-box;padding-right: 0.1px">        <span style="box-sizing: border-box;color: rgb(0, 85, 170)">$this</span><span style="box-sizing: border-box;color: rgb(152, 26, 26)">-></span><span style="box-sizing: border-box;color: rgb(0, 0, 0)">serv</span><span style="box-sizing: border-box;color: rgb(152, 26, 26)">-></span><span style="box-sizing: border-box;color: rgb(0, 0, 0)">on</span>(<span style="box-sizing: border-box;color: rgb(170, 17, 17)">'Open'</span>, [<span style="box-sizing: border-box;color: rgb(0, 85, 170)">$this</span>, <span style="box-sizing: border-box;color: rgb(170, 17, 17)">'onOpen'</span>]);</span><br></br><span style="box-sizing: border-box;padding-right: 0.1px">        <span style="box-sizing: border-box;color: rgb(0, 85, 170)">$this</span><span style="box-sizing: border-box;color: rgb(152, 26, 26)">-></span><span style="box-sizing: border-box;color: rgb(0, 0, 0)">serv</span><span style="box-sizing: border-box;color: rgb(152, 26, 26)">-></span><span style="box-sizing: border-box;color: rgb(0, 0, 0)">on</span>(<span style="box-sizing: border-box;color: rgb(170, 17, 17)">"Message"</span>, [<span style="box-sizing: border-box;color: rgb(0, 85, 170)">$this</span>, <span style="box-sizing: border-box;color: rgb(170, 17, 17)">'onMessage'</span>]);</span><br></br><span style="box-sizing: border-box;padding-right: 0.1px">        <span style="box-sizing: border-box;color: rgb(0, 85, 170)">$this</span><span style="box-sizing: border-box;color: rgb(152, 26, 26)">-></span><span style="box-sizing: border-box;color: rgb(0, 0, 0)">serv</span><span style="box-sizing: border-box;color: rgb(152, 26, 26)">-></span><span style="box-sizing: border-box;color: rgb(0, 0, 0)">on</span>(<span style="box-sizing: border-box;color: rgb(170, 17, 17)">"Close"</span>, [<span style="box-sizing: border-box;color: rgb(0, 85, 170)">$this</span>, <span style="box-sizing: border-box;color: rgb(170, 17, 17)">'onClose'</span>]);</span><br></br><span style="box-sizing: border-box;padding-right: 0.1px">        <span style="box-sizing: border-box;color: rgb(0, 85, 170)">$this</span><span style="box-sizing: border-box;color: rgb(152, 26, 26)">-></span><span style="box-sizing: border-box;color: rgb(0, 0, 0)">serv</span><span style="box-sizing: border-box;color: rgb(152, 26, 26)">-></span><span style="box-sizing: border-box;color: rgb(0, 0, 0)">on</span>(<span style="box-sizing: border-box;color: rgb(170, 17, 17)">"Task"</span>, [<span style="box-sizing: border-box;color: rgb(0, 85, 170)">$this</span>, <span style="box-sizing: border-box;color: rgb(170, 17, 17)">'onTask'</span>]);</span><br></br><span style="box-sizing: border-box;padding-right: 0.1px">        <span style="box-sizing: border-box;color: rgb(0, 85, 170)">$this</span><span style="box-sizing: border-box;color: rgb(152, 26, 26)">-></span><span style="box-sizing: border-box;color: rgb(0, 0, 0)">serv</span><span style="box-sizing: border-box;color: rgb(152, 26, 26)">-></span><span style="box-sizing: border-box;color: rgb(0, 0, 0)">on</span>(<span style="box-sizing: border-box;color: rgb(170, 17, 17)">"Finish"</span>, [<span style="box-sizing: border-box;color: rgb(0, 85, 170)">$this</span>, <span style="box-sizing: border-box;color: rgb(170, 17, 17)">'onFinish'</span>]);</span><br></br><span style="box-sizing: border-box;padding-right: 0.1px">        </span><br></br><span style="box-sizing: border-box;padding-right: 0.1px">        <span style="box-sizing: border-box;color: rgb(0, 85, 170)">$this</span><span style="box-sizing: border-box;color: rgb(152, 26, 26)">-></span><span style="box-sizing: border-box;color: rgb(0, 0, 0)">serv</span><span style="box-sizing: border-box;color: rgb(152, 26, 26)">-></span><span style="box-sizing: border-box;color: rgb(0, 0, 0)">start</span>();</span><br></br><span style="box-sizing: border-box;padding-right: 0.1px">    }</span><br></br><span style="box-sizing: border-box;padding-right: 0.1px"><span style="box-sizing: border-box"></span></span><br></br><span style="box-sizing: border-box;padding-right: 0.1px">    <span style="box-sizing: border-box;color: rgb(170, 85, 0)">// 启动进程</span></span><br></br><span style="box-sizing: border-box;padding-right: 0.1px">    <span style="box-sizing: border-box;color: rgb(119, 0, 136)">public</span> <span style="box-sizing: border-box;color: rgb(119, 0, 136)">function</span> <span style="box-sizing: border-box;color: rgb(0, 0, 255)">onStart</span>(<span style="box-sizing: border-box;color: rgb(0, 85, 170)">$serv</span>)</span><br></br><span style="box-sizing: border-box;padding-right: 0.1px">    {</span><br></br><span style="box-sizing: border-box;padding-right: 0.1px">        <span style="box-sizing: border-box;color: rgb(119, 0, 136)">echo</span> <span style="box-sizing: border-box;color: rgb(170, 17, 17)">"onStart SWOOLE "</span>.<span style="box-sizing: border-box;color: rgb(0, 0, 0)">SWOOLE_VERSION</span> . <span style="box-sizing: border-box;color: rgb(170, 17, 17)">"</span> <span style="box-sizing: border-box;color: rgb(170, 17, 17)">服务已启动"</span>.<span style="box-sizing: border-box;color: rgb(0, 0, 0)">PHP_EOL</span>;</span><br></br><span style="box-sizing: border-box;padding-right: 0.1px">    }</span><br></br><span style="box-sizing: border-box;padding-right: 0.1px"><span style="box-sizing: border-box"></span></span><br></br><span style="box-sizing: border-box;padding-right: 0.1px">    <span style="box-sizing: border-box;color: rgb(170, 85, 0)">// 连接</span></span><br></br><span style="box-sizing: border-box;padding-right: 0.1px">    <span style="box-sizing: border-box;color: rgb(119, 0, 136)">public</span> <span style="box-sizing: border-box;color: rgb(119, 0, 136)">function</span> <span style="box-sizing: border-box;color: rgb(0, 0, 255)">onOpen</span>(<span style="box-sizing: border-box;color: rgb(0, 85, 170)">$serv</span>, <span style="box-sizing: border-box;color: rgb(0, 85, 170)">$request</span>) {</span><br></br><span style="box-sizing: border-box;padding-right: 0.1px">        <span style="box-sizing: border-box;color: rgb(119, 0, 136)">echo</span> <span style="box-sizing: border-box;color: rgb(170, 17, 17)">"onOpen...客户端..."</span> . <span style="box-sizing: border-box;color: rgb(0, 85, 170)">$request</span><span style="box-sizing: border-box;color: rgb(152, 26, 26)">-></span><span style="box-sizing: border-box;color: rgb(0, 0, 0)">fd</span> . <span style="box-sizing: border-box;color: rgb(170, 17, 17)">' 连接成功...'</span>.<span style="box-sizing: border-box;color: rgb(0, 0, 0)">PHP_EOL</span>;</span><br></br><span style="box-sizing: border-box;padding-right: 0.1px"><span style="box-sizing: border-box"></span></span><br></br><span style="box-sizing: border-box;padding-right: 0.1px">        <span style="box-sizing: border-box;color: rgb(170, 85, 0)">// 投递异步任务</span></span><br></br><span style="box-sizing: border-box;padding-right: 0.1px">        <span style="box-sizing: border-box;color: rgb(0, 85, 170)">$serv</span><span style="box-sizing: border-box;color: rgb(152, 26, 26)">-></span><span style="box-sizing: border-box;color: rgb(0, 0, 0)">task</span>([</span><br></br><span style="box-sizing: border-box;padding-right: 0.1px">            <span style="box-sizing: border-box;color: rgb(170, 17, 17)">'type'</span> <span style="box-sizing: border-box;color: rgb(152, 26, 26)">=></span> <span style="box-sizing: border-box;color: rgb(170, 17, 17)">'login'</span></span><br></br><span style="box-sizing: border-box;padding-right: 0.1px">        ]);</span><br></br><span style="box-sizing: border-box;padding-right: 0.1px">    }</span><br></br><span style="box-sizing: border-box;padding-right: 0.1px"><span style="box-sizing: border-box"></span></span><br></br><span style="box-sizing: border-box;padding-right: 0.1px">    <span style="box-sizing: border-box;color: rgb(170, 85, 0)">// 异步任务</span></span><br></br><span style="box-sizing: border-box;padding-right: 0.1px">    <span style="box-sizing: border-box;color: rgb(119, 0, 136)">public</span> <span style="box-sizing: border-box;color: rgb(119, 0, 136)">function</span> <span style="box-sizing: border-box;color: rgb(0, 0, 255)">onTask</span>(<span style="box-sizing: border-box;color: rgb(0, 85, 170)">$serv</span>, <span style="box-sizing: border-box;color: rgb(0, 85, 170)">$task_id</span>, <span style="box-sizing: border-box;color: rgb(0, 85, 170)">$from_id</span>, <span style="box-sizing: border-box;color: rgb(0, 85, 170)">$data</span>) {</span><br></br><span style="box-sizing: border-box;padding-right: 0.1px">        <span style="box-sizing: border-box;color: rgb(119, 0, 136)">echo</span> <span style="box-sizing: border-box;color: rgb(170, 17, 17)">"#### onTask ####"</span>.<span style="box-sizing: border-box;color: rgb(0, 0, 0)">PHP_EOL</span>;</span><br></br><span style="box-sizing: border-box;padding-right: 0.1px">        <span style="box-sizing: border-box;color: rgb(119, 0, 136)">echo</span> <span style="box-sizing: border-box;color: rgb(170, 17, 17)">"#</span>{<span style="box-sizing: border-box;color: rgb(0, 85, 170)">$serv</span><span style="box-sizing: border-box;color: rgb(152, 26, 26)">-></span><span style="box-sizing: border-box;color: rgb(0, 0, 0)">worker_id</span>} <span style="box-sizing: border-box;color: rgb(170, 17, 17)">onTask: [PID=</span>{<span style="box-sizing: border-box;color: rgb(0, 85, 170)">$serv</span><span style="box-sizing: border-box;color: rgb(152, 26, 26)">-></span><span style="box-sizing: border-box;color: rgb(0, 0, 0)">worker_pid</span>}<span style="box-sizing: border-box;color: rgb(170, 17, 17)">]: task_id=</span>{<span style="box-sizing: border-box;color: rgb(0, 85, 170)">$task_id</span>}<span style="box-sizing: border-box;color: rgb(170, 17, 17)">"</span>.<span style="box-sizing: border-box;color: rgb(0, 0, 0)">PHP_EOL</span>;</span><br></br><span style="box-sizing: border-box;padding-right: 0.1px">        <span style="box-sizing: border-box;color: rgb(0, 85, 170)">$msg</span> <span style="box-sizing: border-box;color: rgb(152, 26, 26)">=</span> <span style="box-sizing: border-box;color: rgb(170, 17, 17)">''</span>;</span><br></br><span style="box-sizing: border-box;padding-right: 0.1px">        <span style="box-sizing: border-box;color: rgb(119, 0, 136)">switch</span> (<span style="box-sizing: border-box;color: rgb(0, 85, 170)">$data</span>[<span style="box-sizing: border-box;color: rgb(170, 17, 17)">'type'</span>]) {</span><br></br><span style="box-sizing: border-box;padding-right: 0.1px">            <span style="box-sizing: border-box;color: rgb(119, 0, 136)">case</span> <span style="box-sizing: border-box;color: rgb(170, 17, 17)">'login'</span>:</span><br></br><span style="box-sizing: border-box;padding-right: 0.1px">                <span style="box-sizing: border-box;color: rgb(0, 85, 170)">$msg</span> <span style="box-sizing: border-box;color: rgb(152, 26, 26)">=</span> <span style="box-sizing: border-box;color: rgb(170, 17, 17)">'自如初...'</span>;</span><br></br><span style="box-sizing: border-box;padding-right: 0.1px">                <span style="box-sizing: border-box;color: rgb(119, 0, 136)">break</span>;</span><br></br><span style="box-sizing: border-box;padding-right: 0.1px">            <span style="box-sizing: border-box;color: rgb(119, 0, 136)">case</span> <span style="box-sizing: border-box;color: rgb(170, 17, 17)">'speak'</span>:</span><br></br><span style="box-sizing: border-box;padding-right: 0.1px">                <span style="box-sizing: border-box;color: rgb(0, 85, 170)">$msg</span> <span style="box-sizing: border-box;color: rgb(152, 26, 26)">=</span> <span style="box-sizing: border-box;color: rgb(0, 85, 170)">$data</span>[<span style="box-sizing: border-box;color: rgb(170, 17, 17)">'msg'</span>];</span><br></br><span style="box-sizing: border-box;padding-right: 0.1px">                <span style="box-sizing: border-box;color: rgb(119, 0, 136)">break</span>;</span><br></br><span style="box-sizing: border-box;padding-right: 0.1px">        }</span><br></br><span style="box-sizing: border-box;padding-right: 0.1px">        <span style="box-sizing: border-box;color: rgb(170, 85, 0)">// 推送消息给客户端</span></span><br></br><span style="box-sizing: border-box;padding-right: 0.1px">        <span style="box-sizing: border-box;color: rgb(119, 0, 136)">foreach</span> (<span style="box-sizing: border-box;color: rgb(0, 85, 170)">$serv</span><span style="box-sizing: border-box;color: rgb(152, 26, 26)">-></span><span style="box-sizing: border-box;color: rgb(0, 0, 0)">connections</span> <span style="box-sizing: border-box;color: rgb(119, 0, 136)">as</span> <span style="box-sizing: border-box;color: rgb(0, 85, 170)">$fd</span>) {</span><br></br><span style="box-sizing: border-box;padding-right: 0.1px">            <span style="box-sizing: border-box;color: rgb(0, 85, 170)">$connectionInfo</span> <span style="box-sizing: border-box;color: rgb(152, 26, 26)">=</span> <span style="box-sizing: border-box;color: rgb(0, 85, 170)">$serv</span><span style="box-sizing: border-box;color: rgb(152, 26, 26)">-></span><span style="box-sizing: border-box;color: rgb(0, 0, 0)">connection_info</span>(<span style="box-sizing: border-box;color: rgb(0, 85, 170)">$fd</span>);</span><br></br><span style="box-sizing: border-box;padding-right: 0.1px">            <span style="box-sizing: border-box;color: rgb(119, 0, 136)">if</span> (<span style="box-sizing: border-box;color: rgb(0, 85, 170)">$connectionInfo</span>[<span style="box-sizing: border-box;color: rgb(170, 17, 17)">'websocket_status'</span>] <span style="box-sizing: border-box;color: rgb(152, 26, 26)">==</span> <span style="box-sizing: border-box;color: rgb(17, 102, 68)">3</span>) {</span><br></br><span style="box-sizing: border-box;padding-right: 0.1px">                <span style="box-sizing: border-box;color: rgb(0, 85, 170)">$serv</span><span style="box-sizing: border-box;color: rgb(152, 26, 26)">-></span><span style="box-sizing: border-box;color: rgb(0, 0, 0)">push</span>(<span style="box-sizing: border-box;color: rgb(0, 85, 170)">$fd</span>, <span style="box-sizing: border-box;color: rgb(0, 85, 170)">$msg</span>);</span><br></br><span style="box-sizing: border-box;padding-right: 0.1px">            }</span><br></br><span style="box-sizing: border-box;padding-right: 0.1px">        }</span><br></br><span style="box-sizing: border-box;padding-right: 0.1px">        <span style="box-sizing: border-box;color: rgb(170, 85, 0)">// 任务完成</span></span><br></br><span style="box-sizing: border-box;padding-right: 0.1px">        <span style="box-sizing: border-box;color: rgb(0, 85, 170)">$serv</span><span style="box-sizing: border-box;color: rgb(152, 26, 26)">-></span><span style="box-sizing: border-box;color: rgb(0, 0, 0)">finish</span>(<span style="box-sizing: border-box;color: rgb(0, 85, 170)">$data</span>);</span><br></br><span style="box-sizing: border-box;padding-right: 0.1px">    }</span><br></br><span style="box-sizing: border-box;padding-right: 0.1px"><span style="box-sizing: border-box"></span></span><br></br><span style="box-sizing: border-box;padding-right: 0.1px">    <span style="box-sizing: border-box;color: rgb(119, 0, 136)">public</span> <span style="box-sizing: border-box;color: rgb(119, 0, 136)">function</span> <span style="box-sizing: border-box;color: rgb(0, 0, 255)">onFinish</span>(<span style="box-sizing: border-box;color: rgb(0, 85, 170)">$serv</span>, <span style="box-sizing: border-box;color: rgb(0, 85, 170)">$task_id</span>, <span style="box-sizing: border-box;color: rgb(0, 85, 170)">$data</span>)</span><br></br><span style="box-sizing: border-box;padding-right: 0.1px">    {</span><br></br><span style="box-sizing: border-box;padding-right: 0.1px">        <span style="box-sizing: border-box;color: rgb(119, 0, 136)">echo</span> <span style="box-sizing: border-box;color: rgb(170, 17, 17)">'onFinished task '</span> . <span style="box-sizing: border-box;color: rgb(0, 85, 170)">$task_id</span> . <span style="box-sizing: border-box;color: rgb(170, 17, 17)">'已完成'</span> . <span style="box-sizing: border-box;color: rgb(0, 0, 0)">PHP_EOL</span>;</span><br></br><span style="box-sizing: border-box;padding-right: 0.1px">    }</span><br></br><span style="box-sizing: border-box;padding-right: 0.1px"><span style="box-sizing: border-box"></span></span><br></br><span style="box-sizing: border-box;padding-right: 0.1px">    <span style="box-sizing: border-box;color: rgb(170, 85, 0)">// 接收消息</span></span><br></br><span style="box-sizing: border-box;padding-right: 0.1px">    <span style="box-sizing: border-box;color: rgb(119, 0, 136)">public</span> <span style="box-sizing: border-box;color: rgb(119, 0, 136)">function</span> <span style="box-sizing: border-box;color: rgb(0, 0, 255)">onMessage</span>(<span style="box-sizing: border-box;color: rgb(0, 85, 170)">$serv</span>, <span style="box-sizing: border-box;color: rgb(0, 85, 170)">$frame</span>)</span><br></br><span style="box-sizing: border-box;padding-right: 0.1px">    {</span><br></br><span style="box-sizing: border-box;padding-right: 0.1px">        <span style="box-sizing: border-box;color: rgb(0, 85, 170)">$serv</span><span style="box-sizing: border-box;color: rgb(152, 26, 26)">-></span><span style="box-sizing: border-box;color: rgb(0, 0, 0)">task</span>([<span style="box-sizing: border-box;color: rgb(170, 17, 17)">'type'</span> <span style="box-sizing: border-box;color: rgb(152, 26, 26)">=></span> <span style="box-sizing: border-box;color: rgb(170, 17, 17)">'speak'</span>, <span style="box-sizing: border-box;color: rgb(170, 17, 17)">'msg'</span> <span style="box-sizing: border-box;color: rgb(152, 26, 26)">=></span> <span style="box-sizing: border-box;color: rgb(0, 85, 170)">$frame</span><span style="box-sizing: border-box;color: rgb(152, 26, 26)">-></span><span style="box-sizing: border-box;color: rgb(0, 0, 0)">data</span>]);</span><br></br><span style="box-sizing: border-box;padding-right: 0.1px">    }</span><br></br><span style="box-sizing: border-box;padding-right: 0.1px"><span style="box-sizing: border-box"></span></span><br></br><span style="box-sizing: border-box;padding-right: 0.1px">    <span style="box-sizing: border-box;color: rgb(119, 0, 136)">public</span> <span style="box-sizing: border-box;color: rgb(119, 0, 136)">function</span> <span style="box-sizing: border-box;color: rgb(0, 0, 255)">onClose</span>(<span style="box-sizing: border-box;color: rgb(0, 85, 170)">$serv</span>, <span style="box-sizing: border-box;color: rgb(0, 85, 170)">$fd</span>)</span><br></br><span style="box-sizing: border-box;padding-right: 0.1px">    {</span><br></br><span style="box-sizing: border-box;padding-right: 0.1px">        <span style="box-sizing: border-box;color: rgb(119, 0, 136)">echo</span> <span style="box-sizing: border-box;color: rgb(170, 17, 17)">'onClosed...'</span> . <span style="box-sizing: border-box;color: rgb(0, 85, 170)">$fd</span> . <span style="box-sizing: border-box;color: rgb(170, 17, 17)">'连接关闭'</span> . <span style="box-sizing: border-box;color: rgb(0, 0, 0)">PHP_EOL</span>;</span><br></br><span style="box-sizing: border-box;padding-right: 0.1px">    }</span><br></br><span style="box-sizing: border-box;padding-right: 0.1px">}</span><br></br><span style="box-sizing: border-box;padding-right: 0.1px"><span style="box-sizing: border-box"></span></span><br></br><span style="box-sizing: border-box;padding-right: 0.1px"><span style="box-sizing: border-box;color: rgb(0, 85, 170)">$server</span> <span style="box-sizing: border-box;color: rgb(152, 26, 26)">=</span> <span style="box-sizing: border-box;color: rgb(119, 0, 136)">new</span> <span style="box-sizing: border-box;color: rgb(0, 0, 0)">WebSockerServ</span>(); </span>

至此,弹幕完成

请登录后再评论