Messagerie RCS avec Laravel, Livewire, Reverb et Echo

Time to get our hands dirty with RCS and Laravel!TLDR ; Vous pouvez trouver le code de démonstration ici.

Laravel Livewire est un moyen puissant d'éliminer la complexité du frontend. Dans ce tutoriel, nous allons l'utiliser pour construire un RCS (Rich Communication Services) avec l'API Vonage Messages APIJe n'arrive pas à croire qu'il m'ait fallu autant de temps pour mettre la main sur Laravel Livewirealors que la version 1.0.0 a été publiée en 2020. Livewire s'inspire de Ruby on Rails Ruby on Rails Hotwire et fait quelque chose qui me tient vraiment à cœur : il supprime le code frontal complexe. Dans le cadre de ce que l'on appelle le projet TALL elle est certainement en train d'être adoptée par de nombreux utilisateurs.

RCS signifie Rich Communication ServicesIl s'agit d'un protocole de messagerie moderne et plus avancé que le standard de facto qu'est le SMS. Le SMS a été amélioré avec l'avènement du MMS (Multimedia Messaging), mais il était aussi notablement plus lent car ce dernier s'appuyait toujours sur le réseau GSMA. RCS n'utilise que des données, donc que vous utilisiez le Wi-Fi ou la 4/5G n'a pas d'importance : dans notre monde hyperconnecté d'infrastructures de données, cela signifie que votre messagerie est désormais beaucoup plus rapide. Il est également mis en œuvre dans les mêmes applications de messagerie sur les appareils cellulaires que la messagerie SMS native, de sorte que RCS est prêt à fonctionner sur la plupart des appareils fabriqués au cours des 5 dernières années.

Eh bien, quel meilleur cas d'utilisation pour faire quelque chose en temps réel avec Livewire que d'implémenter RCS dans une application web de messagerie ? C'est ce que nous allons faire dans ce tutoriel.

Conditions préalables

• PHP 8.4

• Installateur Laravel

• Node 22+

• Npm 6+

• Un Account Vonage

• ngrok

Vonage API Account

To complete this tutorial, you will need a Vonage API account. If you don’t have one already, you can sign up today and start building with free credit. Once you have an account, you can find your API Key and API Secret at the top of the Vonage API Dashboard.

Ready to start building?

Experience seamless connectivity, real-time messaging, and crystal-clear voice and video calls—all at your fingertips.

Installer Laravel

Le programme d'installation de Laravel est une enveloppe soignée autour de Composer que vous pouvez installer globalement pour démarrer facilement de nouvelles Applications Laravel. Lors de l'installation, choisissez le kit de démarrage Livewire, l'authentification intégrée de Laravel, Volt peut être ignoré, et enfin, le choix du framework de test n'a pas d'importance. Une application Laravel complète est maintenant installée. Veillez à exécuter les migrations intégrées afin de mettre en place la table Users pour l'authentification.

Installer Livewire

Caleb Porzio a lancé Livewire en 2020 et a fait sensation à l'époque. J'ai déjà dit qu'il éliminait les complexités du frontend, mais qu'est-ce que c'est exactement ? Vous, lecteur, êtes peut-être comme moi. Je suis un développeur back-end qui se gratte constamment la tête devant les tâches frontales les plus basiques. Livewire fournit des composants frontaux PHP comme s'il s'agissait de composants JavaScript. Par conséquent, la gestion de l'état et du comportement se fait dans le code PHP que vous connaissez et aimez, avec une API bien documentée à explorer. Pour installer Livewire, utilisez Composer :

composer install livewire/livewire

Créer des migrations et des modèles

Nous aurons besoin de deux entités pour la messagerie : un Message et a Conversation. La relation est la suivante : les messages appartiennent à à une conversation, et qu'une conversation appartient à un utilisateur. Il s'agit d'une relation importante à noter et à établir, car lorsque nous diffuserons des événements (c'est-à-dire des messages entrants), le frontend devra être en mesure de les relier à un utilisateur.

Créez vos migrations en ligne de commande :

php artisan make:model Conversation --migration
php artisan make:model Message --migration

Notez que, comme nous créons le modèle plutôt que la migration, nous utilisons le singulier plutôt que le pluriel. La migration a été générée en ajoutant --migration à la commande, nous pouvons donc maintenant définir l'apparence de ces entités dans la base de données.

