So verwenden Sie Laravel mit Sockel.Io

Websockets sind cool. Sie sind sehr hilfreich, wenn Sie Aktivitäten in Echtzeit von Ihren Benutzern (oder vielleicht einige Warteschlangenjobs) zeigen möchten, die sich um Echtzeit-Aktivitäten befinden möchten, die Sie von Ihren Benutzern (oder vielleicht einige Warteschlangenjobs) zeigen möchten).

Wenn Sie jetzt Angst vor dem Wort "Websockets" haben, seien Sie nicht. Ich werde die Anweisungen dafür festlegen, wie Sie sie verwenden können, und werde Ihre Fragen beantworten.

Ich hatte diese Herausforderung, in der ich sie brauchte, um eine Liste von Personen anzuzeigen, die derzeit eine bestimmte URL in betrachten Laravel. Also fing ich an zu denken. Ein Teil von mir wollte einen schnellen Hack machen (zum Glück ist das nicht die stärkste Seite von mir). Während der andere etwas Cooles, wiederverwendbares und langlebiges bauen wollte.

„Warum benutzt du nicht einfach Pusher??”

Hier ist das Ding.

Laravel wird mit aktivierter Drücker geliefert. Auch wenn Pusher eine schnelle „Plug -and -Play -Lösung“ erscheint (wie es ist), ist es mit Einschränkungen verbunden. Schauen Sie sich https: // pusher an.com/Preisgestaltung

Und die meisten Tutorials haben Sie mit dem Titel der Implementierung von Websockets, wenn sie in Wirklichkeit nur Pusher geben möchten. (Und mein Lieblingsteil ist, wenn sie sagen, dass Sie problemlos auf Socket wechseln können.io)

"Wir wollen eine unbegrenzte Anzahl von Verbindungen haben"

Wir wollen uns keine Sorgen um Einschränkungen machen.

Lasst uns beginnen.

Ich benutze Vagrant / Homestead.

Dafür müssen wir über Events Broadcasting lesen.

Dinge zu beachten (also muss ich nicht wiederholen):

1. Sollte die Schnittstelle für Ereignisse für Ereignisse

2. Aktivieren von Broadcastrouten und Verwenden von Routen/Kanälen.PHP zur Authentifizierung von Benutzern

3. Öffentlicher Kanal - Jeder kann zuhören

4. Privatkanal - Sie müssen Benutzer autorisieren, bevor sie sich einem Kanal anschließen können

5. Präsenzkanal - wie privat, aber Sie können viele zusätzliche Metadaten auf diesem Kanal übergeben und eine Liste von Personen erhalten, die sich dem Kanal angeschlossen haben.Sender () Ereignismethode

Erstellen Sie Ihre Veranstaltung

Php Artisan Make: Event Messagepushed

Sie können sogar das spezifische Beispiel in der Dokumentation von Ereignisübertragung befolgen. (Was wir wirklich).

Redis installieren

Vorher hatte ich tatsächlich Warteschlangen mit Supervisor/Redis/Horizont eingerichtet. Horizon ist großartig und finden Sie hier Informationen dazu https: // laravel.com/docs/5.6/Horizont

Sobald Sie Ihre Warteschlangen funktionieren, muss dieses Messagepushed -Ereignis Warteschlangen verwenden.

HINWEIS: Damit dies funktioniert, stellen Sie sicher, dass Sie Ihre bearbeiten .Env -Datei:

Broadcast_driver = Redis
Queue_driver = Redis (dies stammt eigentlich aus dem Horizon -Setup, aber wir werden das für später brauchen)
Redis_host = 127.0.0.1
Redis_password = null
Redis_port = 6379

Installieren Sie Laravel Echo Server

In diesem Teil installieren wir Socket tatsächlich.IO-Server, der in Laravel-Echo-Server gebündelt ist. Hier finden Sie darüber: https: // github.com/tlaverdure/laravel-echo-Server

Hinweis: Überprüfen Sie die Anforderungen oben!

Führen Sie Folgendes aus (wie im Dokument angegeben)

NPM Installation -g Laravel-Echo-Server

Und dann führen Sie den Init durch, um Ihren Laravel-Echo-Server zu erhalten.JSON -Datei, die im App -Stammerzeug generiert wird (das wir konfigurieren müssen).

Laravel-Echo-Server init

Sobald Sie Ihren Laravel-Echo-Server generiert haben.JSON -Datei sollte sie so aussehen.

"Authost": "http: // Local-Website.App ",
"Authendpoint": "/Broadcasting/Auth",
"Kunden": [

"Appid": "my-App-id",
"Key": "My-Kee-generiert mit Init-Command"

],
"Datenbank": "Redis",
"DatabaseConfig":
"Redis": ,
"Sqlite":
"Databasepath": "/Datenbank/Laravel-Echo-Server.Sqlite "
,
"Port": "6379",
"Host": "127.0.0.1 "
,
"DevMode": Falsch,
"Host": Null,
"Port": "6001",
"Protokoll": "http",
"Socketio": ,
"SSLCertPath": "",
"SSLKEYPATH": "",
"sslcertchainpath": "",
"sslpasshrase": ""

Hinweis: Wenn Sie dies auf Ihren öffentlichen Server weitergeben möchten, addieren Sie Laravel-Echo-Server.Json zu deinem .Gitignore. Generieren Sie diese Datei auf dem Server. Andernfalls müssen Sie Ihren Authost ständig ändern.

