Unlimited Plugins, WordPress themes, videos & courses! Unlimited asset downloads! From $16.50/m
Advertisement
  1. Code
  2. Laravel 5
Code

Wie Laravel Broadcasting funktioniert

by
Difficulty:IntermediateLength:LongLanguages:

German (Deutsch) translation by Wei Zhang (you can also view the original English article)

Heute werden wir das Konzept des Broadcasting im Laravel Web Framework untersuchen. Es ermöglicht Ihnen, Benachrichtigungen an die Clientseite zu senden, wenn auf der Serverseite etwas passiert. In diesem Artikel werden wir die Pusher-Bibliothek von Drittanbietern verwenden, um Benachrichtigungen an die Clientseite zu senden.

Wenn Sie schon immer Benachrichtigungen vom Server an den Client senden wollten, wenn auf einem Server in Laravel etwas passiert, suchen Sie nach der Sendefunktion.

Angenommen, Sie haben eine Messaging-Anwendung implementiert, mit der Benutzer Ihres Systems Nachrichten untereinander senden können. Wenn Benutzer A nun eine Nachricht an Benutzer B sendet, möchten Sie Benutzer B in Echtzeit benachrichtigen. Sie können ein Popup oder eine Warnmeldung anzeigen, die Benutzer B über die neue Nachricht informiert!

Es ist der perfekte Anwendungsfall, um das Konzept des Broadcasting in Laravel durchzugehen, und das werden wir in diesem Artikel implementieren.

Wenn Sie sich wundern, wie der Server Benachrichtigungen an den Client senden kann, verwendet es Sockets unter der Haube, um es zu erreichen. Lassen Sie uns den grundlegenden Ablauf von Sockets verstehen, bevor wir tiefer in die tatsächliche Implementierung eintauchen.

  • Zunächst benötigen Sie einen Server, der das Web-Sockets-Protokoll unterstützt und dem Client ermöglicht, eine Web-Socket-Verbindung herzustellen.
  • Sie könnten Ihren eigenen Server implementieren oder einen Dienst von Drittanbietern wie Pusher verwenden. Wir werden letzteres in diesem Artikel bevorzugen.
  • Der Client initiiert eine Web-Socket-Verbindung mit dem Web-Socket-Server und erhält bei erfolgreicher Verbindung eine eindeutige Kennung.
  • Sobald die Verbindung erfolgreich ist, abonniert der Client bestimmte Kanäle, an denen er Ereignisse empfangen möchte.
  • Unter dem abonnierten Kanal registriert der Client schließlich Ereignisse, die er hören möchte.
  • Wenn ein bestimmtes Ereignis auf der Serverseite eintritt, informieren wir den Web-Socket-Server über den Kanalnamen und den Ereignisnamen.
  • Und schließlich überträgt der Web-Socket-Server dieses Ereignis an registrierte Clients auf diesem bestimmten Kanal.

Mach dir keine Sorgen, wenn es auf einmal zu viel aussieht; Sie werden den Dreh raus bekommen, während wir uns durch diesen Artikel bewegen.

Als nächstes schauen wir uns die Standard-Broadcast-Konfigurationsdatei in config/broadcasting.php an.

Standardmäßig unterstützt Laravel mehrere Broadcast-Adapter im Kern selbst.

In diesem Artikel werden wir den Pusher Broadcast Adapter verwenden. Zu Debuggingzwecken können Sie auch den Protokolladapter verwenden. Wenn Sie den log Adapter verwenden, erhält der Client natürlich keine Ereignisbenachrichtigungen, und er wird nur in der Datei laravel.log protokolliert.

Ab dem nächsten Abschnitt werden wir gleich in die eigentliche Umsetzung des oben genannten Anwendungsfalles eintauchen.

Einrichten der Voraussetzungen

Im Rundfunk gibt es verschiedene Arten von Kanälen - öffentlich, privat und Präsenz. Wenn Sie Ihre Ereignisse öffentlich übertragen möchten, ist dies der öffentliche Kanal, den Sie verwenden sollten. Umgekehrt wird der private Kanal verwendet, wenn Sie Ereignisbenachrichtigungen auf bestimmte private Kanäle beschränken möchten.

