laravel-websocket を使用して「ロープロファイル」ブロードキャストシステムを構築する方法を教えます-Laravel-php.cn

この記事では、laravel-websocketを使って「低構成版」ブロードキャストシステムを実装する方法を中心に、Laravelに関する知識をまとめていますので、興味のある方はぜひご覧ください。みんなに、役に立ちました。

laravel-websocket を使用して「ロープロファイル」ブロードキャストシステムを構築する方法を教えます

まえがき

インターネットでいくつかのチュートリアルを見つけましたが成功しませんでした。その後、1 つのチュートリアルを勉強し続け、最終的に成功しました。そこで、私と同じくらい愚かな人々を助けたいと考えて、このチュートリアルを書きました。また、読者の皆様に誤解を与えないようお願いいたします。読者が私のチュートリアルをあまり信用しないことを願っています。実際、私はぼんやりと成功しましたが、私のこのチュートリアルには落とし穴があるかもしれません。 もう 1 つの点は、私の研究プロセスはかなり実りあると感じているということです。十分な時間があれば、自分で研究することをお勧めします。

チュートリアルの最初に、このチュートリアルで紹介する方法を私がどのようにして思いついたのかを簡単に紹介します。 Laravel や関連ライブラリが更新されると互換性がなくなったり混乱したりする可能性があり、その後再び問題が発生する可能性があるため、このチュートリアルを読む人はこの部分に注意することをお勧めします。その際、読者は独自に調査する必要があるかもしれません。

なぜこれが一般的な紹介だと言えるのかというと、多くの場所が私によって作られたと感じているからです。さらに、言葉では言い表せない経験も必要になるかもしれません。

実験対象のサイズを減らして、より少ないステップのチュートリアルを探してください。

最初は中国語版の公式ドキュメントに従いましたが、後から複雑すぎることがわかり、間違えたかもしれない、失敗するだろう。また、エラーメッセージすら出ない場合もあれば、エラーメッセージがあっても見つからないか、全く違う答えの質問が多すぎるかのどちらかです。できる限り規模を縮小すれば、落とし穴はできるだけ避けられるはずです。

サブタスクの成功に関するフィードバックを取得できるようにタスクを分解する

最初はステップごとに実行し、最後に成功したかどうかを確認しました。この方法はあまりにも非効率的でした。すると、一部のサブステップは、laravel-websockets のインストールが成功したらダッシュボードを開くなど、いくつかの方法で成功したかどうかを判断できることがわかりました。それは /laravel-websockets です。ブロードキャストを送信するコードもあり、成功すると、前述のダッシュボードで効果が確認できます。最後に、すべてが成功すると、ブラウザで効果を確認できます。ですから、後々、今の段階でうまくいかなかったら、それを続けずに、この段階で何がうまくいかなかったのかを研究し続けることになります。

詳細をログに記録します

ログを記録したところ、パラメーターが少なかったため、クライアントの Echo がまったく初期化されていなかったことがわかりました。先ほどエラーメッセージが出たようなのですが、よく分からなかったようです。 Echoの初期化前後で2つの異なるログを出力したところ、前者のみが実行され、後者はまったく実行されていないことがわかり、プログラムがエラーに遭遇して実行を停止したのではないかという結論に達しました。

テスト対象についてよく理解するようにしてください。

たとえば、特定のエラーレポートに関する関連情報が見つかりませんでした。しかし、後でその中の特定の単語が設定に含まれていることがわかり、その設定を変更するだけで問題ありませんでした。それは、「Uncaught Options オブジェクトはクラスターを提供する必要がある」です。ところが、インターネットで私と同じ方法を見つけたのですが、その方法は前に見たことがあるのか、投稿者が「ダメだ」と書いていたので試しませんでした。

すべての関係者、特に成功している関係者からの包括的な情報

使いにくい場合や誤解を招く可能性もありますが、より多くの情報が問題解決に役立つと信じています疑わしい。たとえば、Bilibili で「laravel ブロードキャスト」を検索し、いくつかのビデオを見ました。また、いくつかの非公式ドキュメントのチュートリアルも検索しました。

検索エラーメッセージが役に立たない場合や、検索結果が多すぎる場合は、コードを見てください。

ただし、役に立つ可能性は低いと思うので、次のような場合に使用してください。他に選択肢はありません。この方法で、コードのコメントを解除するときにコメントを 1 行減らしたところ、非常に奇妙なエラーメッセージが表示されたことがわかりました。

成功しても喜ぶ必要はありません。何度か練習してください。

手順が増えると、問題が発生しやすくなります。手順がたくさんあります。この放送システムでは。練習すればするほど、より慣れてきます。

更新されたチュートリアルを選択してみてください

私は通常、1 年以内の条件を検索エンジンに追加します。

検索エンジン指向プログラミング

今回の問題は半分以上が検索エンジンを通して解決されたような気がしており、完全に自分だけで解決できた部分は少ないように感じました。

オントロジー

