Rundfunksystem

• Einführung
  • Konfiguration
  • Anforderungen an Fahrer
• Konzeptübersicht
  • Beispielprogramm verwenden
• Sendeereignisse definieren
  • Broadcast-Name
  • Broadcast-Daten
  • Broadcast-Warteschlange
  • Sendebedingungen
• Autorisierter Kanal
  • Autorisierungsroute definieren
  • Autorisierungsrückruf definieren
  • Kanalklasse definieren
• Broadcast-Ereignis
  • Nur an andere senden
• Übertragung empfangen
  • Installieren Laravel Echo
  • Auf Ereignisse achten
  • Kanal verlassen
  • Namespace
• Präsenz Kanal
  • Präsenzkanal autorisieren
  • Präsenzkanal beitreten
  • An Präsenz senden Kanal
• Kundenereignis
• Nachrichtenbenachrichtigung

Einführung

In der Neuzeit In Webanwendungen werden WebSockets verwendet, um in Echtzeit sofort aktualisierte Benutzeroberflächen zu implementieren. Wenn die Daten auf dem Server aktualisiert werden, werden die Aktualisierungsinformationen über die WebSocket-Verbindung zur Verarbeitung an den Client gesendet. Dies ist eine zuverlässigere und effizientere Option als die ständige Abfrage der Anwendung.

Um Sie beim Erstellen dieser Art von Anwendung zu unterstützen, erleichtert Laravel die „Übertragung“ von Ereignissen über WebSocket-Verbindungen. Durch die Übertragung von Laravel-Ereignissen können Sie denselben Ereignisnamen zwischen serverseitigen und clientseitigen JavaScript-Anwendungen verwenden.

{Hinweis} Bevor Sie mehr über die Übertragung von Ereignissen erfahren, stellen Sie bitte sicher, dass Sie die gesamte Dokumentation zu Laravel-Ereignissen und -Zuhörern gelesen haben.

Konfiguration

Alle Konfigurationen zur Ereignisübertragung werden in der config/broadcasting.phpKonfigurationsdatei gespeichert. Laravel wird mit mehreren Broadcast-Treibern geliefert: Pusher, Redis und einem log-Treiber für lokale Entwicklung und Debugging. Darüber hinaus gibt es einen null-Treiber, mit dem Sie das Broadcast-System vollständig ausschalten können. Beispielkonfigurationen für jeden Treiber finden Sie in der config/broadcasting.php-Konfigurationsdatei.

Rundfunkdienstanbieter

Sie müssen sich registrieren AppProvidersBroadcastServiceProvider, bevor Sie eine Veranstaltung übertragen können. Für eine neue Laravel-Anwendung müssen Sie lediglich den Anbieter im config/app.php-Array der providers-Konfigurationsdatei auskommentieren. Dieser Anbieter ermöglicht Ihnen die Registrierung von Broadcast-Autorisierungsrouten und Rückrufen.

CSRF-Token

Laravel Echo ist erforderlich, um auf das CSRF-Token der aktuellen Sitzung zuzugreifen. Sie sollten überprüfen, ob das HTML-Element head Ihrer Anwendung ein meta definiert, das das CSRF-Token enthält Tags:

<meta name="csrf-token" content="{{ csrf_token() }}">

Fahreranforderungen

Pusher

Wenn Sie Verwenden Sie Pusher Um Ereignisse zu übertragen, installieren Sie das Pusher PHP SDK mit dem Composer-Paketmanager:

composer require pusher/pusher-php-server "~3.0"

Anschließend müssen Sie Ihr Pusher-Zertifikat in der config/broadcasting.php-Konfigurationsdatei konfigurieren. Diese Datei enthält bereits eine Pusher-Beispielkonfiguration, sodass Sie schnell Ihren Pusher-Schlüssel, Ihr Geheimnis und Ihre Anwendungs-ID angeben können. Mit dem config/broadcasting.php-Konfigurationselement der pusher-Datei können Sie auch zusätzliche options angeben, die von Pusher unterstützt werden, zum Beispiel Cluster:

'options' => [ 
   'cluster' => 'eu',    
   'encrypted' => true
 ],