In unserem Anwendungsfall möchten wir Benutzer benachrichtigen, wenn sie eine neue Nachricht erhalten. Um Broadcastbenachrichtigungen empfangen zu können, muss der Benutzer angemeldet sein. Daher müssen wir in unserem Fall den privaten Kanal verwenden.

Core-Authentifizierungsfunktion

Zunächst müssen Sie das standardmäßige Laravel-Authentifizierungssystem aktivieren, damit Funktionen wie Registrierung, Anmeldung und Ähnliches sofort einsatzbereit sind. Wenn Sie nicht sicher sind, wie Sie das tun, erhalten Sie in der offiziellen Dokumentation einen schnellen Einblick.

Pusher SDK-Installation und Konfiguration

Da wir den Pusher-Drittanbieterdienst als unseren Web-Socket-Server verwenden, müssen Sie ein Konto erstellen und sicherstellen, dass Sie über die erforderlichen API-Anmeldeinformationen für Ihre Postregistrierung verfügen. Wenn Sie Probleme beim Erstellen haben, zögern Sie nicht, mich im Kommentarbereich zu fragen.

Als nächstes müssen wir das Pusher PHP SDK installieren, damit unsere Laravel-Anwendung Broadcast-Benachrichtigungen an den Pusher-Web-Socket-Server senden kann.

Führen Sie in Ihrem Laravel-Anwendungsstamm den folgenden Befehl aus, um es als ein Composer-Paket zu installieren.

Ändern wir nun die Broadcast-Konfigurationsdatei, um den Pusher-Adapter als Standard-Broadcast-Treiber zu aktivieren.

Wie Sie sehen können, haben wir den Standard-Broadcast-Treiber zu Pusher geändert. Wir haben auch Cluster- und verschlüsselte Konfigurationsoptionen hinzugefügt, die Sie von Ihrem Pusher-Konto erhalten haben sollten.

Außerdem ruft es Werte von Umgebungsvariablen ab. Stellen wir also sicher, dass wir die folgenden Variablen in der .env-Datei richtig setzen.

Als nächstes musste ich einige Änderungen an einigen Laravel-Kerndateien vornehmen, um sie mit dem neuesten Pusher SDK kompatibel zu machen. Natürlich empfehle ich nicht, Änderungen im Kern-Framework vorzunehmen, aber ich werde nur hervorheben, was zu tun ist.

Öffnen Sie die Datei vendor/laravel/framework/src/Illuminate / Broadcasting/Broadcasters/PusherBroadcaster.php. Ersetzen Sie einfach den Snippet use Pusher; mit usePusher\Pusher;.

Als nächstes öffnen wir die Datei vendor/laravel/framework/src/Illuminate/Broadcasting/BroadcastManager.php und nehmen eine ähnliche Änderung im folgenden Snippet vor.

Schließlich aktivieren wir den Broadcast-Service in der config/app.php, indem wir den Kommentar in der folgenden Zeile entfernen.

Bisher haben wir serverspezifische Bibliotheken installiert. Im nächsten Abschnitt werden wir Client-Bibliotheken durchgehen, die ebenfalls installiert werden müssen.

Pusher und Laravel Echo Libraries - Installation und Konfiguration

Beim Broadcasting ist es die Verantwortung der Client-Seite, Kanäle zu abonnieren und auf gewünschte Ereignisse zu hören. Unter der Haube wird es durch Öffnen einer neuen Verbindung zum Web-Socket-Server erreicht.

Glücklicherweise müssen wir kein komplexes JavaScript implementieren, da Laravel bereits eine nützliche Client-Bibliothek, Laravel Echo, zur Verfügung stellt, die uns hilft, mit Sockets auf der Client-Seite umzugehen. Außerdem unterstützt es den Pusher-Service, den wir in diesem Artikel verwenden werden.

Sie können Laravel Echo mit dem NPM-Paketmanager installieren. Natürlich müssen Sie node und npm an erster Stelle installieren, wenn Sie sie noch nicht haben. Der Rest ist ziemlich einfach, wie im folgenden Ausschnitt gezeigt.

Was uns interessiert, ist die Datei node_modules/laravel-echo/dist/echo.js, die Sie in public/echo.js kopieren sollten.

