Un article expliquant en détail comment Laravel8/LaravelS implémente la fonction barrage

Cet article vous apporte des connaissances pertinentes sur Laravel8/LaravelS. Il présente principalement les méthodes et les étapes permettant à Laravel8 d'implémenter la fonction de barrage basée sur LaravelS. Pour ceux qui sont intéressés, jetez un œil ci-dessous. .

Laravel8 implémente la fonction barrage barrage basée sur LaravelS

Introduction

Laravel8 implémente la fonction barrage barrage basée sur LaravelS. Auparavant, j'ai appris comment implémenter la fonction de barrage vidéo basée sur Swoole. Cet article implémentera une fonction de barrage vidéo basée sur Laravel8. Si vous n'êtes pas familier avec webpack, vous pouvez obtenir une erreur lors de l'installation du composant vue-baberrage mais vous ne savez pas comment la résoudre. Commençons par le mettre en œuvre étape par étape.

J'ai déjà appris à implémenter la fonction de barrage vidéo basée sur Swoole. Cet article implémentera une fonction de barrage vidéo basée sur Laravel8. Si vous n'êtes pas familier avec webpack, vous risquez d'obtenir une erreur lors de l'installation du composant vue-baberrage mais vous ne savez pas comment la résoudre. Commençons par le mettre en œuvre étape par étape.

Première étape : Installer Laravel8

composer create-project laravel/laravel labarrage

Deuxième étape : Utiliser vue dans Laravel8

Comment utiliser vue dans Laravel8, veuillez vous référer à Utilisation de vue dans Laravel8 .

Remarque : veuillez utiliser php artisan ui vue --auth lors de l'installation de vue

Étape 3 : Installer et installer vue-baberrage

Installer vue et bootstrap

npm install

安装弹幕组件

npm install vue-baberrage --save

运行

npm run dev

如果遇到BREAKING CHANGE: webpack < 5 used to include错误，请参考 Laravel8使用webpack报错的解决方法。

后续只要文件改动就需要重新编译，后续将不再复述。

第四步：安装LaravelS实现Websocket服务器

请参考 Laravel8使用laravel-s实现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)">&#39;vue-baberrage&#39;</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)">&#39;danmu-component&#39;</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)">&#39;./components/DanmuComponent.vue&#39;</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)">&#39;vue-baberrage&#39;</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)">&#39;danmu&#39;</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)">&#39;hello 自如初！&#39;</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)">&#39;top&#39;</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)">&#39;top&#39;</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)">&#39;top&#39;</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)">&#39;top&#39;</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)">&#39;layouts.app&#39;</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)">&#39;content&#39;</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)">&#39;/danmu&#39;</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)">&#39;danmu&#39;</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)">&#39;WebSocket 连接建立:&#39;</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)">&#39;WebSocket 连接关闭:&#39;</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)">&#39;websocket&#39;</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)">&#39;enable&#39;</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)">&#39;handler&#39;</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视频教程》

Ce qui précède est le contenu détaillé de. pour plus d'informations, suivez d'autres articles connexes sur le site Web de PHP en chinois!