Wenn Pusher mit Laravel Echo verwendet wird, Sie sollten resources/assets/js/bootstrap.js als erforderlichen Sender angeben, wenn Sie das Echo-Objekt in der Datei pusher instanziieren :

import Echo from "laravel-echo"window.Pusher = require('pusher-js');
window.Echo = new Echo({
    broadcaster: 'pusher',
    key: 'your-pusher-key'
 });

Redis

Wenn Sie Redis Broadcaster verwenden, installieren Sie bitte die Predis-Bibliothek:

composer require predis/predis

Redis Broadcaster verwendet die Veröffentlichungs-/Abonnementfunktion von Redis Broadcast-Nachrichten; Sie müssen es jedoch noch mit einem WebSocket kombinieren, der Nachrichten von Redis empfangen kann Der Server ist gekoppelt, um Nachrichten an Ihren WebSocket-Kanal zu senden.

Wenn der Redis-Broadcaster ein Ereignis veröffentlicht, wird das Ereignis auf dem angegebenen Kanal veröffentlicht und die übertragenen Daten sind eine JSON-codierte Zeichenfolge. Diese Zeichenfolge enthält den Ereignisnamen, data-Daten und den Benutzer, der die Ereignis-Socket-ID generiert hat (falls verfügbar).

Socket.IO

Wenn Sie einen Redis-Broadcaster mit einem Socket.IO-Server koppeln möchten, müssen Sie die Socket.IO-JavaScript-Clientbibliothek in Ihre Anwendung einbinden. Sie können es über den NPM-Paketmanager installieren:

npm install --save socket.io-client

Anschließend müssen Sie beim Instanziieren von Echo den socket.io Connector und host angeben.

import Echo from "laravel-echo"window.io = require('socket.io-client');
window.Echo = new Echo({
    broadcaster: 'socket.io',
    host: window.location.hostname + ':6001'
 });

Schließlich müssen Sie einen Laravel-kompatiblen Socket.IO-Server ausführen. Laravel verfügt offiziell nicht über eine integrierte Socket.IO-Serverimplementierung; Sie können jedoch ein von der Community betriebenes und gepflegtes Projekt tlaverdure/laravel-echo-server auswählen, das derzeit auf GitHub gehostet wird.

Warteschlangenanforderungen

Bevor Sie mit der Übertragung von Ereignissen beginnen, müssen Sie auch einen Warteschlangen-Listener konfigurieren und ausführen. Die gesamte Ereignisübertragung erfolgt über Warteschlangenaufgaben, sodass die Reaktionszeit der Anwendung nicht wesentlich beeinträchtigt wird.

Konzeptübersicht

Laravels Event-Broadcast ermöglicht Ihnen die Verwendung von treiberbasierten WebSockets, um serverseitige Laravel-Events zu übertragen zur clientseitigen JavaScript-Anwendung. Das aktuelle Laravel wird mit Pusher und Redis-Treiber geliefert. Durch die Verwendung des Javascript-Pakets von Laravel Echo können wir Ereignisse problemlos auf der Clientseite konsumieren.

Veranstaltungen werden über „Kanäle“ übertragen, die als öffentlich oder privat bezeichnet werden können. Jeder Besucher kann einen öffentlichen Kanal ohne Autorisierung oder Authentifizierung abonnieren. Wenn er jedoch einen privaten Kanal abonnieren möchte, muss er für den Kanal authentifiziert und autorisiert werden.

Verwendung eines Beispielprogramms

Bevor wir uns mit den einzelnen Komponenten der Event-Übertragung befassen, beginnen wir mit einem Elektronenstrahl Schauen Sie sich als Beispiel eine Unternehmenswebsite an. Wir werden nicht auf die Details der Konfiguration von Pusher oder Laravel Echo eingehen, da diese in anderen Kapiteln dieses Dokuments ausführlich besprochen werden.

In unserer Anwendung gehen wir davon aus, dass es eine Seite gibt, die es dem Benutzer ermöglicht, den Lieferstatus einer Bestellung anzuzeigen. Es gibt ein ShippingStatusUpdated-Ereignis, das ausgelöst wird, wenn der Lieferstatus aktualisiert wird:

event(new ShippingStatusUpdated($update));

ShouldBroadcastSchnittstelle

Wenn Benutzer ihre Bestellungen anzeigen, möchten wir nicht, dass sie die Seite aktualisieren müssen, um Statusaktualisierungen zu sehen. Wir hoffen, den Kunden proaktiv Aktualisierungsinformationen zu übermitteln, sobald es ein Update gibt. Wir müssen also das ShippingStatusUpdated-Ereignis markieren, um die ShouldBroadcast-Schnittstelle zu implementieren. Dies führt dazu, dass Laravel das Ereignis sendet, wenn es ausgelöst wird: Die

<?php
   namespace App\Events;
   use Illuminate\Broadcasting\Channel;
   use Illuminate\Queue\SerializesModels;
   use Illuminate\Broadcasting\PrivateChannel;
   use Illuminate\Broadcasting\PresenceChannel;
   use Illuminate\Broadcasting\InteractsWithSockets;
   use Illuminate\Contracts\Broadcasting\ShouldBroadcast;
   class ShippingStatusUpdated implements ShouldBroadcast{  
     /**
     * 有关配送状态更新的信息。
     *
     * @var string
     */  
   public $update;
  }

ShouldBroadcast-Schnittstelle erfordert, dass das Ereignis eine broadcastOn-Methode definiert. Diese Methode ist dafür verantwortlich, anzugeben, an welche Kanäle das Ereignis gesendet wird. In der generierten Ereignisklasse (über den Artisan-Befehl) ist bereits eine leere broadcastOn-Methode vordefiniert, sodass wir nur noch deren Details vervollständigen müssen. Wir hoffen, dass nur der Ersteller der Bestellung die Statusaktualisierung sehen kann, daher müssen wir das Ereignis auf dem privaten Kanal übertragen, der an diese Bestellung gebunden ist:

/**
 * 获取事件应该广播的频道。
 *
 * @return array
 */
 public function broadcastOn(){ 
    return new PrivateChannel('order.'.$this->update->order_id);
 }

Autorisierter Kanal

Denken Sie daran, dass Benutzer private Kanäle nur überwachen können, wenn sie dazu berechtigt sind. Wir können Autorisierungsregeln für Kanäle in der Datei routes/channels.php definieren. In diesem Fall müssen wir alle Benutzer authentifizieren, deren Ansicht den privaten Kanal order.1 abhört, um sicherzustellen, dass nur der tatsächliche Ersteller der Bestellung zuhören kann: Die Methode

Broadcast::channel('order.{orderId}', function ($user, $orderId) { 
   return $user->id === Order::findOrNew($orderId)->user_id;
});

channel erhält zwei Parameter: den Kanalname und eine Rückruffunktion, die true oder false zurückgibt, um anzugeben, ob der Benutzer berechtigt ist, den Kanal anzuhören.

Alle Autorisierungsrückrufe erhalten den aktuell authentifizierten Benutzer als ersten Parameter und alle zusätzlichen Platzhalterparameter als nachfolgende Parameter. In diesem Beispiel verwenden wir den Platzhalter {orderId}, um anzugeben, dass der „ID“-Teil des Kanalnamens ein Platzhalter ist.

Ereignisübertragungen abhören

Als nächstes müssen Sie nur noch auf Ereignisse in der JavaScript-Anwendung warten. Wir können dies mit Laravel Echo tun. Zuerst verwenden wir die Methode private, um den privaten Kanal zu abonnieren. Verwenden Sie dann die Methode listen, um auf das Ereignis ShippingStatusUpdated zu warten. Standardmäßig werden alle öffentlichen Eigenschaften des Ereignisses in das Broadcast-Ereignis einbezogen:

Echo.private(`order.${orderId}`)
    .listen('ShippingStatusUpdated', (e) => {
        console.log(e.update);  
      });

Broadcast-Ereignisse definieren

Um Laravel mitzuteilen, dass ein bestimmtes Ereignis gesendet werden muss, implementieren Sie einfach die IlluminateContractsBroadcastingShouldBroadcast-Schnittstelle in der Ereignisklasse. Diese Schnittstelle wurde in alle vom Framework generierten Ereignisklassen importiert, sodass Sie sie problemlos zu Ihren eigenen Ereignissen hinzufügen können. Für die Schnittstelle

