Laravel8基于LaravelS实现弹幕弹幕功能
前面学了基于Swoole实现视频弹幕功能，这篇文章就来实现一个基于Laravel8的视频弹幕功能。如果对webpack不熟悉，那么在安装vue-baberrage组件时可能会报错却不知如何解决。下面开始一步一步实现。
第一步：安装Laravel8
composer create-project laravel/laravel labarrage
第二步：Laravel8中使用vue
Laravel8如何使用vue，请参考 Laravel8中使用vue。
注意：安装vue时请使用 php artisan ui vue --auth
第三步：安装及安装vue-baberrage
安装vue及bootstrap
npm install
安装弹幕组件
npm install vue-baberrage --save
运行
npm run dev
如果遇到BREAKING CHANGE: webpack < 5 used to include错误，请参考 Laravel8使用webpack报错的解决方法。
后续只要文件改动就需要重新编译，后续将不再复述。
第四步：安装LaravelS实现Websocket服务器
第五步：项目中引入vue-baberrage组件
文件：resources/js/app.js 新增如下内容
<span style="box-sizing: border-box;padding-right: 0.1px"><span style="box-sizing: border-box;color: rgb(119, 0, 136)">import</span> { <span style="box-sizing: border-box;color: rgb(0, 0, 255)">vueBaberrage</span> } <span style="box-sizing: border-box;color: rgb(119, 0, 136)">from</span> <span style="box-sizing: border-box;color: rgb(170, 17, 17)">'vue-baberrage'</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)">Vue</span>.<span style="box-sizing: border-box;color: rgb(0, 0, 0)">use</span>(<span style="box-sizing: border-box;color: rgb(0, 0, 0)">vueBaberrage</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"></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)">Vue</span>.<span style="box-sizing: border-box;color: rgb(0, 0, 0)">component</span>(<span style="box-sizing: border-box;color: rgb(170, 17, 17)">'danmu-component'</span>, <span style="box-sizing: border-box;color: rgb(0, 0, 0)">require</span>(<span style="box-sizing: border-box;color: rgb(170, 17, 17)">'./components/DanmuComponent.vue'</span>).<span style="box-sizing: border-box;color: rgb(0, 0, 0)">default</span>);</span>
第五步：编写文弹幕组件
后续实现代码根据 学院君 文章改动
位置：resources/js/components/DanmuComponent.vue
<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)">template</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)">id</span>=<span style="box-sizing: border-box;color: rgb(170, 17, 17)">"danmu"</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)">"stage"</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)">vue-baberrage</span></span><br></br><span style="box-sizing: border-box;padding-right: 0.1px"> <span style="box-sizing: border-box;color: rgb(0, 0, 204)">:isShow</span> = <span style="box-sizing: border-box;color: rgb(170, 17, 17)">"barrageIsShow"</span></span><br></br><span style="box-sizing: border-box;padding-right: 0.1px"> <span style="box-sizing: border-box;color: rgb(0, 0, 204)">:barrageList</span> = <span style="box-sizing: border-box;color: rgb(170, 17, 17)">"barrageList"</span></span><br></br><span style="box-sizing: border-box;padding-right: 0.1px"> <span style="box-sizing: border-box;color: rgb(0, 0, 204)">:loop</span> = <span style="box-sizing: border-box;color: rgb(170, 17, 17)">"barrageLoop"</span></span><br></br><span style="box-sizing: border-box;padding-right: 0.1px"> <span style="box-sizing: border-box;color: rgb(0, 0, 204)">:maxWordCount</span> = <span style="box-sizing: border-box;color: rgb(170, 17, 17)">"60"</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><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)">vue-baberrage</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 style="box-sizing: border-box;color: rgb(0, 0, 204)">class</span>=<span style="box-sizing: border-box;color: rgb(170, 17, 17)">"danmu-control"</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)">select</span> <span style="box-sizing: border-box;color: rgb(0, 0, 204)">v-model</span>=<span style="box-sizing: border-box;color: rgb(170, 17, 17)">"position"</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)">option</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)">"top"</span><span class="cm-tag cm-bracket" style="box-sizing: border-box;color: rgb(17, 119, 0)">></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)">option</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)">option</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)">"abc"</span><span class="cm-tag cm-bracket" style="box-sizing: border-box;color: rgb(17, 119, 0)">></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)">option</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)">select</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)">style</span>=<span style="box-sizing: border-box;color: rgb(170, 17, 17)">"float:left"</span> <span style="box-sizing: border-box;color: rgb(0, 0, 204)">v-model</span>=<span style="box-sizing: border-box;color: rgb(170, 17, 17)">"msg"</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)">button</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)">style</span>=<span style="box-sizing: border-box;color: rgb(170, 17, 17)">"float:left"</span> <span style="box-sizing: border-box;color: rgb(0, 0, 204)">@click</span>=<span style="box-sizing: border-box;color: rgb(170, 17, 17)">"addToList"</span><span class="cm-tag cm-bracket" style="box-sizing: border-box;color: rgb(17, 119, 0)">></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)">button</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 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)">template</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(119, 0, 136)">import</span> { <span style="box-sizing: border-box;color: rgb(0, 0, 255)">MESSAGE_TYPE</span> } <span style="box-sizing: border-box;color: rgb(119, 0, 136)">from</span> <span style="box-sizing: border-box;color: rgb(170, 17, 17)">'vue-baberrage'</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)">export</span> <span style="box-sizing: border-box;color: rgb(119, 0, 136)">default</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)">name</span>: <span style="box-sizing: border-box;color: rgb(170, 17, 17)">'danmu'</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><br></br><span style="box-sizing: border-box;padding-right: 0.1px"> <span style="box-sizing: border-box;color: rgb(119, 0, 136)">return</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(170, 17, 17)">'hello 自如初！'</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(170, 17, 17)">'top'</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)">barrageIsShow</span>: <span style="box-sizing: border-box;color: rgb(34, 17, 153)">true</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)">currentId</span>: <span style="box-sizing: border-box;color: rgb(17, 102, 68)">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)">barrageLoop</span>: <span style="box-sizing: border-box;color: rgb(34, 17, 153)">false</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)">barrageList</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, 0, 0)">methods</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)">removeList</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)">this</span>.<span style="box-sizing: border-box;color: rgb(0, 0, 0)">barrageList</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><br></br><span style="box-sizing: border-box;padding-right: 0.1px"> <span style="box-sizing: border-box;color: rgb(0, 0, 0)">addToList</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(119, 0, 136)">this</span>.<span style="box-sizing: border-box;color: rgb(0, 0, 0)">position</span> <span style="box-sizing: border-box;color: rgb(152, 26, 26)">===</span> <span style="box-sizing: border-box;color: rgb(170, 17, 17)">'top'</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)">this</span>.<span style="box-sizing: border-box;color: rgb(0, 0, 0)">barrageList</span>.<span style="box-sizing: border-box;color: rgb(0, 0, 0)">push</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)">id</span>: <span style="box-sizing: border-box;color: rgb(152, 26, 26)">++</span><span style="box-sizing: border-box;color: rgb(119, 0, 136)">this</span>.<span style="box-sizing: border-box;color: rgb(0, 0, 0)">currentId</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(119, 0, 136)">this</span>.<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(119, 0, 136)">this</span>.<span style="box-sizing: border-box;color: rgb(0, 0, 0)">currentId</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)">barrageStyle</span>: <span style="box-sizing: border-box;color: rgb(170, 17, 17)">'top'</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(17, 102, 68)">8</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)">type</span>: <span style="box-sizing: border-box;color: rgb(0, 0, 0)">MESSAGE_TYPE</span>.<span style="box-sizing: border-box;color: rgb(0, 0, 0)">FROM_TOP</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(170, 17, 17)">'top'</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)">else</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)">this</span>.<span style="box-sizing: border-box;color: rgb(0, 0, 0)">barrageList</span>.<span style="box-sizing: border-box;color: rgb(0, 0, 0)">push</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)">id</span>: <span style="box-sizing: border-box;color: rgb(152, 26, 26)">++</span><span style="box-sizing: border-box;color: rgb(119, 0, 136)">this</span>.<span style="box-sizing: border-box;color: rgb(0, 0, 0)">currentId</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(119, 0, 136)">this</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(0, 0, 0)">time</span>: <span style="box-sizing: border-box;color: rgb(17, 102, 68)">15</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)">type</span>: <span style="box-sizing: border-box;color: rgb(0, 0, 0)">MESSAGE_TYPE</span>.<span style="box-sizing: border-box;color: rgb(0, 0, 0)">NORMAL</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><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)">style</span> <span style="box-sizing: border-box;color: rgb(0, 0, 204)">lang</span>=<span style="box-sizing: border-box;color: rgb(170, 17, 17)">"scss"</span> <span style="box-sizing: border-box;color: rgb(0, 0, 204)">scoped</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(51, 0, 170)">#danmu</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)">text-align</span>: <span style="box-sizing: border-box;color: rgb(34, 17, 153)">center</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)">#2c3e50</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)">.stage</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)">300px</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)">100%</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(34, 17, 153)">#025d63</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><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)">relative</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)">overflow</span>: <span style="box-sizing: border-box;color: rgb(34, 17, 153)">hidden</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(17, 119, 0)">h1</span>, <span style="box-sizing: border-box;color: rgb(17, 119, 0)">h2</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-weight</span>: <span style="box-sizing: border-box;color: rgb(34, 17, 153)">normal</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(17, 119, 0)">ul</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)">list-style-type</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)">padding</span>: <span style="box-sizing: border-box;color: rgb(17, 102, 68)">0</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(17, 119, 0)">li</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)">margin</span>: <span style="box-sizing: border-box;color: rgb(17, 102, 68)">0</span> <span style="box-sizing: border-box;color: rgb(17, 102, 68)">10px</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(17, 119, 0)">a</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)">#42b983</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(85, 85, 85)">.baberrage-stage</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)">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 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(85, 85, 85)">.baberrage-stage</span> <span style="box-sizing: border-box;color: rgb(85, 85, 85)">.baberrage-item.normal</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)">#FFF</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)">.top</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(34, 17, 153)">#66aabb</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)">.danmu-control</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)">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 style="box-sizing: border-box;color: rgb(0, 0, 0)">width</span>: <span style="box-sizing: border-box;color: rgb(17, 102, 68)">100%</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)">bottom</span>: <span style="box-sizing: border-box;color: rgb(17, 102, 68)">300px</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)">top</span>: <span style="box-sizing: border-box;color: rgb(17, 102, 68)">70%</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)">69px</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)">box-sizing</span>: <span style="box-sizing: border-box;color: rgb(34, 17, 153)">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)">text-align</span>: <span style="box-sizing: border-box;color: rgb(34, 17, 153)">center</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)">justify-content</span>: <span style="box-sizing: border-box;color: rgb(34, 17, 153)">center</span>;</span><br></br><span style="box-sizing: border-box;padding-right: 0.1px"> <span class="cm-property cm-error" style="box-sizing: border-box;color: rgb(0, 0, 0)">div</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)">300px</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(34, 17, 153)">rgba</span>(<span style="box-sizing: border-box;color: rgb(17, 102, 68)">0</span>, <span style="box-sizing: border-box;color: rgb(17, 102, 68)">0</span>, <span style="box-sizing: border-box;color: rgb(17, 102, 68)">0</span>, <span style="box-sizing: border-box;color: rgb(17, 102, 68)">0.6</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)">15px</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)">border</span>: <span style="box-sizing: border-box;color: rgb(17, 102, 68)">2px</span> <span style="box-sizing: border-box;color: rgb(34, 17, 153)">solid</span> <span style="box-sizing: border-box;color: rgb(34, 17, 153)">#8ad9ff</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-property cm-error" style="box-sizing: border-box;color: rgb(0, 0, 0)">input</span>,<span class="cm-property cm-error" style="box-sizing: border-box;color: rgb(0, 0, 0)">button</span>,<span class="cm-property cm-error" style="box-sizing: border-box;color: rgb(0, 0, 0)">select</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)">35px</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)">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)">float</span>:<span style="box-sizing: border-box;color: rgb(34, 17, 153)">left</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(34, 17, 153)">#027fbb</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(34, 17, 153)">#CCC</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)">#FFF</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)">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)">width</span>:<span style="box-sizing: border-box;color: rgb(17, 102, 68)">18%</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)">box-sizing</span>: <span style="box-sizing: border-box;color: rgb(34, 17, 153)">border-box</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-property cm-error" style="box-sizing: border-box;color: rgb(0, 0, 0)">select</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)">33px</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-top</span>:<span style="box-sizing: border-box;color: rgb(17, 102, 68)">1px</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)">0px</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)">outline</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(34, 17, 153)">rgb</span>(<span style="box-sizing: border-box;color: rgb(17, 102, 68)">204</span>,<span style="box-sizing: border-box;color: rgb(17, 102, 68)">204</span>,<span style="box-sizing: border-box;color: rgb(17, 102, 68)">204</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-property cm-error" style="box-sizing: border-box;color: rgb(0, 0, 0)">input</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)">64%</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)">35px</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(34, 17, 153)">rgba</span>(<span style="box-sizing: border-box;color: rgb(17, 102, 68)">0</span>,<span style="box-sizing: border-box;color: rgb(17, 102, 68)">0</span>,<span style="box-sizing: border-box;color: rgb(17, 102, 68)">0</span>,<span style="box-sizing: border-box;color: rgb(17, 102, 68)">.7</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(34, 17, 153)">#8ad9ff</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-left</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)">#FFF</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)">style</span><span class="cm-tag cm-bracket" style="box-sizing: border-box;color: rgb(17, 119, 0)">></span></span>
第六步：视图中使用组件
位置：resources/views/danmu.blade.php
<span style="box-sizing: border-box;padding-right: 0.1px"><span style="box-sizing: border-box;color: rgb(0, 0, 0)">@extends</span>(<span style="box-sizing: border-box;color: rgb(170, 17, 17)">'layouts.app'</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(0, 0, 0)">@section</span>(<span style="box-sizing: border-box;color: rgb(170, 17, 17)">'content'</span>)</span><br></br><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)">danmu</span><span style="box-sizing: border-box;color: rgb(152, 26, 26)">-</span><span style="box-sizing: border-box;color: rgb(0, 0, 0)">component</span><span style="box-sizing: border-box;color: rgb(152, 26, 26)">></</span><span style="box-sizing: border-box;color: rgb(0, 0, 0)">danmu</span><span style="box-sizing: border-box;color: rgb(152, 26, 26)">-</span><span style="box-sizing: border-box;color: rgb(0, 0, 0)">component</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;color: rgb(0, 0, 0)">@endsection</span></span>
第七步：注册路由
<span style="box-sizing: border-box;padding-right: 0.1px"><span style="box-sizing: border-box;color: rgb(0, 0, 0)">Route</span>::<span style="box-sizing: border-box;color: rgb(0, 0, 0)">get</span>(<span style="box-sizing: border-box;color: rgb(170, 17, 17)">'/danmu'</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)">return</span> <span style="box-sizing: border-box;color: rgb(0, 0, 0)">view</span>(<span style="box-sizing: border-box;color: rgb(170, 17, 17)">'danmu'</span>);</span><br></br><span style="box-sizing: border-box;padding-right: 0.1px">});</span>
执行 npm run dev
第八步：编写websocket服务器
文件：App\Handlers\WebSocketHandler.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;color: rgb(119, 0, 136)">namespace</span> <span style="box-sizing: border-box;color: rgb(0, 0, 255)">App\Handlers</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)">use</span> <span style="box-sizing: border-box;color: rgb(0, 0, 0)">Hhxsv5\LaravelS\Swoole\WebSocketHandlerInterface</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)">use</span> <span style="box-sizing: border-box;color: rgb(0, 0, 0)">Illuminate\Support\Facades\Log</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)">use</span> <span style="box-sizing: border-box;color: rgb(0, 0, 0)">Swoole\Http\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)">use</span> <span style="box-sizing: border-box;color: rgb(0, 0, 0)">Swoole\WebSocket\Frame</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)">use</span> <span style="box-sizing: border-box;color: rgb(0, 0, 0)">Swoole\WebSocket\Server</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)">WebSocketHandler</span> <span style="box-sizing: border-box;color: rgb(119, 0, 136)">implements</span> <span style="box-sizing: border-box;color: rgb(0, 0, 0)">WebSocketHandlerInterface</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)">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><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, 0, 0)">Server</span> <span style="box-sizing: border-box;color: rgb(0, 85, 170)">$server</span>, <span style="box-sizing: border-box;color: rgb(0, 0, 0)">Request</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><br></br><span style="box-sizing: border-box;padding-right: 0.1px"> <span style="box-sizing: border-box;color: rgb(0, 0, 0)">Log</span>::<span style="box-sizing: border-box;color: rgb(0, 0, 0)">info</span>(<span style="box-sizing: border-box;color: rgb(170, 17, 17)">'WebSocket 连接建立:'</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><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, 0, 0)">Server</span> <span style="box-sizing: border-box;color: rgb(0, 85, 170)">$server</span>, <span style="box-sizing: border-box;color: rgb(0, 0, 0)">Frame</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(170, 85, 0)">// $frame->fd 是客户端 id，$frame->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)">Log</span>::<span style="box-sizing: border-box;color: rgb(0, 0, 0)">info</span>(<span style="box-sizing: border-box;color: rgb(170, 17, 17)">"从 </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)">fd</span>} <span style="box-sizing: border-box;color: rgb(170, 17, 17)">接收到的数据: </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 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)">foreach</span>(<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(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(119, 0, 136)">if</span> (<span style="box-sizing: border-box;color: rgb(152, 26, 26)">!</span><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(0, 0, 0)">isEstablished</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(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)">continue</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)">$server</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)">$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 style="box-sizing: border-box;color: rgb(170, 85, 0)">// 服务端通过 push 方法向所有连接的客户端发送数据</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)">onClose</span>(<span style="box-sizing: border-box;color: rgb(0, 0, 0)">Server</span> <span style="box-sizing: border-box;color: rgb(0, 85, 170)">$server</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)">$reactorId</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, 0, 0)">Log</span>::<span style="box-sizing: border-box;color: rgb(0, 0, 0)">info</span>(<span style="box-sizing: border-box;color: rgb(170, 17, 17)">'WebSocket 连接关闭:'</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>
第九步：laravels.php注册
文件：config/laravels.php
<span style="box-sizing: border-box;padding-right: 0.1px"><span style="box-sizing: border-box;color: rgb(170, 17, 17)">'websocket'</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;color: rgb(170, 17, 17)">'enable'</span> <span style="box-sizing: border-box;color: rgb(152, 26, 26)">=></span> <span style="box-sizing: border-box;color: rgb(34, 17, 153)">true</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)">'handler'</span> <span style="box-sizing: border-box;color: rgb(152, 26, 26)">=></span> <span style="box-sizing: border-box;color: rgb(0, 0, 0)">\App\Handlers\WebSocketHandler</span>::<span style="box-sizing: border-box;color: rgb(119, 0, 136)">class</span>,</span><br></br><span style="box-sizing: border-box;padding-right: 0.1px">],</span>
第十步：启动
php bin/laravels start
这样就完成啦
请登录后再评论