So erstellen Sie eine Echtzeit-Chat-App mit Laravel 5.4 und VueJs

Laravel ist ein sehr aufstrebendes Gebiet in der modernen Welt. Diese Plattform hat dazu beigetragen, verschiedene Aspekte der Plattform mühelos zu entwickeln. Die Verwendung von Laravel Echo ist ebenfalls weit verbreitet. Laravel Echo ist eine Javascript-Bibliothek, mit der Sie problemlos verschiedene Kanäle abonnieren und die von Laravel ausgestrahlten Ereignisse abhören können.

Es gibt auch die Verfügbarkeit von Push-Nachrichtendienst, wo man ein Konto mit dem eigenen Messenger erstellen kann. Mit der Verwendung von Laravel 5.3 für Blade-Dateien sowie Laravel Echos Frontend-Bibliothek mit vue-resource wird der gesamte Prozess sehr einfach und schnell ausgeführt.

Ganz am Ende sollte man in der Lage sein, zwei Browser zu öffnen und entsprechend zu sehen, ob der Chat funktioniert.

Die Abhängigkeiten, die man installieren muss

Das Ganze beginnt mit der Installation dieser Pakete, damit Sie Laravel Echo / Broadcasting-Ereignisse starten und ausführen können.

Man kann Echo über den NPM-Paketmanager installieren. Nehmen wir das Beispiel, in dem wir das Paket pusher-js installieren können. einer wird den Pusher Broadcaster benutzen:

Man kann npm install- save laravel-echo pusher-js im Terminal ausführen.

Wenn Sie nun die Ereignisse über Pusher übertragen, sollten Sie das Pusher PHP SDK mithilfe des Composer-Paketmanagers installieren:

composer benötigen pusher / pusher-php-server

Wenn alle Abhängigkeiten einfach installiert sind, ist es an der Zeit, ein pusher.com-Konto einzurichten. Wenn man dementsprechend ein Konto angelegt und dann eine App erstellt hat, sollte man unter dem Reiter App-Schlüssel bestimmte App-Schlüssel sehen.

Kopieren Sie diesen Schlüssel einfach in Ihre gesamte .env-Datei.

PUSHER_APP_ID = 23222
PUSHER_KEY = ffssfb166f4976941e627c5
PUSHER_SECRET = 2o2323ojfw

Und denken Sie daran, den Broadcast-Treiber zu sehen, damit Laravel weiß, welchen Treiber er verwenden möchte.

BROADCAST_DRIVER = Drücker

In der Datei config / broadcasting.php empfiehlt es sich, der Push-Verbindung wie folgt einige Optionen hinzuzufügen

'drücker' => [
           'Fahrer' => 'Drücker',
           'key' => env ('PUSHER_APP_KEY'),
            'secret' => env ('PUSHER_APP_SECRET'),
            'app_id' => env ('PUSHER_APP_ID'),
            'options' => [
                 'cluster' => 'ap2',
                  'verschlüsselt' => wahr
             ],
        ],

Jetzt sollten wir versuchen, ein Ereignis zu erstellen, um zu sehen, ob einige Nachrichten direkt in das Pusher-Konto übertragen werden können.

Gehen Sie einfach zum Terminal und geben Sie php artisan ein, um das Ereignis MessagePosted zu erstellen.

Finden Sie die Klasse in der app / events / ChatMessageWas Received.php, um den ShouldBroadcast zu implementieren. Also so