Führen Sie Ihren Laravel -Echo -Server aus

Sie müssen es ausführen, um WebSockets zu starten.

Laravel-Echo-Server-Start

(In Ihrer Wurzel-wo Ihr Laravel-Echo-Server.JSON wird platziert)

Es sollte erfolgreich beginnen. (Jetzt möchten wir dies dem Supervisor auf Ihrem Server hinzufügen, damit es automatisch gestartet und für den Fall neu gestartet wird.)

In Ihrem/etc/laufvisor/conf.d/laravel-echo.conf (erstellen Sie diese Datei einfach in Ihrem Conf.D Ordner) Legen Sie Folgendes ein:

[Programm: Laravel-Echo]
Verzeichnis =/var/www/my-Website-Solder
process_name =%(programm_name) s _%(process_num) 02d
Befehl = Laravel-Echo-Server-Start
autostart = true
autorestart = true
user = your-linux-user
numprocs = 1
redirect_stderr = true
stdout_logfile =/var/www/my-website-molder/speicher/logs/echo.Protokoll

Sobald Sie in Ihrer Laravel -Wurzel positioniert sind, können Sie laufen

PWD

Um den Pfad für Ihr "Verzeichnis" oben und "stdout_logfile" -Refix zu erhalten.

Ihr Benutzer ist Ihr Linux -Benutzer (Vagrant oder Ubuntu oder ein anderer)

Speichern Sie die Datei und gehen Sie aus.

Wenn Sie Vim Laravel-Echo verwendet haben.Conf Conf, drücken Sie dann auf I (wie Istanbul) auf Ihrer Tastatur, um eine Datei mit VIM zu bearbeiten, und geben Sie dann ESC an: WQ! Um die Datei zu schließen und zu speichern.

Als nächstes müssen wir die folgenden Befehle ausführen:

sudo Supervisorctl stoppen alle
Sudo Supervisorctl Lesen Sie
Sudo Supervisorctl Reload

Nach dieser Überprüfung, um festzustellen, ob Laravel Echo läuft

Sudo Supervisorctl Status

Installieren Sie Laravel Echo und Socket IO -Client

NPM Install-Save Laravel-Echo
NPM Installation -Save Socket.IO-Client
[/c] c
Und dann in Ihrer Bootstrap.JS (ich benutze Vue JS) Registrieren Sie Ihr Echo
[CC Lang = "Bash" entkommen = "True" Width = "800"]
Echo von "Laravel-Echo" importieren
Fenster.IO = fordert ('Socket.IO-Client ');
// haben dies für den Fall, dass Sie aufhören, Ihre zu laufen
Laravel Echo Serverif (Typeof IO !== 'undefined')
Fenster.Echo = new echo (
Sender: 'Sockel.io ',
Host: Fenster.Standort.Hostname + ': 6001',
);

Überprüfen Sie nun erneut, wie Sie Ihre Ereignisse auf bestimmten Kanälen anhören können.

Nach der oben genannten Dokumentation zu Laravel Broadcasting, die Sie oben geteilt haben, stellen Sie Ihre Broadcaston () -Methode fest, um ein neues Prescechannel zurückzugeben (ich werde den speziellen Fall, den ich getan habe. Ich finde, dass dies eine höhere Komplexität ist als nur die Verwendung eines öffentlichen Kanals, damit wir ohne Probleme skalieren können). Dann möchten wir auf diesen Kanal auf der JavaScript -Seite (Frontend) zuhören (Frontend).

Hier ist ein konkretes Beispiel:

1. Ich schob ein Ereignis auf einen Präsenzkanal (ich hatte es mit Umfragen zu tun)

public function Broadcaston ()
Return New Presencechannel ('Survey.'' . $ this-> survey-> id);

2. Nachdem Sie die Veranstaltung überschritten haben, wird es die Kanäle durchlaufen.Php. Dort möchten wir eine Autorisierung für diesen Benutzer erstellen. (Denken Sie daran, ein Array für die Berechtigung der Präsenzkanal und nicht für einen Booleschen zurückzugeben.)

Sendung :: Channel ('Umfrage.survey_id ', function ($ user, $ survey_id) return
['id' => $ user-> id, 'image' => $ user-> image (), 'full_name' => $ user-> full_name];);

3. Dann in meiner VUEJS -Komponente, die auf der Seite, die ich überwachen möchte, lädt ich eine Methode, die von der erstellten () -Methode auf der Last initiiert wird:

Hörenforbroadcast (survey_id)
Echo.beitreten ('Umfrage.' + survey_id)
.Hier ((Benutzer) =>
Das.user_viewing = user;
Das.$ forceUpdate ();
)
.Joining ((Benutzer) =>
if (das.checkiFuSeralReadyViewingsurvey (Benutzer))
Das.user_viewing.Push (Benutzer);
Das.$ forceUpdate ();

)
.verlassen ((user) =>
Das.removeViewinguser (Benutzer);
Das.$ forceUpdate ();
);
,

Ich habe hier offensichtlich einen Code herausgezogen.
Und das wäre es wirklich.

Ich hoffe, Sie konnten folgen, als ich versuchte, so detailliert zu sein, wie ich kann.

Glückliche Codierung!