Laravel-Entwicklung: Wie implementiert man die WebSockets-Kommunikation mit Laravel Echo?

Laravel ist ein beliebtes PHP-Framework mit vielen nützlichen Tools und Erweiterungsbibliotheken, mit denen Entwickler problemlos hochwertige Webanwendungen erstellen können. Unter anderem ist Laravel Echo ein leistungsstarkes WebSockets-Kommunikationstool, das Entwicklern dabei helfen kann, Echtzeitkommunikation in Webanwendungen zu erreichen.

In diesem Artikel stellen wir vor, wie man Laravel Echo verwendet und einen WebSockets-Server einrichtet, um Echtzeitkommunikation zu erreichen. Wir beschreiben zunächst kurz, was WebSockets und Laravel Echo sind, erklären dann, wie man Laravel Echo installiert und konfiguriert und zeigen schließlich, wie man Laravel Echo für die Kommunikation mit JavaScript-Clients verwendet.

Was sind WebSockets?

WebSockets ist ein Protokoll, das Echtzeit-Kommunikationsverbindungen zwischen Webanwendungen und Webservern ermöglicht. Diese Verbindung kann lange offen bleiben und ist bidirektional, sodass gleichzeitiges Lesen und Schreiben möglich ist.

Im Gegensatz zu HTTP-Anfragen ermöglicht das kontinuierliche Öffnen von WebSockets-Verbindungen dem Server, Daten in Echtzeit an den Client zu übertragen, ohne dass eine Abfrage oder lange Abfrage erforderlich ist. Dadurch können Webanwendungen schnell, effizient und in Echtzeit kommunizieren.

Was ist Laravel Echo?

Laravel Echo ist eine offizielle Erweiterungsbibliothek des Laravel-Frameworks, die Entwicklern bei der Implementierung der WebSockets-Kommunikation in Webanwendungen helfen kann. Es bietet eine einfache API zum einfachen Abonnieren von Broadcast-Kanälen und zum Weiterleiten von Nachrichten zwischen Client und Server mithilfe von JavaScript.

Richten Sie ganz einfach einen WebSockets-Server mit Laravel Echo und Laravel Pusher ein und nutzen Sie Broadcast-Kanäle, um die WebSockets-Kommunikation zu organisieren. Auf der Clientseite können wir JavaScript und Laravel Echo verwenden, um in Echtzeit auf Nachrichten zu warten und so Echtzeitkommunikation in Webanwendungen zu ermöglichen.

Laravel Echo installieren und konfigurieren

Bevor wir Laravel Echo verwenden, müssen wir die erforderliche Software installieren und konfigurieren: Laravel und Pusher PHP SDK. Laravel Echo und Pusher PHP SDK können über den Composer-Paketmanager installiert werden.

Zuerst müssen wir Laravel installieren:

composer create-project laravel/laravel your-project-name

Als nächstes müssen wir das Pusher-PHP-SDK installieren. Die Installation des Pusher-PHP-SDK kann durch Ausführen des folgenden Befehls erfolgen:

composer require pusher/pusher-php-server

Um Laravel Echo und das Pusher-PHP-SDK zu integrieren, müssen wir den Dienstanbieter und den Alias ​​in der Datei config/app.php hinzufügen:

// config/app.php

'providers' => [
    // ...
    LaravelBroadcastingBroadcastServiceProvider::class,
],

'aliases' => [
    // ...
    'Broadcast' => LaravelBroadcastingBroadcastFacade::class,
],

Als Nächstes führen wir einige Konfigurationsarbeiten durch, um sicherzustellen, dass Laravel Echo und das Pusher-PHP-SDK ordnungsgemäß funktionieren. Wir müssen alle für Laravel Echo und das Pusher-PHP-SDK erforderlichen Konfigurationen in der .env-Datei hinzufügen:

BROADCAST_DRIVER=pusher
PUSHER_APP_ID=your-pusher-app-id
PUSHER_APP_KEY=your-pusher-app-key
PUSHER_APP_SECRET=your-pusher-app-secret
PUSHER_APP_CLUSTER=your-pusher-app-cluster

Erstellen Sie einen WebSockets-Server

Als Nächstes richten wir einen WebSockets-Server mit Laravel Echo und dem Pusher-PHP-SDK ein. Wir müssen den Broadcast-Kanal in der Datei „routes/channels.php“ definieren. Der Broadcast-Kanal bestimmt, welche Benutzer Broadcast-Nachrichten empfangen können.

// routes/channels.php

use IlluminateSupportFacadesBroadcast;

Broadcast::channel('chat.{roomId}', function ($user, $roomId) {
    // ...
});