create_conversations_table.php

<?php

use Illuminate\Database\Migrations\Migration;
use Illuminate\Database\Schema\Blueprint;
use Illuminate\Support\Facades\Schema;

return new class extends Migration
{
   /**
    * Run the migrations.
    */

   public function up(): void
   {
       Schema::create('conversations', function (Blueprint $table) {
           $table->id();
           $table->string('uuid');
           $table->foreignId('user_id')->constrained('users');
       });
   }

   /**
    * Reverse the migrations.
    */

   public function down(): void
   {
       Schema::dropIfExists('conversations');
   }
};

create_messages_migration.php

<?php

use Illuminate\Database\Migrations\Migration;
use Illuminate\Database\Schema\Blueprint;
use Illuminate\Support\Facades\Schema;

return new class extends Migration
{
   /**
    * Run the migrations.
    */

   public function up(): void
   {
       Schema::create('messages', function (Blueprint $table) {
           $table->id();
           $table->string('message');
           $table->timestamps();
           $table->foreignId('conversation_id')->constrained();
           $table->string('source');
       });
   }

   /**
    * Reverse the migrations.
    */
   public function down(): void
   {
       Schema::dropIfExists('messages');
   }
};

Il est important de noter qu'il existe un champ source qui n'aura que deux valeurs :

• internal

• external

Ceci est important pour que le frontend puisse restituer correctement une vue de type conversation.

Nous avons également ajouté les relations nécessaires, nous définissons donc maintenant les relations dans les modèles :

Models\Conversation.php

<?php

namespace App\Models;

use Illuminate\Database\Eloquent\Model;
use Illuminate\Database\Eloquent\Relations\HasMany;

class Conversation extends Model
{
   public $timestamps = false;

   public function messages(): HasMany
   {
       return $this->hasMany(Message::class);

   }

   public function user() 
  {
       return $this->belongsTo(User::class);
   }
}

Models\Messages.php

<?php

namespace App\Models;

use Illuminate\Database\Eloquent\Model;
use Illuminate\Support\Facades\Log;

class Message extends Model

{
   use BroadcastsEvents;

   public $timestamps = true;
   public $table = 'messages';
   public $fillable = ['message', 'conversation_id', 'created_at', 'updated_at'];