Ja, ich verstehe, es ist ein bisschen übertrieben, nur eine einzige JavaScript-Datei zu erhalten. Wenn Sie diese Übung nicht durchführen möchten, können Sie die Datei echo.js von meinem GitHub herunterladen.

Damit sind wir mit der Einrichtung unserer Client-Bibliotheken fertig.

Back-End-Dateieinrichtung

Denken Sie daran, dass wir über die Einrichtung einer Anwendung gesprochen haben, die es Benutzern unserer Anwendung ermöglicht, Nachrichten an andere zu senden. Auf der anderen Seite senden wir Broadcast-Benachrichtigungen an angemeldete Benutzer, wenn sie eine neue Nachricht von anderen Benutzern erhalten.

In diesem Abschnitt erstellen wir die Dateien, die für die Implementierung des von uns gesuchten Anwendungsfalls erforderlich sind.

Lassen Sie uns zunächst das Message-Modell erstellen, das Nachrichten enthält, die von Benutzern gesendet werden.

Wir müssen auch einige Felder wie to, from und message zu unserer Nachrichtentabelle hinzufügen. Lassen Sie uns also die Migrationsdatei ändern, bevor Sie den Migrationsbefehl ausführen.

Lassen Sie uns nun den migrate-Befehl ausführen, der die Nachrichtentabelle in der Datenbank erstellt.

Wann immer Sie ein benutzerdefiniertes Ereignis in Laravel auslösen möchten, sollten Sie eine Klasse für dieses Ereignis erstellen. Je nach Art des Ereignisses reagiert Laravel entsprechend und ergreift die notwendigen Maßnahmen.

Wenn das Ereignis ein normales Ereignis ist, ruft Laravel die zugehörigen Listener-Klassen auf. Wenn das Ereignis jedoch vom Broadcast-Typ ist, sendet Laravel dieses Ereignis an den Web-Socket-Server, der in der Datei config/broadcasting.php konfiguriert ist.

Da wir in unserem Beispiel den Pusher-Dienst verwenden, sendet Laravel Ereignisse an den Pusher-Server.

Verwenden Sie den folgenden Befehl, um eine benutzerdefinierte Ereignisklasse zu erstellen: NewMessageNotification.

Das sollte die Klasse app/Events/NewMessageNotification.php erstellen. Lassen Sie uns den Inhalt dieser Datei durch Folgendes ersetzen.

Beachten Sie, dass die NewMessageNotification-Klasse die ShouldBroadcastNow-Schnittstelle implementiert. Wenn wir also ein Ereignis auslösen, weiß Laravel, dass dieses Ereignis gesendet werden sollte.

Tatsächlich könnten Sie auch die ShouldBroadcast-Schnittstelle implementieren, und Laravel fügt der Ereigniswarteschlange ein Ereignis hinzu. Es wird vom Event Queue Worker verarbeitet, wenn es dazu die Möglichkeit hat. In unserem Fall möchten wir es sofort übertragen, weshalb wir die ShouldBroadcastNow-Schnittstelle verwendet haben.

In unserem Fall möchten wir eine Nachricht anzeigen, die der Benutzer erhalten hat. Daher haben wir das Message-Modell im Konstruktorargument übergeben. Auf diese Weise werden die Daten zusammen mit dem Ereignis weitergegeben.

Als nächstes gibt es die broadcastOn-Methode, die den Namen des Kanals definiert, auf dem das Ereignis gesendet wird. In unserem Fall haben wir den privaten Kanal verwendet, da wir die Ereignisübertragung auf angemeldete Benutzer beschränken möchten.

Die Variable $this->message->to bezieht sich auf die ID des Benutzers, an den das Ereignis gesendet wird. Dadurch wird der Kanalname effektiv wie user.{USER_ID}.

Bei privaten Kanälen muss sich der Client authentifizieren, bevor er eine Verbindung zum Web-Socket-Server herstellt. Es stellt sicher, dass Ereignisse, die auf privaten Kanälen ausgestrahlt werden, nur an authentifizierte Clients gesendet werden. In unserem Fall bedeutet dies, dass nur eingeloggte Benutzer unseren Kanal user.{USER_ID} abonnieren können.

