Hinzufügen von Echtzeit -Chat in Laravel mit Reverb & Vue zu Laravel

Laravel, ein beliebtes PHP-Framework, erhält verbesserte Echtzeitfunktionen mit Reverb, einem leistungsstarken WebSocket-Server. Dieses offizielle Laravel-Paket vereinfacht die Integration von Echtzeitfunktionen und verbessert die Benutzerinteraktion erheblich.

Was ist Laravel Reverb?

Reverb fungiert als Brücke zwischen Ihrer Laravel-Anwendung und ihren Benutzern und ermöglicht eine bidirektionale Echtzeitkommunikation über WebSockets. Dies ermöglicht dynamische Updates ohne vollständige Seiten -Nachladen, wodurch ein reaktionsfähigeres Benutzererlebnis erstellt wird.

Schlüsselmerkmale von Laravel Reverb:

• hohe Leistung: liefert eine außergewöhnliche Geschwindigkeit für die Echtzeit-Datenübertragung.
• Skalierbarkeit: Umgang mit wachsenden Benutzerbasen und erhöhtem Verkehr.
• Einfache Integration: funktioniert nahtlos mit Laravels Broadcasting und Laravel -Echo für optimierte Entwicklung.
• Sofort -Updates: Verschieben von Updates, Nachrichten und Ereignissen sofort an Clients.
• robuste Sicherheit: enthält Datenverschlüsselung und Authentifizierung für die sichere Kommunikation.

Erstellen einer Echtzeit-Chat-Anwendung mit Laravel Reverb

Dieser Handbuch zeigt, dass das Erstellen einer dynamischen Chat -Anwendung mit Reverb erstellt wird. Nachrichten werden sofort zur Verfügung gestellt, um eine fließende Benutzererfahrung zu gewährleisten.

Schritt 1: Einrichten Ihres Laravel -Projekts

• Stellen Sie sicher, dass Sie eine Laravel -Anwendung haben (Version 11 oder höher empfohlen). Verwenden Sie composer create-project laravel/laravel your-chat-app-name für ein neues Projekt.

Schritt 2: Installieren und Konfigurieren von Reverb

Reverb installieren mit:

php artisan install:broadcasting

Reverb in config/reverb.php konfigurieren und die folgenden Umgebungsvariablen festlegen:

<code>BROADCAST_DRIVER=reverb
REVERB_APP_ID=my-app-id
REVERB_APP_KEY=my-app-key
REVERB_APP_SECRET=my-app-secret</code>

Die echo.js -Datei (befindet sich in resources/js) wird ebenfalls automatisch generiert. Siehe Laravel-Dokumentation ( https://www.php.cn/link/865e434f7f48e0e93f69cbb938b06809 ) für die serverspezifische Konfiguration.

Schritt 3: Ausführen des Reverb -Servers

Starten Sie den Reverb -Server mit:

php artisan reverb:start

(Verwenden Sie --host und --port Optionen oder Umgebungsvariablen REVERB_SERVER_HOST und REVERB_SERVER_PORT für benutzerdefinierte Konfigurationen.)

Schritt 4: Datenbank -Setup

Konfigurieren Sie Ihre Datenbank in der Datei .env. (Beispiel mit SQLite):

<code>DB_CONNECTION=sqlite
DB_DATABASE=/path/to/database.sqlite</code>

Erstellen Sie die Datenbankdatei: touch /path/to/database.sqlite

Dieses Beispiel verwendet fünf vordefinierte Chatrooms. Erstellen Sie ein ChatMessage Modell und Migration:

php artisan install:broadcasting

Die Migration (database/migrations/*.php) sollte enthalten:

<code>BROADCAST_DRIVER=reverb
REVERB_APP_ID=my-app-id
REVERB_APP_KEY=my-app-key
REVERB_APP_SECRET=my-app-secret</code>

Führen Sie die Migration aus: php artisan migrate

Beziehungen zum ChatMessage Modell hinzufügen (app/Models/ChatMessage.php):

php artisan reverb:start

Schritt 5: Erstellen Sie das MessageSent Ereignis

Erstellen Sie das Ereignis MessageSent (app/Events/MessageSent.php):

<code>DB_CONNECTION=sqlite
DB_DATABASE=/path/to/database.sqlite</code>

Schritt 6: Erstellen Sie eine private Kanalroute

Definieren Sie den privaten Kanal in routes/channels.php:

php artisan make:model ChatMessage --migration

Schritt 7: Routen definieren

Definieren Sie die erforderlichen Routen in routes/web.php:

• Chatraumroute:

  Schema::create('chat_messages', function (Blueprint $table) {
      $table->id();
      $table->foreignId('receiver_id');
      $table->foreignId('sender_id');
      $table->text('text');
      $table->timestamps();
  });

• Chat -Nachrichten Route abrufen:

  <?php
  
  namespace App\Models;
  
  use Illuminate\Database\Eloquent\Model;
  use Illuminate\Database\Eloquent\Factories\HasFactory;
  
  class ChatMessage extends Model
  {
      use HasFactory;
  
      protected $fillable = ['sender_id', 'receiver_id', 'text'];
  
      public function sender()
      {
          return $this->belongsTo(User::class, 'sender_id');
      }
  
      public function receiver()
      {
          return $this->belongsTo(User::class, 'receiver_id');
      }
  }

• Chat -Message -Route senden:

  <?php
  
  namespace App\Events;
  
  use App\Models\ChatMessage;
  use Illuminate\Broadcasting\InteractsWithSockets;
  use Illuminate\Broadcasting\PrivateChannel;
  use Illuminate\Contracts\Broadcasting\ShouldBroadcastNow;
  use Illuminate\Foundation\Events\Dispatchable;
  use Illuminate\Queue\SerializesModels;
  
  class MessageSent implements ShouldBroadcastNow
  {
      use Dispatchable, InteractsWithSockets, SerializesModels;
  
      public function __construct(public ChatMessage $message) {}
  
      public function broadcastOn(): array
      {
          return [
              new PrivateChannel("chat.{$this->message->receiver_id}"),
          ];
      }
  }

Schritt 8: Erstellen Sie die Klingenansicht (resources/views/chat.blade.php)

Broadcast::channel('chat.{id}', function ($user, $id) {
    return (int) $user->id === (int) $id;
});

Schritt 9: Erstellen Sie die Vue.js -Komponente (resources/js/components/ChatComponent.vue)

(Vue.js -Komponentencode in der ursprünglichen Eingabeaufforderung)

Schritt 10: Führen Sie das Projekt

aus

run php artisan serve, npm run dev und php artisan reverb:start.

Quellcode: (Link in der ursprünglichen Eingabeaufforderung angegeben)

Diese detaillierte Walkthrough bietet einen umfassenden Leitfaden zum Erstellen einer Echtzeit-Chat-Anwendung mit Laravel Reverb und Vue.js. Denken Sie daran, Pfade und Konfigurationen so anzupassen, dass sie Ihrem Projekt -Setup entspricht.

Das obige ist der detaillierte Inhalt vonHinzufügen von Echtzeit -Chat in Laravel mit Reverb & Vue zu Laravel. Für weitere Informationen folgen Sie bitte anderen verwandten Artikeln auf der PHP chinesischen Website!