Bringen Sie Ihnen bei, wie Sie mit Laravel-Websockets ein „Low-Profile'-Broadcast-System aufbauen

Dieser Artikel vermittelt Ihnen relevantes Wissen über Laravel. Er stellt vor allem die Verwendung von Laravel-Websockets zur Implementierung eines Broadcast-Systems mit „niedriger Konfiguration“ vor. Ich hoffe, dass er für alle hilfreich ist. .

Vorwort

Ich habe mehrere Tutorials im Internet gefunden, bin aber gescheitert, und dann habe ich mich an ein Tutorial gehalten, es weiter studiert und schließlich Erfolg gehabt. Dann habe ich dieses Tutorial geschrieben, in der Hoffnung, Leuten zu helfen, die so dumm sind wie ich. Außerdem hoffe ich, die Leser nicht in die Irre zu führen. Ich hoffe, dass die Leser meinem Tutorial nicht zu sehr vertrauen. Es ist mir tatsächlich wie benommen gelungen, und dieses Tutorial von mir kann Fallstricke enthalten. Ein weiterer Punkt ist, dass ich das Gefühl habe, dass mein Rechercheprozess recht fruchtbar zu sein scheint. Wenn Sie genug Zeit haben, empfehle ich Ihnen, selbst zu recherchieren.

Zu Beginn des Tutorials werde ich kurz vorstellen, wie ich auf die in diesem Tutorial vorgestellte Methode gekommen bin. Ich schlage vor, dass Leute, die das Tutorial lesen, auf diesen Teil achten, denn ich vermute, dass Laravel oder verwandte Bibliotheken nach der Aktualisierung möglicherweise inkompatibel oder verwirrend werden und dann erneut Probleme auftreten. Zu diesem Zeitpunkt müssen die Leser möglicherweise selbst recherchieren.

Warum sage ich, dass es sich um eine allgemeine Einführung handelt? Weil ich das Gefühl habe, dass viele Orte das Ergebnis meiner eigenen Blindheit sind. Darüber hinaus kann es eine unaussprechliche Erfahrung erfordern.

Versuchen Sie, die Größe der Versuchspersonen zu reduzieren und nach Tutorials mit weniger Schritten zu suchen.

Zuerst folgte ich der chinesischen Version der offiziellen Dokumentation. Später stellte ich fest, dass dies zu kompliziert war und ich möglicherweise scheitern würde, wenn ich es mache ein falscher Schritt. Und manchmal gibt es nicht einmal eine Fehlermeldung. Auch wenn eine Fehlermeldung vorhanden ist, kann sie entweder nicht gefunden werden oder es gibt zu viele Fragen mit völlig unterschiedlichen Antworten. Wenn Sie den Maßstab so weit wie möglich reduzieren, sollten Sie möglichst viele Fallstricke vermeiden können.

Zerlegen Sie die Aufgabe, damit Sie Feedback zum Erfolg der Teilaufgaben erhalten.

Zuerst habe ich sie Schritt für Schritt verfolgt und dann schließlich gesehen, ob sie erfolgreich war. Später stellte ich fest, dass diese Methode zu ineffizient war. Dann habe ich festgestellt, dass einige Unterschritte anhand einiger Methoden beurteilt werden können, um festzustellen, ob sie erfolgreich sind. Nachdem Laravel-Websockets beispielsweise erfolgreich installiert wurde, kann das Dashboard geöffnet werden. Es ist /laravel-websockets . Es gibt auch Code zum Versenden von Broadcasts. Bei Erfolg können Sie den Effekt im oben erwähnten Dashboard sehen. Wenn schließlich alles erfolgreich ist, können Sie den Effekt im Browser sehen. Wenn es mir also später in der jetzigen Phase nicht gelingen würde, würde ich es nicht weitermachen und weiter untersuchen, was in dieser Phase schief gelaufen ist.

Mehr protokollieren

Beim Protokollieren habe ich festgestellt, dass das Echo des Clients überhaupt nicht erfolgreich initialisiert wurde, weil es nur wenige Parameter gab. Es schien vorher eine Fehlermeldung zu geben, aber ich schien sie nicht zu verstehen. Durch die Ausgabe zweier unterschiedlicher Protokolle vor und nach der Initialisierung von Echo stellte ich fest, dass nur das erstere ausgeführt wurde und das letztere überhaupt nicht ausgeführt wurde. Daher kam ich zu dem Schluss, dass die Ausführung des Programms gestoppt wurde, als es auf einen Fehler stieß.

Versuchen Sie, mit dem zu testenden Thema vertraut zu sein.

Beispielsweise habe ich zu einem bestimmten Fehlerbericht keine relevanten Informationen gefunden. Aber später stellte ich fest, dass ein bestimmtes Wort darin in der Konfiguration vorkam, also habe ich einfach diese Konfiguration geändert und es war in Ordnung. Es lautet: „Nicht erfasstes Optionsobjekt muss einen Cluster bereitstellen“. Aber dann habe ich im Internet eine Methode gefunden, die mit meiner identisch war. Vielleicht lag es daran, dass auf dem Poster stand, dass sie nutzlos sei, also habe ich sie nicht ausprobiert.

