Laravel8/LaravelSの弾幕機能の実装方法を詳しく解説した記事-Laravel-php.cn

ホームページ

PHPフレームワーク

Laravel

Laravel8/LaravelSの弾幕機能の実装方法を詳しく解説した記事

藏色散人

Feb 09, 2023 am 11:17 AM

laravel8 laravels

この記事では、Laravel8/LaravelSに関する知識をお届けします.Laravel8でLaravelSをベースに弾幕機能を実装するまでの手順を中心に紹介していますので、興味のある方は合わせてご覧ください。みんな助けてくれます。

Laravel8 は Laravel をベースに弾幕機能を実装しますS

はじめに

Laravel8 は LaravelS をベースに弾幕機能を実装します。前回はSwooleをベースにビデオ連発機能を実装する方法を学びましたが、今回はLaravel8をベースにしてビデオ連発機能を実装します。 Webpack に慣れていない場合は、vue-baberrage コンポーネントをインストールするときにエラーが発生しても、その解決方法がわからない可能性があります。段階的に実装してみましょう。

以前、Swooleをベースにビデオ連発機能を実装する方法を学習しましたが、本記事ではLaravel8をベースにビデオ連発機能を実装していきます。 Webpack に慣れていない場合は、vue-baberrage コンポーネントのインストール時にエラーが発生しても、その解決方法がわからない可能性があります。段階的に実装してみましょう。

ステップ 1: Laravel8 をインストールする

composer create-project laravel/laravel labarrage

ログイン後にコピー

ステップ 2: Laravel8 で vue## を使用する

#Laravel8 での vue の使い方は、Laravel8 での vue の使い方を参照してください。
#注: vue をインストールするときは、phpArtisan 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服务器

请参考 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视频教程》

以上がLaravel8/LaravelSの弾幕機能の実装方法を詳しく解説した記事の詳細内容です。詳細については、PHP 中国語 Web サイトの他の関連記事を参照してください。

このウェブサイトの声明

この記事の内容はネチズンが自主的に寄稿したものであり、著作権は原著者に帰属します。このサイトは、それに相当する法的責任を負いません。盗作または侵害の疑いのあるコンテンツを見つけた場合は、admin@php.cn までご連絡ください。

ホットAIツール

Undresser.AI Undress

リアルなヌード写真を作成する AI 搭載アプリ

AI Clothes Remover

写真から衣服を削除するオンライン AI ツール。

Undress AI Tool

脱衣画像を無料で

Clothoff.io

AI衣類リムーバー

AI Hentai Generator

AIヘンタイを無料で生成します。

ホットツール

メモ帳++7.3.1

使いやすく無料のコードエディター

SublimeText3 中国語版

中国語版、とても使いやすい

ゼンドスタジオ 13.0.1

強力な PHP 統合開発環境

ドリームウィーバー CS6

ビジュアル Web 開発ツール

SublimeText3 Mac版

神レベルのコード編集ソフト（SublimeText3）

ホットトピック

Gmailメールのログイン入り口はどこですか？

7490

CakePHP チュートリアル

1377

Steamのアカウント名の形式は何ですか

Win11 Activation Key Permanent

NYTの接続はヒントと回答です

Related knowledge

Laravelのコンポーネントを使用して再利用可能なUI要素を作成するにはどうすればよいですか？ Mar 17, 2025 pm 02:47 PM

この記事では、コンポーネントを使用してLaravelで再利用可能なUI要素の作成とカスタマイズについて説明し、組織のベストプラクティスを提供し、パッケージを強化することを提案します。

Laravelでカスタムブレードディレクティブを作成および使用するにはどうすればよいですか？ Mar 17, 2025 pm 02:50 PM

この記事では、Laravelでカスタムブレードディレクティブの作成と使用を行い、テンプレートを強化します。ディレクティブの定義、テンプレートでそれらを使用し、大規模なプロジェクトでそれらを管理することをカバーし、改善されたコードの再利用性やRなどの利点を強調しています

クラウドネイティブ環境でLaravelを使用するためのベストプラクティスは何ですか？ Mar 14, 2025 pm 01:44 PM

この記事では、スケーラビリティ、信頼性、セキュリティに焦点を当てたクラウドネイティブ環境でLaravelを展開するためのベストプラクティスについて説明します。重要な問題には、コンテナ化、マイクロサービス、ステートレス設計、最適化戦略が含まれます。

Laravelでカスタム検証ルールを作成して使用するにはどうすればよいですか？ Mar 17, 2025 pm 02:38 PM

この記事では、Laravelでカスタム検証ルールの作成と使用について説明し、それらを定義および実装する手順を提供します。再利用性や特異性などの利点を強調し、Laravelの検証システムを拡張する方法を提供します。

Laravelの職人コンソールを使用して一般的なタスクを自動化するにはどうすればよいですか？ Mar 17, 2025 pm 02:39 PM

Laravelの職人コンソールは、コードの生成、移行の実行、スケジューリングなどのタスクを自動化します。重要なコマンドには、Make：Controller、Migrate、およびDB：Seedが含まれます。特定のニーズに合わせてカスタムコマンドを作成し、ワークフロー効率を向上させることができます。

Laravelのルーティング機能を使用して、SEOに優しいURLを作成するにはどうすればよいですか？ Mar 17, 2025 pm 02:43 PM

この記事では、Laravelのルーティングを使用してSEOに優しいURLを作成し、Best Practice、Canonical URL、SEO最適化のツールをカバーします。ワード数：159

どちらが良いのか、DjangoとLaravel？ Mar 28, 2025 am 10:41 AM

DjangoとLaravelはどちらもフルスタックのフレームワークです。 DjangoはPython開発者や複雑なビジネスロジックに適していますが、LaravelはPHP開発者とエレガントな構文に適しています。 1.DjangoはPythonに基づいており、迅速な発展と高い並行性に適した「バッテリーコンプリート」哲学に従います。 2. LaravelはPHPに基づいており、開発者エクスペリエンスを強調しており、小規模から中規模のプロジェクトに適しています。