私のチュートリアルのいくつかの側面は非常に長く、プロジェクトの作成から始まり、データベースの構成についても触れられています。上級読者は一部のコンテンツを無視する可能性があります。ハイエンドの読者にとっては、私の作品を読む必要はないはずです。ただし、コマンドの紹介は基本的にないので、必要な場合は以下の英語記事を読むことをお勧めします。
メモ

これは公開チャンネルです。開発環境でのみ使用されると言われているデフォルトの同期を使用するキューもあります。つまり、私のチュートリアルはおそらく非常に不自由ですが、これを実行すれば、公式ドキュメントに従って新しい構成を試したり、新しい機能を追加したりするための出発点として使用できるはずです。

私のチュートリアルでは主にこの記事を参照します: Laravel WebSocket の使用方法。

プロジェクトの作成

Apache24\htdocs または同様の場所で次のコマンドを実行します:

composer create-project laravel/laravel bc

ログイン後にコピー

プロジェクトパスで次のコマンドを実行します:

php artisan serve

ログイン後にコピー

注上記のコマンドを実行した後は、通常、現在のコマンドラインウィンドウではコマンドを実行できないため、コマンドラインウィンドウを再起動する必要があります。バックグラウンドで実行されているコマンドと連携しない限り、現在のコマンドラインウィンドウでコマンドの実行を継続したいと考えています。

データベース情報の構成

データベースを構成する前にデータベースを作成する必要があります。ここでは test を使用します。ただし、作成していなくても、移行時に作成するよう求められます。これまでこのデータベースを削除したことがなかったので、ほとんど忘れていました。

.env

DB_CONNECTION=mysqlDB_HOST=127.0.0.1DB_PORT=3306DB_DATABASE=testDB_USERNAME=rootDB_PASSWORD=1234

ログイン後にコピー

私の構成をコピーしないで、データベースの実際の情報を入力するように注意してください。

サーバー側パッケージのBeyondcode/laravel-websocketsをインストールします

プロジェクトパスで次のコマンドを実行します:

composer require beyondcode/laravel-websockets
php artisan vendor:publish --provider="BeyondCode\LaravelWebSockets\WebSocketsServiceProvider" --tag="migrations"php artisan migrate
php artisan vendor:publish --provider="BeyondCode\LaravelWebSockets\WebSocketsServiceProvider" --tag="config"

ログイン後にコピー

プッシャーのインストール

次のコマンドを実行しますプロジェクトパス内のコマンドコマンド:

composer require pusher/pusher-php-server

ログイン後にコピー

この記事は私が参照した記事とは異なることに注意してください。私がインストールした記事は最新バージョンである必要があります。原文には特定のバージョンがあるようです。

Cconfiguring Laravel WebSockets

.env

BROADCAST_DRIVER=pusherPUSHER_APP_ID=12345PUSHER_APP_KEY=ABCDEFGPUSHER_APP_SECRET=HIJKLMNOPPUSHER_HOST=127.0.0.1PUSHER_PORT=6001PUSHER_SCHEME=httpPUSHER_APP_CLUSTER=mt1

ログイン後にコピー

これは私が参照した英語の記事とも異なることに注意してください。 env はよりエレガントです。結局のところ、他の場所では最初に .env が読み取られます。 .env は関数に近いように感じられ、1 か所変更すれば、すべての呼び出し先を変更する必要はありません。前の文に何か問題があるような気がしますが、おそらくそういう意味でしょう。

2項目目から4項目目までの値は無造作に記入されていることに注意してください。

Laravel WebSocket サーバーを実行します

プロジェクトパスで次のコマンドを実行します:

php artisan websockets:serve

ログイン後にコピー

これは現在のコマンドでもありますコマンド実行後の行はウィンドウに入力できません。 [推奨学習: laravel ビデオチュートリアル ]

次に、ブラウザのアドレスバーに 127.0.0.1:8000/laravel-websockets と入力して、前の操作が成功。。「phpArtisan Serve」を介してサーバーを実行していない場合は、ポートが異なる可能性があります。「接続」ボタンをクリックし、「イベント」の下に何かが表示されたら、段階的に成功しているはずです。これを行わないと、この Web ページを開くのが非常に遅くなることに注意してください。少なくとも私にとっては非常に遅いです。これは、ダウンロードが非常に遅い js ライブラリが含まれているためです。ブレードテンプレートを変更する次の動作はオプションであることに注意してください。なお、以下のCDNは問題があるのかわかりませんが、やはり大手メーカーのCDNではないようです。遅すぎてそれをしたくない場合は、vendor\beyondcode\laravel-websockets\resources\views\dashboard.blade.php の

<script  src="//m.sbmmt.com/link/19e0c9edc141240b5de750fa83ba1bed"></script>

ログイン後にコピー

を

<script  src="https://cdn.bootcdn.net/ajax/libs/plotly.js/2.17.0/plotly.min.js"></script>

ログイン後にコピー

に置き換えることができます。

このファイルは、VS Code の検索機能を使用して cdn.plot.ly/plotly-latest.min.js を直接検索することで見つかりました。また、Firefox 開発者ツールネットワークでは、この JS ライブラリの読み込み速度が遅いことがわかりました。また、そのような場所でファイルを直接変更するのは洗練されていません。

イベントの作成