Umfassende Informationen von allen Beteiligten, insbesondere von denen, die erfolgreich sind

Obwohl es möglicherweise nicht einfach zu verwenden und sogar irreführend ist, glaube ich, dass mehr Informationen bei der Lösung des Problems hilfreicher sein werden. Ich habe zum Beispiel auf Bilibili nach „Laravel Broadcast“ gesucht und mir ein paar Videos angesehen. Habe auch einige inoffizielle Dokumentations-Tutorials durchsucht.

Wenn die Suchfehlermeldung nutzlos ist oder zu viele Suchergebnisse vorhanden sind, werfen Sie einen Blick auf den Code.

Aber ich habe das Gefühl, dass die Wahrscheinlichkeit, dass dies nützlich ist, gering ist. Verwenden Sie es also einfach, wenn Sie keine anderen Optionen haben. Durch diese Methode habe ich festgestellt, dass ich beim Auskommentieren des Codes eine Zeile weniger auskommentiert habe und dann eine sehr seltsame Fehlermeldung angezeigt wurde.

Seien Sie nicht zu glücklich, auch wenn Sie Erfolg haben, üben Sie es noch ein paar Mal.

Je mehr Schritte Sie haben, desto einfacher ist es, Probleme zu haben. Es gibt so viele Schritte in diesem Rundfunksystem. Je mehr Sie üben, desto vertrauter werden Sie.

Versuchen Sie, aktualisierte Tutorials auszuwählen

Normalerweise füge ich innerhalb eines Jahres eine Bedingung in der Suchmaschine hinzu.

Programmierung für Suchmaschinen

Ich habe das Gefühl, dass dieses Mal mehr als die Hälfte der Probleme durch Suchmaschinen gelöst wurden, und es schien, dass es nur sehr wenige Teile gab, die vollständig von mir selbst gelöst wurden.

Ontologie

Einige Aspekte meines Tutorials sind etwas langwierig. Es beginnt mit der Erstellung eines Projekts und erwähnt auch die Konfiguration der Datenbank. Fortgeschrittene Leser ignorieren möglicherweise einige Inhalte. Für High-End-Leser sollte es keinen Grund geben, so etwas von mir zu lesen. Ich habe jedoch grundsätzlich keine Einführung in den Befehl. Wenn Sie ihn benötigen, empfehle ich Ihnen, den folgenden englischen Artikel zu lesen.
Memo

Dies ist ein öffentlicher Kanal. Es gibt auch Warteschlangen, die die Standardsynchronisierung verwenden, die angeblich nur in Entwicklungsumgebungen verwendet wird. Kurz gesagt, mein Tutorial ist wahrscheinlich ziemlich lahm, aber wenn Sie es durchgehen, sollten Sie es als Ausgangspunkt verwenden können, um mit neuen Konfigurationen zu experimentieren und neue Funktionen gemäß den offiziellen Dokumenten hinzuzufügen.

Mein Tutorial bezieht sich hauptsächlich auf diesen Artikel: So verwenden Sie Laravel WebSockets.

Erstellen Sie ein Projekt

Führen Sie den folgenden Befehl in Apache24htdocs oder einem ähnlichen Ort aus:

composer create-project laravel/laravel bc

Führen Sie den folgenden Befehl im Projektpfad aus:

php artisan serve

Beachten Sie, dass das aktuelle Befehlszeilenfenster nach der Ausführung des obigen Befehls im Allgemeinen keine Befehle mehr ausführen kann und muss neu gestartet werden. Ein Befehlszeilenfenster. Sie möchten weiterhin Befehle im aktuellen Befehlszeilenfenster ausführen, es sei denn, Sie kooperieren mit Befehlen, die im Hintergrund ausgeführt werden.

Datenbankinformationen konfigurieren

Sie müssen eine Datenbank erstellen, bevor Sie die Datenbank konfigurieren, die ich test verwende. Auch wenn es nicht erstellt wurde, wird es bei der Migration aufgefordert, es zu erstellen. Das hätte ich fast vergessen, weil ich diese Datenbank noch nie zuvor gelöscht habe.

.env

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

Achten Sie darauf, die tatsächlichen Informationen Ihrer Datenbank einzugeben, und kopieren Sie nicht meine Konfiguration.

Installieren Sie das serverseitige Paket beyondcode/laravel-websockets

Führen Sie den folgenden Befehl im Projektpfad aus:

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"

Install pusher

Führen Sie den folgenden Befehl im Projektpfad aus:

composer require pusher/pusher-php-server

Beachten Sie diesen Artikel, den ich verwiesen auf Nein, die von mir installierte sollte die neueste Version sein. Der Originaltext scheint eine bestimmte Version zu haben.

Konfigurieren von 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