ShouldBroadcast müssen Sie eine Methode implementieren: broadcastOn . Diese Methode gibt einen Kanal oder ein Array von Kanälen zurück, an den das Ereignis gesendet wird. Diese Kanäle müssen Instanzen von Channel , PrivateChannel oder PresenceChannel sein. Channel stellt einen öffentlichen Kanal dar, den jeder Benutzer abonnieren kann, während PrivateChannels und PresenceChannels private Kanäle darstellen, die eine Kanalautorisierung erfordern:

<?php
    namespace App\Events;
    use Illuminate\Broadcasting\Channel;
    use Illuminate\Queue\SerializesModels;
    use Illuminate\Broadcasting\PrivateChannel;
    use Illuminate\Broadcasting\PresenceChannel;
    use Illuminate\Broadcasting\InteractsWithSockets;
    use Illuminate\Contracts\Broadcasting\ShouldBroadcast;
    class ServerCreated implements ShouldBroadcast{ 
       use SerializesModels;    
       public $user;  
     /**
     * 创建一个新的事件实例。
     *
     * @return void
     */ 
      public function __construct(User $user) 
         {      
             $this->user = $user; 
         }   
      /**
     *获得事件广播的频道。
     *
     * @return Channel|array
     */   
   public function broadcastOn()  
     {     
        return new PrivateChannel('user.'.$this->user->id);   
      }
 }

Dann müssen Sie nur noch Folgendes tun so etwas wie Sie Lösen Sie das Ereignis wie gewohnt aus. Sobald das Ereignis ausgelöst wird, sendet eine Warteschlangenaufgabe das Ereignis automatisch an den von Ihnen angegebenen Broadcast-Treiber.

Broadcast-Name

Standardmäßig verwendet Laravel den Klassennamen des Ereignisses als Broadcast-Namen, um Ereignisse zu übertragen. Sie können jedoch auch eine broadcastAs-Methode in der Ereignisklasse definieren, um den Broadcast-Namen anzupassen:

/**
 * 事件的广播名称。
 *
 * @return string
 */
 public function broadcastAs(){
     return 'server.created';
  }

Wenn Sie die broadcastAs-Methode zum Anpassen des Broadcast-Namens verwenden, sollten Sie diese unbedingt hinzufügen, wenn Sie registrieren den Listener Das Präfix des vorherigen .. Dadurch wird Echo angewiesen, dem Ereignis nicht den Namespace der App voranzustellen:

.listen('.server.created', function (e) {
    ....
});

Broadcast data

When a When Wenn ein Ereignis übertragen wird, werden alle seine public-Attribute automatisch serialisiert und als Ereignisnutzlast gesendet, was Ihnen dies ermöglicht Alle öffentlichen Daten der Veranstaltung sind für die Anwendung zugänglich. Wenn Ihre Veranstaltung beispielsweise über eine einzelne öffentliche $user-Eigenschaft verfügt, die ein Eloquent-Modell enthält, dann wäre die Broadcast-Nutzlast der Veranstaltung:

{ 
   "user": {
       "id": 1,       
       "name": "Patrick Stewart"  
      ...  
      }
 }

Wenn Sie Ihre Broadcast-Nutzlast jedoch detaillierter steuern möchten, Sie können Ihrem Ereignis eine broadcastWith-Methode hinzufügen. Diese Methode gibt ein Array von Daten zurück, die Sie als Ereignisnutzlast senden möchten:

/**
 * 指定广播数据。
 *
 * @return array
 */
 public function broadcastWith(){
     return ['id' => $this->user->id];
 }

Broadcast-Warteschlange

Standardmäßig wird jedes Broadcast-Ereignis in die Standardwarteschlange verschoben, die der in der queue.php-Konfigurationsdatei angegebenen Standardwarteschlangenverbindung entspricht. Sie können ein broadcastQueue-Attribut in der Ereignisklasse definieren, um die vom Sender verwendete Warteschlange anzupassen. Für diese Eigenschaft müssen Sie den Warteschlangennamen angeben, den Sie beim Senden verwenden möchten:

/**
 * 事件被推送到的队列名称。
 *
 * @var string
 */
 public $broadcastQueue = 'your-queue-name';

Wenn Sie zum Senden von Ereignissen die Warteschlange sync anstelle des Standardwarteschlangentreibers verwenden möchten, können Sie ShouldBroadcastNow implementieren Schnittstelle anstelle von ShouldBroadcast :

<?php
  use Illuminate\Contracts\Broadcasting\ShouldBroadcastNow;
  class ShippingStatusUpdated implements ShouldBroadcastNow{ 
     //
  }

Broadcast-Bedingung

Manchmal möchten Sie nur senden, wenn es sich bei einer bestimmten Bedingung um wahre Ereignisse handelt. Sie können diese Bedingungen definieren, indem Sie der Ereignisklasse eine broadcastWhen-Methode hinzufügen:

/**
 * 判定事件是否可以广播。
 *
 * @return bool
 */
 public function broadcastWhen(){ 
    return $this->value > 100;
 }

Authorized Channel

Bei privaten Kanälen können Benutzer nur zuhören, wenn sie dazu berechtigt sind. Der Implementierungsprozess besteht darin, dass der Benutzer eine HTTP-Anfrage initiiert, die den Kanalnamen an Ihre Laravel-Anwendung überträgt, und Ihre Anwendung bestimmt, ob der Benutzer den Kanal abhören kann. Bei Verwendung von Laravel Echo werden HTTP-Anfragen zur Autorisierung von Abonnements für private Kanäle automatisch gesendet. Sie müssen jedoch weiterhin geeignete Routen definieren, um auf diese Anfragen zu reagieren.

Autorisierungsrouten definieren

Glücklicherweise können wir in Laravel ganz einfach Routen definieren, um auf Kanalautorisierungsanfragen zu reagieren. Im BroadcastServiceProvider, das mit Laravel geliefert wird, können Sie den Aufruf der Broadcast::routes-Methode sehen. Diese Methode registriert die /broadcasting/auth-Route zur Bearbeitung von Autorisierungsanfragen:

Broadcast::routes();

Broadcast::routes Die Methode platziert ihre Route automatisch in web in der Middleware-Gruppe; wenn Sie jedoch die angegebenen Attribute anpassen möchten, können Sie ein Array von Routenattributen an diese Methode übergeben:

Broadcast::routes($attributes);

Custom Authorization Endpoint

Standardmäßig verwendet Echo den Endpunkt /broadcasting/auth, um den Kanalzugriff zu autorisieren. Sie können jedoch Ihren eigenen Autorisierungsendpunkt angeben, indem Sie die Konfigurationsoption authEndpoint an die Echo-Instanz übergeben:

window.Echo = new Echo({
    broadcaster: 'pusher',
    key: 'your-pusher-key',
    authEndpoint: '/custom/endpoint/auth'
 });

Autorisierungsrückruf definieren

Als nächstes müssen wir die Logik definieren, die tatsächlich die Kanalautorisierung handhabt. Diese Logik erfolgt in der routes/channels.php-Datei, die mit der Anwendung geliefert wird. In dieser Datei können Sie die Methode Broadcast::channel verwenden, um den Rückruf der Kanalautorisierung zu registrieren:

Broadcast::channel('order.{orderId}', function ($user, $orderId) { 
   return $user->id === Order::findOrNew($orderId)->user_id;
});

channel Die Methode empfängt zwei Parameter: den Kanalnamen und eine Rückruffunktion, die true oder < zurückgibt 🎜> um anzugeben, ob der Benutzer berechtigt ist, den Kanal zu überwachen. false

, um anzugeben, dass der „ID“-Teil des Kanalnamens ein Platzhalter ist. {orderId}

Modellinstanz anstelle einer Zeichenfolge oder einer numerischen Bestell-ID zu erhalten: Order

use App\Order;
Broadcast::channel('order.{order}', function ($user, Order $order) { 
   return $user->id === $order->user_id;
 });

 Broadcast::channel('channel', function() { 
    // ...
  }, ['guards' => ['web', 'admin']])