プロジェクトパスで次のコマンドを実行します:

php artisan make:event NewTrade

ログイン後にコピー

app\Events\NewTrade.php

<?php
namespace App\Events;use Illuminate\Broadcasting\Channel;
use Illuminate\Broadcasting\InteractsWithSockets;
use Illuminate\Broadcasting\PresenceChannel;
use Illuminate\Broadcasting\PrivateChannel;
use Illuminate\Contracts\Broadcasting\ShouldBroadcast;use Illuminate\Foundation\Events\Dispatchable;
use Illuminate\Queue\SerializesModels;
class NewTrade implements ShouldBroadcast{
    use Dispatchable, InteractsWithSockets, SerializesModels;

    public $trade;

    /**
     * Create a new event instance.
     *
     * @return void
     */
    public function __construct($trade)
    {
        $this->trade = $trade;
    }

    /**
     * Get the channels the event should broadcast on.
     *
     * @return \Illuminate\Broadcasting\Channel|array
     */
    public function broadcastOn()
    {
        return new Channel('trades');
    }}

ログイン後にコピー

次のコマンドをプロジェクトパスで実行します。プロジェクトパス :

php artisan tinker

ログイン後にコピー

このコマンドを実行するとLaravelの対話型インタプリタが起動し、一部のステートメントを入力すると直接実行できることが分かりました。他にも実用的なコマンドがいくつかあります。これは、実行後、現在のコマンドラインウィンドウでは通常のシステムコマンドを入力できませんが、このコマンドラインウィンドウの後に php ステートメントを入力する必要があることも意味します。ちなみに、VS CodeのターミナルはtinkerではCtrl Vが使えませんが、右クリック機能を使ってペーストすることができます。

次に、上記で php 職人ティンカーが実行されたコマンドラインウィンドウで次のコマンドを実行します:

event (new \App\Events\NewTrade('test'))

ログイン後にコピー

その後、上記のコマンドラインウィンドウ 127.0.0.1 を実行できます。 8000/laravel -websockets ページには、送信されたメッセージが表示されます。それが見えれば、ステージは成功したことを意味します。

クライアントパッケージ laravel-echo をインストールします

プロジェクトパスで次のコマンドを実行します:

npm installnpm install --save-dev laravel-echo pusher-js

ログイン後にコピー

resources\js\bootstrap.js

import Echo from 'laravel-echo';import Pusher from 'pusher-js';window.Pusher = Pusher;window.Echo = new Echo({
    broadcaster: 'pusher',
    key: import.meta.env.VITE_PUSHER_APP_KEY,
    wsHost: import.meta.env.VITE_PUSHER_HOST ? import.meta.env.VITE_PUSHER_HOST : `ws-${import.meta.env.VITE_PUSHER_APP_CLUSTER}.pusher.com`,
    wsPort: import.meta.env.VITE_PUSHER_PORT ?? 80,
    wssPort: import.meta.env.VITE_PUSHER_PORT ?? 443,
    forceTLS: (import.meta.env.VITE_PUSHER_SCHEME ?? 'https') === 'https',
    enabledTransports: ['ws', 'wss'],
    cluster: import.meta.env.VITE_PUSHER_APP_CLUSTER,});

ログイン後にコピー

Payここに注意参考にした英語の記事とも異なります。ファイル内のこれらのコメントを解除し、最後に「cluster: import.meta.env.VITE_PUSHER_APP_CLUSTER」という行を追加しました。

プロジェクトパスで次のコマンドを実行します:

npm run dev

ログイン後にコピー

これは、これを実行した後、現在のコマンドラインウィンドウにコマンドを入力できなくなることも意味します。

添加客户端脚本

在文件
resources\views\welcome.blade.php
的 head 标签的结尾添加以下代码：

        @vite('resources/js/app.js')        <script>
            window.onload = function(){
                Echo.channel('trades')
                .listen('NewTrade', (e) => {
                    console.log(e.trade);
                });
            };
        </script>
    </head>

ログイン後にコピー

注意这里也跟我参考的那篇英文文章不一样。改了两处，一个是导入 app.js 的方法换了。另外套了一层 window.onload。

然后在浏览器的地址栏输入 127.0.0.1:8000/ 启动开发者工具并切换到控制台标签页。然后再在前面运行过 php artisan tinker 的那个命令行窗口中执行以下命令：

event (new \App\Events\NewTrade('test'))

ログイン後にコピー

最后切换到前面提到的开发者工具中的控制台标签页，应该能看到一条“test”消息。能看到就说明最终成功了。

结语

我只是个菜狗，不要问我太复杂的问题。我从开始搞这个广播系统到最终成功好像用了两三天的时间，就凭这个时间你应该就能体会到我有多菜了。

最后因为我是菜狗，所以可能会有一些理解上的错误，欢迎指出来。不过按照我的这个教程做基本上应该是会成功的。我做完这个教程自己照着又做了两遍，没问题。不过也可能会因为我没注意到一些东西，或者读者的环境跟我的不一样导致读者不成功。所以我也不敢保证。感觉早晚会失效，失效了如果我没更新的话谁看到了就回复一下提醒一下别人吧。