Im obigen Beispiel haben wir einen Broadcast-Kanal namens „chat“ definiert und ihm einen Parameter „roomId“ übergeben. Nur Benutzer mit der Berechtigung „chat.roomId“ können Nachrichten von diesem Broadcast-Kanal empfangen.

Als nächstes müssen wir das Sendeereignis definieren und seine Botschaft verbreiten. Erstellen Sie eine neue Ereignisklasse im Verzeichnis app/Events, zum Beispiel:

// app/Events/ChatMessageSent.php

<?php

namespace AppEvents;

use IlluminateBroadcastingPrivateChannel;
use IlluminateContractsBroadcastingShouldBroadcast;
use IlluminateFoundationEventsDispatchable;
use IlluminateQueueSerializesModels;

class ChatMessageSent implements ShouldBroadcast
{
    use Dispatchable, SerializesModels;

    public $message;

    public function __construct($message)
    {
        $this->message = $message;
    }

    public function broadcastOn()
    {
        return new PrivateChannel('chat.' . $this->message['room_id']);
    }
}

Diese Ereignisklasse enthält die Logik von Broadcast-Ereignissen und muss die ShouldBroadcast-Schnittstelle für die Übertragung implementieren.

Jetzt können wir das Ereignis in unserer Anwendung instanziieren und dann die Broadcast-Nachricht senden. Fügen Sie beispielsweise die folgende Methode zum Senden von Nachrichten in die Datei app/Http/Controllers/ChatController.php ein:

// app/Http/Controllers/ChatController.php

<?php

namespace AppHttpControllers;

use AppEventsChatMessageSent;
use IlluminateHttpRequest;

class ChatController extends Controller
{
    public function sendMessage(Request $request)
    {
        $message = [
            'user_id' => $request->user()->id,
            'room_id' => $request->get('room_id'),
            'message' => $request->get('message'),
        ];

        event(new ChatMessageSent($message));

        return response()->json(['status' => 'Message Sent!']);
    }
}

Bitte beachten Sie, dass im obigen Code event(new ChatMessageSent($message)) das Ereignis auslöst und eine Nachricht sendet, die Folgendes enthält: Datenübermittlungsereignis.

Echtzeitkommunikation etablieren

Abschließend müssen wir Laravel Echo im JavaScript-Client verwenden, um auf Broadcast-Ereignisse zu warten und eine WebSockets-Kommunikation in Echtzeit zu erhalten. In JavaScript können wir Broadcast-Ereignisse auf zwei Arten abhören:

• Echo.channel(channelName).listen(eventName, callback): Abonnieren Sie Broadcast-Ereignisse und registrieren Sie eine Rückruffunktion, die ausgeführt wird, wenn das Ereignis empfangen wird.
• Echo.private(channelName).listen(eventName, callback): Abonnieren Sie private Broadcast-Ereignisse und registrieren Sie eine Rückruffunktion, die ausgeführt wird, wenn das Ereignis empfangen wird.

Zum Beispiel können wir in unserer Chat-Anwendung den folgenden Code verwenden, um auf Ereignisse für neue Nachrichten zu warten:

// resources/js/app.js

import Echo from 'laravel-echo';
window.Pusher = require('pusher-js');

window.Echo = new Echo({
    broadcaster: 'pusher',
    key: process.env.MIX_PUSHER_APP_KEY,
    cluster: process.env.MIX_PUSHER_APP_CLUSTER,
    encrypted: true,
});

window.Echo.channel(`chat.${roomId}`)
    .listen('ChatMessageSent', (e) => {
        console.log(e);
    });

Im obigen Code verwenden wir den Laravel Echo-Client, um den Kanal „chat.roomId“ zu abonnieren und Empfangen Sie die Ereignisdaten, wenn Sie das Ereignis „ChatMessageSent“ erreichen.

Fazit

Durch die Verwendung von Laravel Echo und dem Pusher-PHP-SDK können wir ganz einfach einen WebSockets-Server einrichten und Broadcast-Kanäle verwenden, um die WebSockets-Kommunikation zu implementieren. Auf der Clientseite können wir JavaScript und Laravel Echo verwenden, um Nachrichten in Echtzeit zu überwachen und so eine Echtzeitkommunikation zu erreichen.

Darüber hinaus stellt Laravel Echo viele weitere Broadcast-Kanäle und Events zur Verfügung, mit denen wir komplexe Webanwendungen erstellen können. Wenn Sie nach einer modernen Echtzeit-Kommunikationslösung suchen, sind Laravel Echo und Pusher PHP SDK eine gute Wahl.

Das obige ist der detaillierte Inhalt vonLaravel-Entwicklung: Wie implementiert man die WebSockets-Kommunikation mit Laravel Echo?. Für weitere Informationen folgen Sie bitte anderen verwandten Artikeln auf der PHP chinesischen Website!