Comment construire une application de chat en temps réel avec Laravel 5.4 et VueJs

Laravel est un domaine très prometteur dans le monde moderne. Cette plate-forme a permis de développer divers aspects de la plate-forme sans effort. L'utilisation de Laravel Echo est également devenue très courante. Laravel Echo est une bibliothèque Javascript qui vous permet de vous abonner à de nombreuses chaînes et d'écouter les événements diffusés par Laravel.

Il y a aussi la disponibilité du service de messagerie pousseur où l'on peut créer un compte avec son propre messager. Avec l’utilisation de Laravel 5.3 pour les fichiers blade, ainsi que de la bibliothèque frontend de Laravel Echo avec vue-resource, le processus entier fonctionnera très facilement.

Au bout du compte, on devrait pouvoir ouvrir deux navigateurs et voir en conséquence si le chat fonctionne.

Les dépendances qu'il faut installer

L’ensemble commence par l’installation de ces paquets pour pouvoir se lancer et ensuite s’exécuter avec les événements Laravel Echo / Broadcasting.

On peut installer Echo via le gestionnaire de paquets NPM. Prenons l'exemple où nous pouvons installer le paquet pusher-js; on utilisera le diffuseur Pusher:

On peut exécuter npm installer - enregistrer laravel-echo pusher-js dans le terminal.

Maintenant, si l’on diffuse les événements sur Pusher, il convient d’installer le kit de développement PHP Pusher avec le gestionnaire de paquets Composer:

compositeur nécessite pousseur / serveur pousseur-php

Maintenant, lorsque toutes les dépendances seront facilement installées, il sera temps de créer un compte pusher.com. Lorsque vous avez créé un compte, puis créé une application, vous devez voir certaines clés de l'application sous l'onglet Clés de l'application.

Copiez cette clé dans l’ensemble de votre fichier .env comme ceci.

PUSHER_APP_ID = 23222
PUSHER_KEY = ffssfb166f4976941e627c5
PUSHER_SECRET = 2o2323ojfw

Et rappelez-vous de voir le pilote de diffusion afin que Laravel sache quel pilote il souhaite utiliser.

BROADCAST_DRIVER = poussoir

Dans le fichier config / broadcast.php, il est judicieux d’ajouter quelques options à la connexion par poussoir comme ceci

'pousseur' => [
           'driver' => 'poussoir',
           'key' => env ('PUSHER_APP_KEY'),
            'secret' => env ('PUSHER_APP_SECRET'),
            'app_id' => env ('PUSHER_APP_ID'),
            'options' => [
                 'cluster' => 'ap2',
                  'crypté' => vrai
             ],
        ],

Nous devrions maintenant essayer de créer un événement pour voir si on peut envoyer des messages directement dans le compte Pusher.

Il suffit d’aller sur le terminal puis de taper php artisan pour créer l’événement MessagePosted.

trouvez la classe dans le fichier app / events / ChatMessageWas Received.php, ce qui lui permet d'implémenter le ShouldBroadcast. Donc comme ça