   public function conversation()
   {
       return $this->belongsTo(Conversation::class);
   }

Alimenter votre base de données

Il y a deux choses que nous devons ensemencer :

• Un utilisateur test (plutôt que de s'enregistrer via l'interface utilisateur)

• Une conversation fictive à laquelle les messages seront rattachés. En réalité, vous devriez créer ces conversations de manière dynamique, mais pour les besoins de ce tutoriel, chaque message sera lié à une conversation de remplacement.

Générer le MessagesSeeder dans la ligne de commande :

php artisan make:seeder MessagesSeeder

Maintenant, le seeder va gérer les deux placeholders dont nous avons besoin :

MessagesSeeder.php

<?php

namespace Database\Seeders;

use App\Models\Conversation;
use App\Models\User;
use Illuminate\Database\Seeder;
use Illuminate\Support\Facades\Hash;

class MessagesSeeder extends Seeder
{
   /**
    * Run the database seeds.
    */
   public function run(): void
   {
       $user = User::create([
           'name' => 'Admin',
           'email' => 'admin@admin.com',
           'password' => Hash::make('password'),
       ]);

       $conversation = Conversation::create([
           'uuid' => 'e2efbc00-b65e-4e47-8996-1de0043ed667',
           'user_id' => $user->id
       ]);
   }
}

L'exécution des migrations et des semoirs met tout en place dans la base de données avant que nous ne commencions à interagir avec eux :

php artisan migrate
php artisan db:seed

Écrire au contrôleur

Une fois nos données configurées, il est temps de créer une route et un contrôleur.

php artisan make:controller MessagesController

Pour l'instant, le contrôleur ne va faire qu'une seule chose, rendre une vue.

<?php

namespace App\Http\Controllers;

use App\Models\Message;
use Illuminate\Http\Request;
use Illuminate\Support\Facades\Http;
use Illuminate\Support\Facades\Log;

class MessagesController extends Controller
{
   public function index()
   {
       return view('messages');
   }
}

Cette vue, messages, n'existe pas encore, alors créons-la :

php artisan make:view messages

Et le coder :

<!DOCTYPE html>
<html lang="en">

<head>
   <title>Livewire Messenger</title>
   <link rel="preconnect" href="https://fonts.bunny.net">
   <link href="https://fonts.bunny.net/css?family=instrument-sans:400,500,600" rel="stylesheet" />
   @vite(['resources/css/app.css', 'resources/js/app.js'])
   @fluxAppearance
</head>

<body class="bg-gray-100 min-h-screen flex flex-col" style="background-image: url('{{ asset('vonage background.png') }}'); background-size: cover; background-position: center;">
   <div class="flex items-center space-x-3 p-4 bg-black">
       <img src="{{ asset('vonage-logo.png') }}" alt="Vonage Logo" class="h-16 px-4 w-auto">
       <h2 class="text-xl font-bold text-white drop-shadow">Laravel Livewire x Reverb x Echo Messenger</h2>
   </div>
</body>
</html>

Enfin, liez tous ces éléments dans un itinéraire :

routes/web.php

Route::get('/messages', [MessagesController::class, 'index']);

Rédiger un composant Livewire

Il est temps d'introduire quelques fonctionnalités. Au lieu de l'approche traditionnelle Modèle-Vue-Contrôleur, cette application s'appuiera sur les fonctionnalités d'un composant Livewire. Pour les développeurs PHP, composants Livewire ressemblent à un contrôleur normal avec son propre modèle de vue, mais les changements d'état seront poussés vers le frontend. Créez un contrôleur Livewire en ligne de commande :

php artisan livewire:make RcsComponent

Ce composant Livewire sera inclus dans la vue message vue. Ce composant chargera tous les messages de la conversation en question, puis effectuera deux opérations :

• L'option d'envoyer un message, qui sera envoyé à Vonage en utilisant le PHP SDK. L'envoi de ce message recharge le composant en récupérant les messages à l'aide de l'outil ORMLivewire poussera ensuite l'état mis à jour à l'aide de l'ORM

• Écoute les modifications apportées à la conversation ensemencée et les charge lorsqu'un contrôleur reçoit une commande webhook de Vonage

Rédiger le modèle de composant

Les modèles Livewire se trouvent dans un répertoire différent de celui des modèles ordinaires Blade ordinaires. Naviguez jusqu'au modèle du nouveau composant et ajoutez-y du style :

livewire/rcs-component.blade.php

<div class="flex-1 flex flex-col justify-between px-4">
   <div class="overflow-y-auto space-y-2 mb-4 px-2" style="max-height: calc(100vh - 200px);">
       @forelse ($messages as $message)
           <div class="flex {{ $message->source === 'internal' ? 'justify-end' : 'justify-start' }}">
               <div class="max-w-xs md:max-w-md px-4 py-2 rounded-lg
                   {{ $message->source === 'internal' ? 'bg-green-500 text-white rounded-br-none' : 'bg-white text-gray-800 rounded-bl-none shadow' }}">

                   <p>{{ $message->message }}</p>

                   <p class="text-xs text-gray-300 mt-1 text-right">
                       {{ $message->created_at->diffForHumans() }}
                   </p>
               </div>
           </div>
       @empty
           <p class="text-gray-100 text-center mt-4">No messages found.</p>
       @endforelse
   </div>

   <form wire:submit.prevent="sendMessage" class="flex items-center space-x-2 border-t pt-2 bg-white p-2 rounded shadow">
       <input
           type="text"
           wire:model.defer="postMessage"
           placeholder="Type a message"
           class="flex-1 border text-black rounded-full px-4 py-2 focus:outline-none focus:ring-2 focus:ring-offset-purple-500"
       >