-Datei sehr groß werden. Sie können also Kanalklassen anstelle von Abschlüssen verwenden, um Kanäle zu autorisieren. Um eine Kanalklasse zu generieren, verwenden Sie den Befehl routes/channels.php Artisan. Dieser Befehl platziert eine neue Kanalklasse im Verzeichnis make:channel. App/Broadcasting

php artisan make:channel OrderChannel

-Datei: routes/channels.php

use App\Broadcasting\OrderChannel;
Broadcast::channel('order.{order}', OrderChannel::class);

-Methode der Kanalklasse einfügen. Die join-Methode enthält dieselbe Logik, die Sie normalerweise in den Kanalautorisierungsabschluss einfügen würden. Natürlich können Sie auch die Kanalmodellbindung nutzen: join

<?php
    namespace App\Broadcasting;
    use App\User;use App\Order;
    class OrderChannel{   
     /**
     * 创建一个新的频道实例。
     *
     * @return void
     */ 
     public function __construct()  
       {     
          //  
        }   
     /**
     * 认证用户的频道访问权限。
     *
     * @param  \App\User  $user
     * @param  \App\Order  $order
     * @return array|bool
     */    
    public function join(User $user, Order $order) 
       {     
          return $user->id === $order->user_id;  
        }
   }

{Hinweis} Wie viele andere Klassen in Laravel werden Kanalklassen automatisch über den Service-Container aufgelöst. Daher können Sie im Konstruktor der Kanalklasse einen Typhinweis auf die erforderlichen Abhängigkeiten Ihrer Kanalklasse eingeben.

event(new ShippingStatusUpdated($update));

broadcast(new ShippingStatusUpdated($update));

broadcast(new ShippingStatusUpdated($update))->toOthers();

axios.post('/task', task) 
   .then((response) => {
        this.tasks.push(respo   
      });

var socketId = Echo.socketId();

npm install --save laravel-echo pusher-js

import Echo from "laravel-echo"
window.Echo = new Echo({
    broadcaster: 'pusher',
    key: 'your-pusher-key'
  });

window.Echo = new Echo({
    broadcaster: 'pusher',
    key: 'your-pusher-key',
    cluster: 'eu',
    encrypted: true
 });

const client = require('pusher-js');
window.Echo = new Echo({
    broadcaster: 'pusher',
    key: 'your-pusher-key',
    client: client
 });

Echo.channel('orders') 
   .listen('OrderShipped', (e) => {
        console.log(e.order.name);  
   });

Echo.private('orders') 
   .listen(...)    
   .listen(...)    
   .listen(...);

Echo.leaveChannel('orders');

Echo.leave('orders');

window.Echo = new Echo({
    broadcaster: 'pusher',
    key: 'your-pusher-key',    
    namespace: 'App.Other.Namespace'
 });

Echo.channel('orders') 
   .listen('.Namespace.Event.Class', (e) => {     
      //  
    });

Broadcast::channel('chat.{roomId}', function ($user, $roomId) { 
   if ($user->canJoinRoom($roomId)) {      
     return ['id' => $user->id, 'name' => $user->name];  
     }
   });

Echo.join(`chat.${roomId}`) 
   .here((users) => {    
       //  
     })    
   .joining((user) => {
        console.log(user.name);   
        }) 
    .leaving((user) => {
        console.log(user.name); 
       });

/**
 * 获得事件广播的频道。
 *
 * @return Channel|array
 */
 public function broadcastOn(){
     return new PresenceChannel('room.'.$this->message->room_id);
   }

broadcast(new NewMessage($message));
broadcast(new NewMessage($message))->toOthers();

Echo.join(`chat.${roomId}`) 
   .here(...)    
   .joining(...)    
   .leaving(...)    
   .listen('NewMessage', (e) => {  
         //   
     });

Echo.private('chat') 
   .whisper('typing', {
        name: this.user.name    
    });

Echo.private('chat')
    .listenForWhisper('typing', (e) => {
        console.log(e.name); 
     });

Echo.private(`App.User.${userId}`) 
   .notification((notification) => {
        console.log(notification.type); 
      });