Die Klasse ChatMessageWasReceived implementiert ShouldBroadcast
{

Jetzt möchten wir eine entsprechende Chat-Nachricht erstellen und geben PHP artisan make ein: model ChatMessage –migration. Dies kann ein Modell und eine Migration für uns erstellen und diese starten oder eigene Zeilen hinzufügen.

Schema :: create ('chat_messages', function (Blueprint $ table) {
            $ table-> increments ('id');
            $ table-> string ('message');
            $ table-> integer ('user_id') -> unsigned ();
            $ table-> timestamps ();
        });

Stellen Sie sicher, dass Sie dem Modell $ fillable hinzufügen.

Klasse ChatMessage erweitert Model
{
    public $ fillable = ['user_id', 'message'];
}

Versuchen Sie nun, einen Benutzer und die Nachrichten direkt in das Ereignis einzufügen

Die Klasse ChatMessageWasReceived implementiert ShouldBroadcast
{
    benutze InteractsWithSockets, SerializesModels;

    public $ chatMessage;
    public $ user;

    / **
     * Erstellen Sie eine neue Ereignisinstanz.
     *
     * @param $ chatMessage
     * @param $ user
     * /
    public function __construct ($ chatMessage, $ user)
    {
        $ this-> chatMessage = $ chatMessage;
        $ this-> user = $ user;
    }

    / **
     * Rufen Sie die Kanäle ab, auf denen die Veranstaltung gesendet werden soll.
     *
     * @return Channel | array
     * /
    öffentliche Funktion broadcastOn ()
    {
        neuen Channel zurückgeben ('public-test-channel');
    }
}

Mit unserer Routendatei web.php legen wir eine Route für JavaScript fest, um einen Ajax-Anruf mit einer Nachricht zu tätigen.

// Sende eine Nachricht per Javascript.
Route :: post ('message', function (Request $ request) {

    $ user = Auth :: user ();

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

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


});

Wir greifen auf das angemeldete Benutzerrecht zu, um die ID und die Nachricht in die angegebene chat_messages-Tabelle einzufügen und auch das Auslösen des Ereignisses mit der Nachricht und dem Benutzerobjekt.

All dies deckt das Backend vollständig ab.

Frontend-Setup

Laravel 5.4 wird mit einigen der Javascript-Dateien ausgeliefert, die jquery, bootstrap, vue und vue-resource einrichten.

Der nächste Schritt wird darin bestehen, Laravel Echos Frontend-Bibliothek zu importieren und dies dann über resources / assets / js / bootstrap.js mit dem Code zu tun, der einen Kommentar enthält.

Echo aus "Laravel-Echo" importieren

window.Echo = neues Echo ({
    Sender: "Drücker",
    Schlüssel: 'ffb166f4976941e634327c5',
    Cluster: 'ap2',
    verschlüsselt: wahr
});

Denken Sie daran, den eigenen Drückerschlüssel hinzuzufügen.

Der nächste Schritt besteht darin, eine Datei mit dem Namen chat.js zu erstellen und sie dann entsprechend in den Javascript-Komponentenordner zu legen und diesen Code entsprechend hinzuzufügen.

module.exports = {

    Daten() {
        Rückkehr {
            Beiträge: [],
            newMsg: '',

        }
    },


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

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

    Methoden: {

        Drücken Sie() {

            // Nachricht an das Backend senden.
            this. $ http.post ('/ message /', {message: this.newMsg})
                .then ((Antwort) => {

                    // Eingabefeld löschen.
                    this.newMsg = '';
                });
        }
    }
};

Zunächst wird in der Methode ready () auf den Kanal public-test-channel gewartet, der im Ereignis ChatMessageWasRecieved angegeben ist

Als nächstes wird nach Ereignissen gesucht, die direkt zur Ereignisklasse gehören, und die empfangenen Daten werden entsprechend in das Post-Datenfeld verschoben.

Die press () -Methode sendet dementsprechend eine Ajax-Anfrage zum Weiterleiten der Datei mit der vom Benutzer eingegebenen Nachricht. Und als letztes müssen wir die Komponente auf folgende Weise zur Datei app.js hinzufügen.

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

Einrichten der Ansichtsdatei

Der letzte Schritt besteht darin, ein Eingabefeld hinzuzufügen, in das der Benutzer mit dem Chatten beginnen kann. Der gute Ort zum Hinzufügen ist die Datei home.blade.php, die per Deflaut mit Laravel geliefert wird. Man kann die Datei dann in resources / views / home.blade.php finden.

         Du bist eingeloggt!     
    

Schreiben Sie etwas an alle Nutzer          
    

Nachrichten     
         @ {{post.username}} sagt: @ {{post.message}}          

Wir fügen ein Eingabefeld zusammen mit dem v-model = "newMsg" und einem @ keyup.enter = "press" hinzu, um die Vue-Methode auszulösen, wenn der Benutzer die Eingabetaste drückt.

In der werden nur die Beiträge des Benutzers durchlaufen.

Einpacken

Auf diese Weise können Sie mit Laravel 5.3 und Vue eine einfache Chat-App erstellen. Versuchen Sie zwei Browser zu öffnen und prüfen Sie, ob es funktioniert.