Ajouter un chat en temps réel à Laravel à l'aide de Reverb & Vue

Laravel, un framework PHP populaire, acquiert des capacités améliorées en temps réel avec Reverb, un puissant serveur WebSocket. Ce package Laravel officiel simplifie l'intégration des fonctionnalités en temps réel, améliorant considérablement l'interaction des utilisateurs.

Qu'est-ce que Laravel Reverb?

Reverb agit comme un pont entre votre application Laravel et ses utilisateurs, permettant une communication bidirectionnelle et en temps réel via les WebSockets. Cela permet des mises à jour dynamiques sans rechargement de page pleine page, créant une expérience utilisateur plus réactive.

Caractéristiques clés de Laravel Reverb:

• haute performance: offre une vitesse exceptionnelle pour le transfert de données en temps réel.
• Évolutivité: gère facilement les bases utilisateur croissantes et l'augmentation du trafic.
• Intégration facile: Fonctionne de manière transparente avec la radiodiffusion de Laravel et l'écho de Laravel pour le développement rationalisé.
• Mises à jour instantanées: Poussez les mises à jour, les messages et les événements vers les clients instantanément.
• Sécurité robuste: comprend le cryptage et l'authentification des données pour la communication sécurisée.

Construire une application de chat en temps réel avec Laravel Reverb

Ce guide démontre la création d'une application de chat dynamique à l'aide de Reverb. Les messages sont livrés instantanément, assurant une expérience utilisateur fluide.

Étape 1: Configuration de votre projet Laravel

• Assurez-vous d'avoir une application Laravel (version 11 ou plus recommandée). Utilisez composer create-project laravel/laravel your-chat-app-name pour un nouveau projet.

Étape 2: installer et configurer la réverbération

Installez la réverbération en utilisant:

php artisan install:broadcasting

Configurer la réverbération dans config/reverb.php et définir les variables d'environnement suivantes:

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

Le fichier echo.js (situé dans resources/js) sera également généré automatiquement. Reportez-vous à la documentation Laravel ( https://www.php.cn/link/865e434f7f48e0e93f69cbb938b06809 ) pour la configuration spécifique au serveur.

Étape 3: exécuter le serveur de réverbération

Démarrez le serveur de réverbération avec:

php artisan reverb:start

(utiliser --host et --port Options ou variables d'environnement REVERB_SERVER_HOST et REVERB_SERVER_PORT pour les configurations personnalisées.)

Étape 4: Configuration de la base de données

Configurez votre base de données dans le fichier .env. (Exemple à l'aide de SQLite):

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

Créez le fichier de base de données: touch /path/to/database.sqlite

Cet exemple utilise cinq salles de chat prédéfinies. Créez un modèle et une migration ChatMessage:

php artisan install:broadcasting

La migration (database/migrations/*.php) doit inclure:

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

Exécutez la migration: php artisan migrate

Ajouter des relations au modèle ChatMessage (app/Models/ChatMessage.php):

php artisan reverb:start

Étape 5: Créez l'événement MessageSent

Créez l'événement MessageSent (app/Events/MessageSent.php):

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

Étape 6: Créez un itinéraire de canal privé

Définissez le canal privé dans routes/channels.php:

php artisan make:model ChatMessage --migration

Étape 7: Définissez les routes

Définissez les routes nécessaires dans routes/web.php:

• route de la salle de chat:

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

• Obtenez la route des messages de chat:

  <?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');
      }
  }

• Envoyer la route du message de chat:

  <?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}"),
          ];
      }
  }

Étape 8: Créez la vue de la lame (resources/views/chat.blade.php)

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

Étape 9: Créez le composant Vue.js (resources/js/components/ChatComponent.vue)

(code composant Vue.js fourni dans l'invite d'origine)

Étape 10: Exécutez le projet

Run php artisan serve, npm run dev et php artisan reverb:start.

Code source: (lien fourni dans l'invite d'origine)

Cette procédure détaillée fournit un guide complet pour construire une application de chat en temps réel à l'aide de Laravel Reverb et Vue.js. N'oubliez pas d'ajuster les chemins et les configurations pour correspondre à la configuration de votre projet.

Ce qui précède est le contenu détaillé de. pour plus d'informations, suivez d'autres articles connexes sur le site Web de PHP en chinois!