Beachten Sie, dass sich dies auch von dem englischen Artikel unterscheidet, auf den ich verwiesen habe. Ich habe eine Zwangsstörung und finde, dass der Wechsel zu .env eleganter ist. Schließlich wird an anderen Orten zuerst .env gelesen. Es fühlt sich an, als wäre .env eher eine Funktion. Wenn Sie eine Stelle ändern, müssen Sie nicht alle aufrufenden Stellen ändern. Ich habe das Gefühl, dass mit dem vorherigen Satz etwas nicht stimmt, vielleicht ist es das, was er bedeutet.

Bitte beachten Sie noch einmal, dass die Werte vom zweiten bis vierten Punkt zufällig ausgefüllt sind.

Führen Sie den Laravel WebSockets-Server aus

Führen Sie den folgenden Befehl im Projektpfad aus:

php artisan websockets:serve

Dies bedeutet auch, dass nach der Ausführung keine Befehle in das aktuelle Befehlszeilenfenster eingegeben werden können. [Empfohlenes Lernen: Laravel-Video-Tutorial] Geben Sie nach

127.0.0.1:8000/laravel-websockets in die Adressleiste des Browsers ein, um zu sehen, ob der vorherige Vorgang erfolgreich war. Wenn Sie den Server nicht über „php artisan Serve“ betreiben, kann der Port anders sein. Klicken Sie auf die Schaltfläche „Verbinden“. Wenn unter „Ereignisse“ etwas angezeigt wird, sollte dies ein schrittweiser Erfolg sein. Beachten Sie, dass sich diese Webseite ohne diese Funktion sehr langsam öffnet, zumindest für mich ist sie sehr langsam. Weil darin eine js-Bibliothek enthalten ist, deren Download sehr langsam ist. Beachten Sie, dass das folgende Verhalten beim Ändern der Blade-Vorlage optional ist! Außerdem weiß ich nicht, ob es ein Problem mit dem CDN unten gibt. Schließlich scheint es sich nicht um ein CDN eines großen Herstellers zu handeln. Wenn Sie zu langsam sind und das nicht tun möchten, können Sie

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

in Vendorbeyondcodelaravel-websocketsresourcesviewsdashboard.blade.php durch

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

ersetzen. Ich habe mit dem VS direkt nach cdn.plot.ly/plotly-latest gesucht Codesuchfunktion. min.js Ich habe diese Datei gefunden. Darüber hinaus habe ich im Firefox-Entwicklertools-Netzwerk festgestellt, dass die Ladegeschwindigkeit dieser js-Bibliothek langsam ist. Außerdem wäre es unelegant, Dateien an solchen Stellen direkt zu ändern.

Ereignisse erstellen

Führen Sie den folgenden Befehl im Projektpfad aus:

php artisan make:event NewTrade

appEventsNewTrade.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');
    }}

Führen Sie den folgenden Befehl im Projektpfad aus:

php artisan tinker

Nach dem Ausführen dieses Befehls wird, soweit ich weiß, der interaktive Interpreter von Laravel gestartet Geben Sie einfach einige Anweisungen ein und diese können direkt ausgeführt werden. Darüber hinaus gibt es noch einige weitere praktische Befehle. Dies bedeutet auch, dass das aktuelle Befehlszeilenfenster nach dem Ausführen keine normalen Systembefehle eingeben kann, nach diesem Befehlszeilenfenster jedoch PHP-Anweisungen eingegeben werden müssen. Übrigens kann das Terminal in VS Code in Tinker nicht Strg + V verwenden, aber die Rechtsklick-Funktion kann zum Einfügen verwendet werden.

Dann führen Sie den folgenden Befehl im Befehlszeilenfenster aus, in dem oben PHP artisan tinker ausgeführt wurde:

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

Dann können Sie die Nachricht sehen, die auf der oben erwähnten Seite 127.0.0.1:8000/laravel-websockets gesendet wurde. Wenn Sie es sehen können, bedeutet dies, dass die Phase erfolgreich war.

Installieren Sie das Client-Paket laravel-echo

Führen Sie den folgenden Befehl im Projektpfad aus:

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

resourcesjsbootstrap.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,});

Beachten Sie, dass sich dies auch von dem englischen Artikel unterscheidet, auf den ich verwiesen habe. Ich habe diese Dinge in dieser Datei einfach auskommentiert und am Ende die Zeile „cluster: import.meta.env.VITE_PUSHER_APP_CLUSTER“ hinzugefügt.

Führen Sie den folgenden Befehl im Projektpfad aus:

npm run dev

Nachdem Sie diesen Befehl ausgeführt haben, können Sie im aktuellen Befehlszeilenfenster keine Befehle mehr eingeben.

添加客户端脚本

在文件
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”消息。能看到就说明最终成功了。

结语

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

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

原文地址：https://learnku.com/articles/74366

Das obige ist der detaillierte Inhalt vonBringen Sie Ihnen bei, wie Sie mit Laravel-Websockets ein „Low-Profile'-Broadcast-System aufbauen. Für weitere Informationen folgen Sie bitte anderen verwandten Artikeln auf der PHP chinesischen Website!