La classe ChatMessageWasReceived implémente ShouldBroadcast
{

Maintenant que nous voulons créer un message de chat approprié, nous tapons PHP make: model ChatMessage –migration. Ceci peut créer un modèle et une migration pour nous et le démarrer ou ajouter ses propres lignes.

Schema :: create ('chat_messages', fonction (Blueprint $ table) {
            $ table-> increments ('id');
            $ table-> string ('message');
            $ table-> entier ('user_id') -> unsigned ();
            $ table-> horodatages ();
        });

Assurez-vous d'ajouter $ remplissable au modèle.

classe ChatMessage étend le modèle
{
    public $ fillable = ['user_id', 'message'];
}

Maintenant, essayez d'injecter un utilisateur et les messages directement à l'événement

La classe ChatMessageWasReceived implémente ShouldBroadcast
{
    utilisez InteractsWithSockets, SerializesModels;

    public $ chatMessage;
    public $ user;

    / **
     * Créer une nouvelle instance d'événement.
     *
     * @param $ chatMessage
     * @param $ user
     * /
    fonction publique __construct ($ chatMessage, $ user)
    {
        $ this-> chatMessage = $ chatMessage;
        $ this-> user = $ user;
    }

    / **
     * Obtenez les chaînes sur lesquelles l’événement doit être diffusé.
     *
     * @return Channel | array
     * /
    fonction publique broadcastOn ()
    {
        renvoyer nouvelle chaîne («chaîne publique d'essai»);
    }
}

Avec notre fichier web.php, nous allons définir une route pour JavaScript afin de passer un appel ajax avec un message.

// Envoyer un message par Javascript.
Route :: post ('message', fonction (Request $ request) {

    $ user = Auth :: user ();

    $ message = ChatMessage :: create ([
        'user_id' => $ user-> id,
        'message' => $ request-> input ('message')
    ]);

    event (nouveau ChatMessageWasReceived ($ message, $ user));


});

Nous saisissons le droit de l'utilisateur connecté d'insérer l'ID et le message dans la table chat_messages donnée, ainsi que le déclenchement de l'événement avec le message et l'objet utilisateur.

Tout cela couvre complètement le backend.

Configuration frontale

Laravel 5.4 est livré avec certains des fichiers javascript qui vont configurer jquery, bootstrap, vue et vue-resource, ce qui est très pratique pour être opérationnel rapidement.

La prochaine étape consistera à importer la bibliothèque frontend de Laravel Echo, puis à l’aide de resources / assets / js / bootstrap.js avec le code qui fait l’objet d’un commentaire, sans commenter:

importer Echo de "laravel-echo"

window.Echo = nouvel écho ({
    diffuseur: 'pousseur',
    clé: 'ffb166f4976941e634327c5',
    cluster: 'ap2',
    crypté: vrai
});

Rappelez-vous simplement d’ajouter la propre clé de poussoir.

La prochaine étape consistera à créer un fichier nommé chat.js, à le placer ensuite dans le dossier des composants javascript et à ajouter ce code en conséquence.

module.exports = {

    Les données() {
        revenir {
            des postes: [],
            newMsg: '',

        }
    },


    prêt() {
        Echo.channel ('public-test-channel')
            .listen ('ChatMessageWasReceived', (data) => {

                // Push ata to posts list.
                this.posts.push ({
                    message: data.chatMessage.message,
                    nom d'utilisateur: data.user.name
                });
            });
    },

    méthodes: {

        presse() {

            // Envoyer un message au backend.
            this. $ http.post ('/ message /', {message: this.newMsg})
                .then ((response) => {

                    // Efface le champ de saisie.
                    this.newMsg = '';
                });
        }
    }
};

Tout d’abord dans la méthode ready (), il écoute le canal public-test-channel spécifié dans Event ChatMessageWasRecieved.

Ensuite, il écoute tous les événements qui arrivent directement dans la classe d'événements, puis transfère les données reçues dans le tableau de données posts.

En conséquence, la méthode press () enverra un droit de requête ajax pour acheminer le fichier avec le message saisi par l'utilisateur. Enfin, vous devez ajouter le composant au fichier app.js de la manière suivante.

Vue.component ('exemple', require ('./ components / Example.vue'));
 Vue.component ('chat', require ('./ components / chat'));

Mise en place du fichier de vue

La dernière étape consistera à ajouter un champ de saisie permettant à l’utilisateur de commencer à discuter. Le bon endroit à ajouter est celui du fichier home.blade.php qui est livré avec Laravel par deflaut. On peut alors trouver le fichier dans resources / views / home.blade.php.

         Vous êtes authentifié!          

Écrire quelque chose à tous les utilisateurs               

Messages     
         @ {{post.username}} dit: @ {{post.message}}          

Nous ajoutons un fichier d'entrée avec le v-model = "newMsg" et un @ keyup.enter = "appuyer" pour déclencher la méthode Vue lorsque l'utilisateur appuie sur la touche Entrée.

Dans le , il suffit de parcourir les publications de l’utilisateur.

Emballer

C'est donc le moyen de créer une application de discussion simple avec Laravel 5.3 et Vue. Essayez d’ouvrir deux navigateurs et voyez s’il fonctionne.