Wenn Sie die Laravel Echo Client-Bibliothek für ein Kanalabonnement verwenden, haben Sie Glück! Es kümmert sich automatisch um den Authentifizierungsteil und Sie müssen nur die Kanalrouten definieren.

Lassen Sie uns eine Route für unseren privaten Kanal in der Datei routes/channels.php hinzufügen.

Wie Sie sehen können, haben wir die user.{toUserId} -Route für unseren privaten Kanal definiert.

Das zweite Argument der Channel-Methode sollte eine Closure-Funktion sein. Laravel übergibt den aktuell angemeldeten Benutzer automatisch als erstes Argument der Closure-Funktion und das zweite Argument wird normalerweise aus dem Kanalnamen abgerufen.

Wenn der Client versucht, den privaten Kanal user。{USER_ID} zu abonnieren, führt die Laravel Echo-Bibliothek die erforderliche Authentifizierung im Hintergrund mithilfe des XMLHttpRequest-Objekts oder besser bekannt als XHR durch.

Bis jetzt sind wir mit dem Setup fertig, also lasst uns weitermachen und es testen.

Front-End-Dateieinrichtung

In diesem Abschnitt erstellen wir die Dateien, die zum Testen unseres Anwendungsfalls erforderlich sind.

Gehen wir voran und erstellen Sie eine Controller-Datei unter app/Http/Controllers/MessageController.php mit den folgenden Inhalten.

In der Index-Methode verwenden wir die broadcast-Ansicht, also erstellen wir auch die Ansichtsdatei resources /views/broadcast.blade.php.

Und natürlich müssen wir auch Routen in der Datei routes/web.phphinzufügen.

In der Konstruktor-Methode der Controller-Klasse können Sie sehen, dass wir die auth-Middleware verwendet haben, um sicherzustellen, dass nur von angemeldeten Benutzern auf Controller-Methoden zugegriffen wird.

Als nächstes gibt es die Index-Methode, die die broadcast-Ansicht rendert. Lassen Sie uns den wichtigsten Code in der View-Datei einlesen.

Zuerst laden wir die erforderlichen Client-Bibliotheken, Laravel Echo und Pusher, um die Web-Socket-Verbindung zum Pusher-Web-Socket-Server zu öffnen.

Als Nächstes erstellen wir die Instanz von Echo, indem wir Pusher als unseren Broadcast-Adapter und andere notwendige Pusher-bezogene Informationen bereitstellen.

Wenn wir weiter gehen, verwenden wir die private Methode von Echo, um den privaten Kanal user.{USER_ID} zu abonnieren. Wie bereits erwähnt, muss sich der Client authentifizieren, bevor er den privaten Kanal abonniert. Daher führt das Echo-Objekt die notwendige Authentifizierung aus, indem es das XHR im Hintergrund mit den notwendigen Parametern sendet. Schließlich versucht Laravel, die Route user.{USER_ID} zu finden, die mit der Route übereinstimmen muss, die wir in der Datei routes/channels.phpdefiniert haben.

Wenn alles gut geht, sollte eine Web-Socket-Verbindung mit dem Pusher-Web-Socket-Server geöffnet sein, und die Ereignisse werden auf dem Kanal user.{USER_ID} aufgelistet. Ab diesem Zeitpunkt können wir alle eingehenden Ereignisse auf diesem Kanal empfangen.

In unserem Fall möchten wir auf das NewMessageNotification-Ereignis warten und haben dafür die listen-Methode des Echo-Objekts verwendet. Um die Dinge einfach zu halten, warnen wir nur die Nachricht, die wir vom Pusher-Server erhalten haben.

Das war das Setup für den Empfang von Ereignissen vom Web-Sockets-Server. Als Nächstes gehen wir die send-Methode in der Controller-Datei durch, die das Broadcast-Ereignis auslöst.

Lassen Sie uns schnell den Code der send-Methode einlesen.

In unserem Fall werden wir angemeldete Benutzer benachrichtigen, wenn sie eine neue Nachricht erhalten. Wir haben versucht, dieses Verhalten in der send-Methode nachzuahmen.