       <button type="submit" class="bg-purple-500 text-white px-4 py-2 rounded-full hover:bg-purple-400">
           Send
       </button>
   </form>
</div>

Ce composant crée un panneau de messages de type "WhatsApp". Le composant prend la collection qui a été incluse en tant que $messagesles rend, et inclut la syntaxe pour rappeler le code PHP dans le composant Livewire pour envoyer un message, en utilisant la méthode sendMessage(). Nous n'avons pas encore codé cela, alors allez dans la logique du composant Livewire et codez ce qui suit :

Livewire\RcsComponent

<?php

namespace App\Livewire;

use App\Models\Conversation;
use App\Models\Message;
use Illuminate\Support\Facades\Http;
use Livewire\Component;
use Vonage\Client;
use Vonage\Messages\Channel\RCS\RcsText;

class Rcs extends Component
{
   public $messages;
   public string $postMessage = '';

   public function mount()
   {
       $this->loadMessages();
   }

   public function loadMessages(): void
   {
       $conversation = Conversation::where('uuid', env('CONVERSATION_ID'))->first();

       $this->messages = Message::where('conversation_id', $conversation->id)->orderBy('timestamp', 'desc')->get();
   }

   public function sendMessage(): void
   {
       Http::withHeaders(['Accept' => 'application/json'])
           ->post(route('messages.store'), [
           'message' => $this->postMessage,
           'source' => 'internal'
       ]);

       $this->postMessage = '';
       $this->loadMessages();
   }

   public function render()
   {
       return view('livewire.rcs-component', $this->messages);
   }

   public function refresh()

