Artikel ini membawakan anda pengetahuan yang berkaitan tentang Laravel8/LaravelS terutamanya memperkenalkan kaedah dan langkah untuk Laravel8 untuk melaksanakan fungsi rentak berdasarkan LaravelS yang berminat, sila lihat di bawah membantu anda. Semua orang membantu.
Laravel8 melaksanakan fungsi baraj berdasarkan LaravelS
Pengenalan
Laravel8 melaksanakan fungsi barraj berdasarkan LaravelS. Sebelum ini, saya mempelajari cara melaksanakan fungsi rentetan video berdasarkan Swoole Artikel ini akan melaksanakan fungsi rentetan video berdasarkan Laravel8. Jika anda tidak biasa dengan webpack, anda mungkin mendapat ralat semasa memasang komponen vue-baberrage tetapi tidak tahu cara menyelesaikannya. Mari kita mula melaksanakannya langkah demi langkah.
Saya telah mempelajari cara melaksanakan fungsi rentetan video berdasarkan Swoole Artikel ini akan melaksanakan fungsi rentetan video berdasarkan Laravel8. Jika anda tidak biasa dengan webpack, anda mungkin mendapat ralat semasa memasang komponen vue-baberrage tetapi tidak tahu cara menyelesaikannya. Mari kita mula melaksanakannya langkah demi langkah.
Langkah 1: Pasang Laravel8
composer create-project laravel/laravel labarrage
Langkah 2: Gunakan vue dalam Laravel8
Cara menggunakan vue dalam Laravel8, sila rujuk Menggunakan vue dalam Laravel8.
Nota: Apabila memasang vue, sila gunakan php artisan ui vue --auth
Langkah 3: Pasang dan Pasang vue-baberrage
Pasang vue dan 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/><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/><span style="box-sizing: border-box;padding-right: 0.1px"><span style="box-sizing: border-box"></span></span><br/><span style="box-sizing: border-box;padding-right: 0.1px"><span style="box-sizing: border-box"></span></span><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/><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/><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/><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/><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/><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/><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/><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/><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/><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/><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/><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/><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/><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/><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/><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/><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/><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/><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/><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/><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/><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/><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/><span style="box-sizing: border-box;padding-right: 0.1px"><span style="box-sizing: border-box"></span></span><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/><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/><span style="box-sizing: border-box;padding-right: 0.1px"><span style="box-sizing: border-box"></span></span><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/><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/><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/><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/><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/><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/><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/><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/><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/><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/><span style="box-sizing: border-box;padding-right: 0.1px"> }</span><br/><span style="box-sizing: border-box;padding-right: 0.1px"> },</span><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/><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/><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/><span style="box-sizing: border-box;padding-right: 0.1px"> },</span><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/><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/><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/><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/><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/><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/><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/><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/><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/><span style="box-sizing: border-box;padding-right: 0.1px"> })</span><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/><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/><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/><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/><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/><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/><span style="box-sizing: border-box;padding-right: 0.1px"> })</span><br/><span style="box-sizing: border-box;padding-right: 0.1px"> }</span><br/><span style="box-sizing: border-box;padding-right: 0.1px"> }</span><br/><span style="box-sizing: border-box;padding-right: 0.1px"> }</span><br/><span style="box-sizing: border-box;padding-right: 0.1px"> }</span><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/><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/><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/><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/><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/><span style="box-sizing: border-box;padding-right: 0.1px"> }</span><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/><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/><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/><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/><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/><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/><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/><span style="box-sizing: border-box;padding-right: 0.1px"> }</span><br/><span style="box-sizing: border-box;padding-right: 0.1px"><span style="box-sizing: border-box"></span></span><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/><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/><span style="box-sizing: border-box;padding-right: 0.1px"> }</span><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/><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/><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/><span style="box-sizing: border-box;padding-right: 0.1px"> }</span><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/><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/><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/><span style="box-sizing: border-box;padding-right: 0.1px"> }</span><br/><span style="box-sizing: border-box;padding-right: 0.1px"><span style="box-sizing: border-box"></span></span><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/><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/><span style="box-sizing: border-box;padding-right: 0.1px"> }</span><br/><span style="box-sizing: border-box;padding-right: 0.1px"><span style="box-sizing: border-box"></span></span><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/><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/><span style="box-sizing: border-box;padding-right: 0.1px"> }</span><br/><span style="box-sizing: border-box;padding-right: 0.1px"><span style="box-sizing: border-box"></span></span><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/><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/><span style="box-sizing: border-box;padding-right: 0.1px"> }</span><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/><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/><span style="box-sizing: border-box;padding-right: 0.1px"> }</span><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/><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/><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/><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/><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/><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/><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/><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/><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/><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/><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/><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/><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/><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/><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/><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/><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/><span style="box-sizing: border-box;padding-right: 0.1px"> }</span><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/><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/><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/><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/><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/><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/><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/><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/><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/><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/><span style="box-sizing: border-box;padding-right: 0.1px"> }</span><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/><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/><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/><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/><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/><span style="box-sizing: border-box;padding-right: 0.1px"> }</span><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/><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/><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/><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/><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/><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/><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/><span style="box-sizing: border-box;padding-right: 0.1px"> }</span><br/><span style="box-sizing: border-box;padding-right: 0.1px"> }</span><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/><span style="box-sizing: border-box;padding-right: 0.1px"><span style="box-sizing: border-box"></span></span><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/><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/><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/><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/><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/><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/><span style="box-sizing: border-box;padding-right: 0.1px"><span style="box-sizing: border-box"></span></span><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/><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/><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/><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/><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/><span style="box-sizing: border-box;padding-right: 0.1px"><span style="box-sizing: border-box"></span></span><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/><span style="box-sizing: border-box;padding-right: 0.1px">{</span><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/><span style="box-sizing: border-box;padding-right: 0.1px"> {</span><br/><span style="box-sizing: border-box;padding-right: 0.1px"> }</span><br/><span style="box-sizing: border-box;padding-right: 0.1px"><span style="box-sizing: border-box"></span></span><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/><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/><span style="box-sizing: border-box;padding-right: 0.1px"> {</span><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/><span style="box-sizing: border-box;padding-right: 0.1px"> }</span><br/><span style="box-sizing: border-box;padding-right: 0.1px"><span style="box-sizing: border-box"></span></span><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/><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/><span style="box-sizing: border-box;padding-right: 0.1px"> {</span><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/><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/><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/><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/><span style="box-sizing: border-box;padding-right: 0.1px"> <span style="box-sizing: border-box;color: rgb(170, 85, 0)">// 如果连接不可用则忽略</span></span><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/><span style="box-sizing: border-box;padding-right: 0.1px"> }</span><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/><span style="box-sizing: border-box;padding-right: 0.1px"> }</span><br/><span style="box-sizing: border-box;padding-right: 0.1px"> }</span><br/><span style="box-sizing: border-box;padding-right: 0.1px"><span style="box-sizing: border-box"></span></span><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/><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/><span style="box-sizing: border-box;padding-right: 0.1px"> {</span><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/><span style="box-sizing: border-box;padding-right: 0.1px"> }</span><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/><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/><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/><span style="box-sizing: border-box;padding-right: 0.1px">],</span>
第十步：启动
php bin/laravels start
推荐学习：《laravel视频教程》
Atas ialah kandungan terperinci Artikel yang menerangkan secara terperinci cara Laravel8/LaravelS melaksanakan fungsi barrage. Untuk maklumat lanjut, sila ikut artikel berkaitan lain di laman web China PHP!
penggunaan fungsi griddata matlab
Apakah kaedah pemindahan fail java?
Apakah fail format pertengahan?
Apakah pengecam Python?
Bagaimana untuk mendapatkan Bitcoin
Apakah teknologi keselamatan rangkaian?
Bagaimana untuk memperkenalkan css luaran ke dalam html
Cara menutup tetingkap yang dibuka dengan tetingkap.buka
![[Web front-end] Permulaan pantas Node.js](https://img.php.cn/upload/course/000/000/067/662b5d34ba7c0227.png)