Als Nächstes haben wir die event-Hilfsfunktion verwendet, um das NewMessageNotification-Ereignis auszulösen. Da das NewMessageNotification-Ereignis vom Typ ShouldBroadcastNow ist, lädt Laravel die Standard-Broadcast-Konfiguration aus der Datei config/broadcasting.php. Schließlich wird das NewMessageNotification-Ereignis an den konfigurierten Web-Socket-Server im Channel user.{USER_ID} gesendet.

In unserem Fall wird das Ereignis an den Pusher-Web-Socket-Server auf dem Kanal user.{USER_ID}gesendet. Wenn die ID des Empfängerbenutzers 1 ist, wird das Ereignis über den user.1-Kanal gesendet.

Wie bereits erwähnt, haben wir bereits ein Setup, das die Ereignisse auf diesem Kanal abhört. Daher sollte es in der Lage sein, dieses Ereignis zu empfangen, und dem Benutzer wird die Alarmbox angezeigt!

Gehen wir voran und gehen Sie durch, wie Sie den Anwendungsfall, den wir bisher erstellt haben, testen sollen.

Öffnen Sie in Ihrem Browser die URL http://your-laravel-site-domain/message/index. Wenn Sie noch nicht angemeldet sind, werden Sie zum Anmeldebildschirm weitergeleitet. Sobald Sie angemeldet sind, sollten Sie die zuvor definierte Broadcast-Ansicht sehen - nichts Besonderes.

In der Tat hat Laravel schon eine ganze Menge Arbeit im Hintergrund für dich erledigt. Da wir die Pusher.logToConsole-Einstellung aktiviert haben, die von der Pusher-Client-Bibliothek bereitgestellt wird, protokolliert sie alles in der Browser-Konsole zu Debugging-Zwecken. Lassen Sie uns sehen, was in der Konsole protokolliert wird, wenn Sie auf die Seite http://your-laravel-site-domain/message/index zugreifen.

Es hat die Web-Socket-Verbindung mit dem Pusher-Web-Socket-Server geöffnet und sich selbst abonniert, um Ereignisse auf dem privaten Kanal abzuhören. Natürlich könnten Sie in Ihrem Fall einen anderen Kanalnamen haben, basierend auf der ID des Benutzers, mit dem Sie angemeldet sind. Lassen Sie uns jetzt diese Seite offen halten, während wir uns bewegen, um die send-Methode zu testen.

Als nächstes öffnen wir die URL http://your-laravel-site-domain/message/send auf der anderen Registerkarte oder in einem anderen Browser. Wenn Sie einen anderen Browser verwenden möchten, müssen Sie sich anmelden, um auf diese Seite zugreifen zu können.

Sobald Sie die Seite http://your-laravel-site-domain/message/send öffnen, sollten Sie eine Warnmeldung auf der anderen Registerkarte unter http://your-laravel-site-domain/message/index.

Lassen Sie uns zur Konsole navigieren, um zu sehen, was gerade passiert ist.

Wie Sie sehen können, erfahren Sie, dass Sie gerade das Ereignis App\Events\NewMessageNotification vom Pusher-Web-Socket-Server auf dem Kanal private-user.2 erhalten haben.

In der Tat können Sie sehen, was da draußen am Pusher-Ende passiert. Gehen Sie zu Ihrem Pusher-Konto und navigieren Sie zu Ihrer Anwendung. Unter der Debug Console sollten Sie in der Lage sein, Nachrichten zu sehen, die protokolliert werden.

Pusher Dashboard

Und das bringt uns zum Ende dieses Artikels! Hoffentlich war es nicht zu viel in einem einzigen Schritt, da ich versucht habe, die Dinge nach meinem besten Wissen zu vereinfachen.

Fazit

Heute haben wir eines der am wenigsten diskutierten Features der Laravel-Übertragung durchlaufen. Es ermöglicht Ihnen, Echtzeitbenachrichtigungen über Web-Sockets zu senden. Im Laufe dieses Artikels haben wir ein Beispiel aus der Praxis erstellt, das das oben genannte Konzept demonstriert.

Ja, ich weiß, es ist eine Menge Zeug in einem einzigen Artikel zu verdauen, also nutzen Sie den Kommentar-Feed unten, falls Sie während der Implementierung in Schwierigkeiten geraten.

Advertisement
Advertisement
Looking for something to help kick start your next project?
Envato Market has a range of items for sale to help get you started.