   {
       $this->loadMessages();
   }
}

Il y a beaucoup de choses à décortiquer ici, alors passons en revue la logique :

• La propriété class $postMessage fait office d'état pour le composant. Cet état correspond au message en cours de traitement, et si vous regardez le modèle du composant, vous pouvez voir qu'il existe une syntaxe reliant le frontend et le backend : wire:model.defer="postMessage"

• La propriété de classe $messages fait également office d'état pour le composant et correspond à la collection complète des messages attachés à la conversation. Cette propriété est ensuite rendue dans le modèle que nous avons créé plus tôt for $messages as $message)

• Il existe trois méthodes magiques spécifiques à Livewire : mount() est exécutée lors du premier rendu du composant, refresh() s'exécute lors de tout changement d'état, et render() s'exécute à la fin du cycle de vie du composant, d'où le code permettant d'intégrer le modèle.

• mount() appelle une méthode réutilisée dans render() qui est nommée loadMessages()

• loadMessages() utilise l'ORM Eloquent pour faire deux choses. Tout d'abord, nous avons un peu triché avec la récupération d'un Conversationen utilisant une variable d'environnement, CONVERSATION_IDqui est notre Conversation. Tous les messages attachés à cet ID sont alors récupérés et écrits dans la propriété $messages propriété.

Nous n'avons pas ajouté la variable d'environnement. .env et ajoutez-y CONVERSATION_ID=e2efbc00-b65e-4e47-8996-1de0043ed667 à cette variable. Cet identifiant est le même UUID que celui qui a été écrit dans la conversation fictive.

C'est une bonne pratique, puisque nous écrivons une API fictive essentiellement avec la façon dont ces entités fonctionnent, d'exposer vos entités via REST. Vous remarquerez que la méthode sendMessage n'utilise pas l'ORM Eloquent pour créer un nouveau message et le persister dans la base de données ; à la place, elle prend le contenu de $postMessage et l'envoie par POST au point d'extrémité de l'API interne exposée. Cela nécessite un point de terminaison qui n'a pas encore été codé, alors allez dans votre fichier de routes et ajoutez-le :

routes\web.php

Route::post('/create-message', [MessagesController::class, 'store'])->name(messages.store');

Maintenant, ajoutez la méthode store() à la méthode MessagesController:

MessagesController.php

public function store(Request $request): JsonResponse
{
   $validated = $request->validate([
       'message' => 'required|string',
   ]);

   $conversation = Conversation::where('uuid', env('CONVERSATION_ID'))->first();

   $message = new Message();
   $message->message = $validated['message'];
   $message->created_at = now();
   $message->updated_at = now();
   $message->conversation_id = $conversation->id;
   $message->save();

   return response()->json([
       'status' => 'success',
       'data' => $message
   ], 201);
}

L'entrée est validée, puis, dans cette logique, l'entité est persistée par la base de données et attachée à la fausse entité. Message l'entité est persistée par la base de données et attachée à l'entité factice Conversation de l'entité semée.

Intégration Livewire

Pour fonctionner, Livewire a besoin que certains styles et JavaScript soient ajoutés à vos modèles d'application. Des méthodes d'aide pratiques sont incluses et peuvent être utilisées dans Blade. Rendez-vous sur la page du modèle parent du composant et modifiez le code comme suit :

<!DOCTYPE html>
<html lang="en">

<head>
   <title>Livewire Messenger</title>
   @livewireStyles
   <link rel="preconnect" href="https://fonts.bunny.net">
   <link href="https://fonts.bunny.net/css?family=instrument-sans:400,500,600" rel="stylesheet" />
   @vite(['resources/css/app.css', 'resources/js/app.js'])
   @fluxAppearance
</head>

<body class="bg-gray-100 min-h-screen flex flex-col" style="background-image: url('{{ asset('vonage background.png') }}'); background-size: cover; background-position: center;">
   <div class="flex items-center space-x-3 p-4 bg-black">
       <img src="{{ asset('vonage-logo.png') }}" alt="Vonage Logo" class="h-16 px-4 w-auto">
       <h2 class="text-xl font-bold text-white drop-shadow">Laravel Livewire x Reverb x Echo Messenger</h2>
   </div>
   <livewire:rcs />
   @livewireScripts
</body>
</html>

Les trois ajouts sont les suivants

• @livewireStyles pour intégrer des classes CSS essentielles

• @livewireScripts pour intégrer des fonctionnalités JavaScript essentielles

• <livewire:rcs /> ajoute notre composant Livewire à la page.

Écrire le contrôleur Webhook

La prochaine chose que l'application doit pouvoir faire est de gérer les données entrantes de Vonage sous la forme d'un webhook. Ce webhook est configuré dans le tableau de bord de Vonage pour être envoyé à une URL définie par l'utilisateur en tant que charge utile JSON lorsqu'un utilisateur répond au numéro configuré dans la conversation sur l'appareil de l'utilisateur final. HTTP POST. Commencez par ajouter l'itinéraire :

routes\web.php

Route::post('/messages/webhook', [MessagesController::class, 'webhook'])->name(messages.webhook');

Nous ajoutons maintenant la méthode webhook() à la méthode MessagesController.

MessagesContoller.php

public function webhook(Request $request)
{
   $payload = $request->all();
 
   $newMessage = Message::create([
       'message' => $payload['text'],
       'source' => 'external',
       'conversation_id' => 1
   ]);

   return response()->json([
       'status' => 200
   ]);
}

À l'origine, j'ai écrit cette logique pour réutiliser l'API REST, mais il y avait des implications de sécurité pour prendre deux domaines différents au moment de l'exécution, alors j'ai triché dans cet exemple et j'ai utilisé Eloquent pour écrire le message webhook dans la base de données et renvoyer un 200 à Vonage.

Nous avons maintenant toutes les parties internes câblées ensemble, mais il ne vous a probablement pas échappé que nous n'envoyons encore rien à Vonage. que nous n'envoyons encore rien à Vonage. Cela doit se faire dans votre méthode sendMessage qui se trouve dans le composant Livewire. Le SDK PHP de Vonage a besoin d'un ID d'application et d'un ID d'utilisateur. private.key, qui est créé dans le tableau de bord de Vonage, et un numéro doit être attribué à l'application.

RCS nécessite de s'enregistrer en tant qu'agent avant de pouvoir l'utiliser. Pour plus d'informations sur la façon de procéder, reportez-vous à cet article.

Votre application devra être exposée à l'internet pour que Vonage puisse lui envoyer des webhooks. Pour ce faire, nous utilisons ngrok. Une fois ngrok installé, lancez-le en ligne de commande :

ngrok http 8080

Vous obtiendrez une URL publique qui pointe vers votre port 8080. Cette URL doit être placée dans le tableau de bord Vonage pour votre application RCS, comme suit :

Configuring our webhooks

Configurer Vonage en PHP

Actuellement, le sendMessage() n'envoie actuellement pas de message, il est donc temps de le configurer. Installez le SDK PHP de Vonage en utilisant Composer sur la ligne de commande :

composer require vonage/client

Maintenant, en utilisant les informations d'identification de notre compte Vonage et le fichier private.key téléchargée depuis le tableau de bord, nous configurons notre objet Client et l'utilisons pour envoyer le message RCS. Votre objet sendMessage() devrait ressembler à ceci :

public function sendMessage(): void
{
   $applicationId = 'your-application-id';

   $privateKey = file_get_contents(base_path(config('path-to-your-private-key')));

   $credentials = new Client\Credentials\Keypair($privateKey, $applicationId);

   $client = new Client($credentials);

   $rcsMessage = new RcsText('your-vonage-number, 'your-configured-from-id, $this->postMessage);

   $client->messages()->send($rcsMessage);

   Http::withHeaders(['Accept' => 'application/json'])
       ->post(route('messages.store'), [
       'message' => $this->postMessage,
       'source' => 'internal'
   ]);

   $this->postMessage = '';
   $this->loadMessages();
}

Le Client est créé avec un Keypairqui la configure pour gérer automatiquement l'authentification JWT pour tous les appels Vonage. Elle appelle ensuite l'API Messages avec la méthode chained messages() et utilise send(). Cette méthode, dans le cadre de l'intégration de l'API Messages, prendra n'importe quel objet valide qui se conforme aux interfaces de messages en interne. L'objet pour envoyer un message RCS est RcsText.

Il y a quelques variables d'environnement à insérer ici - nous avons déjà examiné vos informations d'identification, mais RCS a également besoin des numéros de départ et d'arrivée. Le numéro de destination est votre appareil cible, et le numéro de départ est la clé configurée avec votre agent RCS.

C'est l'heure de la magie. La limitation ici est qu'avec Livewire, le composant sera mis à jour lorsque vous envoyez un message (car il utilise la fonction refresh(), de Livewire, qui appellera alors loadMessages() MAIS, comment le composant Livewire est-il informé de l'arrivée d'un webhook, qui devrait alors mettre à jour l'état ?

La réponse se présente sous la forme du super brillant Diffusion de modèles super brillante. Traduit en anglais, Laravel vous donne la possibilité de puiser dans le système d'événements existant chaque fois qu'un modèle est modifié. Cela signifie que chaque fois qu'un Message est créé (c'est-à-dire lorsqu'un webhook arrive et est écrit dans la base de données), nous pouvons utiliser un serveur WebSocket pour écouter et dire à Livewire de refresh().

Pour ce faire, nous devons installer deux bibliothèques : Laravel Reverb (le serveur de diffusion websocket) et Laravel Echo (bibliothèque côté client pour écouter les événements). Reverb est installé à l'aide de la console Laravel :

php artisan install:broadcasting

Echo est installé à l'aide de npm :

npm install --save-dev laravel-echo pusher-js

pusher-js est le protocole utilisé par Echo, c'est pourquoi il est inclus dans la commande.

Intégrer Echo

La racine du JavaScript de votre application doit avoir une classe configurée Echo configurée, prête à écouter ce que Reverb diffuse. Rendez-vous sur resources\js et créez un nouveau fichier appelé echo.js. Remplissez-le comme suit :

import Echo from 'laravel-echo';
import Pusher from 'pusher-js';

window.Pusher = Pusher;

let echo = new Echo({
   broadcaster: 'reverb',
   key: import.meta.env.VITE_REVERB_APP_KEY,
   wsHost: import.meta.env.VITE_REVERB_HOST,
   wsPort: import.meta.env.VITE_REVERB_PORT ?? 80,
   wssPort: import.meta.env.VITE_REVERB_PORT ?? 443,
   forceTLS: (import.meta.env.VITE_REVERB_SCHEME ?? 'https') === 'https',
   enabledTransports: ['ws', 'wss'],
});

echo.privateApp.Models.Conversation.1)
   .listen('.MessageCreated', (e) => {
       console.log(e);
   });

window.Echo = echo;

Un canal à écouter est identifié ici : App.Models.Conversation.1 est codé en dur. Puisque nous n'avons qu'un seul objet Conversation dans ce cas, ce sera toujours celui-ci. La convention de dénomination du canal provient de notre fichier channel.php qui n'a pas encore été écrit, ce qui se fera sous peu, mais il est intéressant de noter que .MessageCreated est une convention de nommage issue du Model Broadcasting intégré à Laravel.

echo.private est utilisé parce que les événements de Model Broadcasting ne peuvent être émis que par des canaux privés. Une chose à laquelle il faut vraiment faire attention (et je ne l'ai pas fait à l'origine, ce qui m'a valu 2 heures fantastiques de débogage sans résultat) est qu'il ne peut s'agir que de canaux privés parce que Model Broadcasting est lié au mécanisme d'authentification de Laravel. Donc, pour que cela fonctionne, vous devez être connecté en tant qu'utilisateur que nous avons créé.

Les echo.js doit être inclus au moment du démarrage de l'application, donc il faut l'inclure dans le fichier resources\js\app.js dans le fichier

/**
* Echo exposes an expressive API for subscribing to channels and listening
* for events that are broadcast by Laravel. Echo and event broadcasting
* allow your team to quickly build robust real-time web applications.
*/

import './echo';

Intégration de la réverbération

Nous avons quelque chose qui écoute les événements, mais nous n'avons pas encore codé leur diffusion. Il y a trois parties à cela :

• Configuration de l'itinéraire du canal de diffusion

• Ajout de la diffusion au modèle

• Configurer Livewire pour qu'il réagisse aux événements en cours

Configuration du canal de diffusion

Lors de l'installation de la Reverb, le nouveau fichier de routes pour les canaux est créé comme suit routes\channels.php. C'est là que nous indiquons à Reverb de diffuser.

channels.php

Broadcast::channel('App.Models.Conversation.{id}', function ($user, $id) {
   return $user->conversations->firstOrFail('id', $id)->exists;
});

La méthode channel attend un booléen permettant d'identifier si l'ID de la conversation est disponible pour l'utilisateur en tant que porte d'authentification.

Ajouter la diffusion au modèle

Il y a deux choses que vous devez ajouter au modèle - le modèle étant dans ce cas l'entité Message entité. Reverb possède un trait appelé BroadcastEvents qui ouvre l'interface pour l'utilisation de WebSocket. Vous devez l'inclure dans le code, ce qui permet de surcharger la méthode broadcastOn à surcharger.

Le code du modèle final ressemble à ceci :

<?php

namespace App\Models;
use Illuminate\Database\Eloquent\BroadcastsEvents;
use Illuminate\Database\Eloquent\Model;
use Illuminate\Support\Facades\Log;

class Message extends Model
{
   use BroadcastsEvents;

   public $timestamps = true;
   public $table = 'messages';
   public $fillable = ['message', 'conversation_id', 'created_at', 'updated_at'];

   public function conversation()
   {
       return $this->belongsTo(Conversation::class);
   }

   public function broadcastOn(string $event)
   {
       return [$this->conversation];
   }
}

Avant d'aborder la logique qui sous-tend broadcastOn()vous remarquerez que plusieurs champs ont été inclus dans $fillable. Cette propriété spécifie les champs du modèle qui peuvent être remplis automatiquement avec l'hydratation. Ces champs ont donc été inclus dans le tableau en raison de l'hydratation du Webhook.

En raison de la diffusion de modèles, l'adresse du canal intégré de ce modèle serait App.Model.ConversationAinsi, le renvoi d'une valeur de $this->conversation nous permet d'obtenir l'identifiant de chaîne de diffusion requis, à savoir App.Model.Conversation.{id}. BroadcastEvents émet les actions CRUD sur ce modèle, mais nous lui avons demandé de diffuser sur l'ID de conversation pour l'écoute.

Lier le tout

D'accord, je l'admets : nous avons fait preuve d'une logique extraordinaire pour ne pas ne pas JavaScript. Mais je suis d'accord avec ça parce que je suis le meilleur développeur du monde. De plus, j'aime l'innovation que des frameworks comme Laravel continuent à apporter.

Il y a maintenant deux serveurs que vous devez faire fonctionner : Vite doit être lancé pour compiler les actifs du frontend, et Reverb doit être lancé pour diffuser les événements qu'Echo écoute. Dans votre terminal, lancez-les :

php artisan reverb:start
npm run dev

Pfiou ! Cela fait beaucoup de câbles. Mais cela en vaut la peine, n'est-ce pas ? Une fois que tout est démarré, connectez-vous et commencez à envoyer des messages !

I absolutely did not use ChatGPT to sort out my styling