이 기사는 Laravel8/LaravelS에 대한 관련 지식을 제공합니다. LaravelS를 기반으로 Barrage 기능을 구현하는 Laravel8의 방법과 단계를 주로 소개합니다. .
Laravel8은 LaravelS를 기반으로 사격 사격 기능을 구현합니다.
소개
Laravel8은 LaravelS를 기반으로 사격 사격 기능을 구현합니다. 이전에는 Swoole을 기반으로 Video Barrage 기능을 구현하는 방법을 배웠습니다. 이번 글에서는 Laravel8을 기반으로 Video Barrage 기능을 구현해보겠습니다. webpack에 익숙하지 않은 경우 vue-baberrage 컴포넌트를 설치할 때 오류가 발생하지만 해결 방법을 모를 수도 있습니다. 단계별로 구현을 시작해 보겠습니다.
Swoole을 기반으로 Video Barrage 기능을 구현하는 방법을 이전에 배웠습니다. 이번 글에서는 Laravel8을 기반으로 Video Barrage 기능을 구현해 보겠습니다. webpack에 익숙하지 않은 경우 vue-baberrage 컴포넌트 설치 시 오류가 발생하지만 해결 방법을 모르는 경우가 있습니다. 단계별로 구현을 시작해 보겠습니다.
1단계: Laravel8 설치
composer create-project laravel/laravel labarrage
2단계: Laravel8에서 vue 사용
Laravel8에서 vue 사용 방법은 Laravel8에서 vue 사용을 참조하세요.
참고: vue
를 설치할 때 php artisan ui vue --auth를 사용하세요. 3단계: vue-baberrage
vue 및 부트스트랩 설치
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视频教程》
위 내용은 Laravel8/LaravelS가 사격 기능을 구현하는 방법을 자세히 설명하는 기사의 상세 내용입니다. 자세한 내용은 PHP 중국어 웹사이트의 기타 관련 기사를 참조하세요!
![[웹 프런트엔드] Node.js 빠른 시작](https://img.php.cn/upload/course/000/000/067/662b5d34ba7c0227.png)
