Sådan oprettes en realtime-chatapp med Laravel 5.4 og VueJs

Laravel er et meget kommende felt i den moderne verden. Denne platform har hjulpet en med at udvikle forskellige aspekter af platformen på en ubesværet måde. Brugen af ​​Laravel Echo er også blevet meget almindelig. Laravel Echo er et Javascript-bibliotek, der gør det smertefrit at abonnere på forskellige kanaler og lytte til begivenhed udsendt af Laravel.

Der er også tilgængeligheden af ​​pusher-meddelelsestjeneste, hvor man kan oprette en konto med den egen messenger. Med brugen af ​​Laravel 5.3 til bladfiler såvel som Laravel Echos frontend-bibliotek med vue-resource, vil hele processen få meget let at køre hurtigt.

Lige i slutningen skal man være i stand til at åbne to browsere og se i overensstemmelse hermed, hvis chatten fungerer.

De afhængigheder, som man skal installere

Det hele starter med at installere disse pakker til at komme op og derefter køre med Laravel Echo / Broadcasting-begivenheder.

Man kan installere Echo via NPM-pakkehåndtering. Tag eksemplet, hvor vi kan installere pusher-js-pakken; den ene vil bruge Pusher-tv-stationen:

Man kan køre npm installation - gem laravel-ekko-pusher-js i terminalen.

Hvis man nu udsender begivenhederne over Pusher, skal man installere Pusher PHP SDK ved hjælp af Composer-pakkehåndtering:

komponist kræver pusher / pusher-php-server

Når man nu har alle de afhængigheder, der let er installeret, vil det være tid til at oprette en pusher.com-konto. Når man i overensstemmelse hermed har oprettet en konto og derefter oprettet en app, skal man se visse App-nøgler under fanen App-taster.

Bare kopier den nøgle til din .env-fil som denne.

PUSHER_APP_ID = 23222
PUSHER_KEY = ffssfb166f4976941e627c5
PUSHER_SECRET = 2o2323ojfw

Og husk at se tv-driveren, så Laravel ved, hvad driveren vil bruge.

BROADCAST_DRIVER = pusher

I filen config / broadcasting.php er det en god ide at tilføje nogle indstillinger til pusherforbindelse som denne

'pusher' => [
           'driver' => 'skubber',
           'key' => env ('PUSHER_APP_KEY'),
            'secret' => env ('PUSHER_APP_SECRET'),
            'app_id' => env ('PUSHER_APP_ID'),
            'optioner' => [
                 'cluster' => 'ap2',
                  'krypteret' => sandt
             ],
        ],

Nu skal vi prøve at oprette begivenhed for at se, om man kan skubbe nogle beskeder lige ind på Pusher-konto.

Bare gå til terminalen, og skriv derefter php håndværker, der gør begivenheden MessagePosted.

find klassen i appen / events / ChatMessageWas קיבל.php, så den implementerer ShouldBroadcast. Så ligesom dette

klasse ChatMeddelelseVar modtaget redskaber ShouldBroadcast
{

Nu vil vi oprette en passende chatbesked, vi skriver PHP artisan make: model ChatMessage –migration. Dette er kan oprette en model og en migrering for os og starte dette eller tilføje egne rækker.

Skema :: oprette ('chat_messages', funktion (Blueprint $ tabel) {
            $ Tabel-> intervaller ( 'id');
            $ Tabel-> string ( 'besked');
            $ Tabel-> heltal ( 'user_id') -> usigneret ();
            $ Tabel-> tidsstempler ();
        });

Sørg for at tilføje $ fillable til modellen.

klasse ChatMessage udvider Model
{
    public $ fillable = ['user_id', 'meddelelse'];
}

Prøv nu at injicere en bruger og meddelelserne direkte til begivenheden

klasse ChatMeddelelseVar modtaget redskaber ShouldBroadcast
{
    Brug InteractsWithSockets, SerializesModels;

    offentlig $ chatMeddelelse;
    offentlig $ bruger;

    / **
     * Opret en ny begivenhedsforekomst.
     *
     * @param $ chatMessage
     * @param $ bruger
     * /
    offentlig funktion __construct ($ chatMessage, $ bruger)
    {
        $ this-> chatMessage = $ chatMessage;
        $ dette-> bruger = $ bruger;
    }

    / **
     * Hent de kanaler, som begivenheden skal udsendes på.
     *
     * @ Return Channel | array
     * /
    public function broadcastOn ()
    {
        returnere ny kanal ('public-test-channel');
    }
}

Med vores rutefil web.php-fil vil vi indstille en rute for JavaScript til at foretage et ajax-opkald med en meddelelse.

// Send en besked af Javascript.
Rute :: post ('besked', funktion (Anmod om $ anmodning) {

    $ bruger = Auth :: bruger ();

    $ message = ChatMessage :: create ([
        'user_id' => $ bruger-> id,
        'message' => $ anmodning-> input ('meddelelse')
    ]);

    begivenhed (ny ChatMessageWasReceived ($ besked, $ bruger));


});

Vi griber ind den indloggede brugerrettighed for at indsætte id og beskeden i den givne chat_messages-tabel og også ilden for begivenheden med meddelelsen og brugerobjektet.

Alt dette dækker fuldstændigt backend.

Frontend-opsætning

Laravel 5.4 skibe med nogle af javascript-filerne, som vil opsætte jquery, bootstrap, vue og vue-resource, er virkelig praktisk til at komme hurtigt op og køre.

Det næste trin vil være at importere Laravel Echos frontend-bibliotek og derefter gøre det ved hjælp af ressourcer / aktiver / js / bootstrap.js med den kode, der er lavet som en kommentar, en kommentar, der skal ses:

importer Echo fra "laravel-echo"

windows.Echo = nyt Echo ({
    tv-station: 'pusher',
    nøgle: 'ffb166f4976941e634327c5',
    klynge: 'ap2',
    krypteret: sandt
});

Husk bare at tilføje den egen skubbetast.

Det næste trin vil være at gå og oprette en fil med navnet chat.js og derefter sætte den i overensstemmelse hermed i mappen javascriptkomponenter og i overensstemmelse hermed tilføje denne kode.

module.exports = {

    data() {
        Vend tilbage {
            indlæg: [],
            newMsg: '',

        }
    },


    klar () {
        Echo.channel ( 'offentlig-test-kanal')
            .listen ('ChatMessageWasReceived', (data) => {

                // Skub ata til indlægsliste.
                this.posts.push ({
                    besked: data.chatMessage.message,
                    brugernavn: data.user.name
                });
            });
    },

    metoder: {

        tryk på () {

            // Send besked til backend.
            dette. $ http.post ('/ message /', {message: this.newMsg})
                .then ((svar) => {

                    // Ryd indtastningsfelt.
                    this.newMsg = '';
                });
        }
    }
};

Først og fremmest i klar () -metode, lytter den til kanalens offentlige test-kanal, der er specificeret i Event ChatMessageWasRecieve

Derefter vil den lytte til eventuelle begivenheder, der kommer lige til Event Class og derefter skubbe i overensstemmelse hermed de modtagne data ind i posts data array.

Pressen () -metoden sender følgelig en ajax-anmodning ret til at rute fil med den meddelelse, der er indtastet af brugeren i visningen. Og det sidste, vi har brug for, er at tilføje komponenten til app.js-filen på følgende måde.

Vue.component ('eksempel', kræver ('./ komponenter / eksempel.vue'));
 Vue.component ('chat', kræv ('./ komponenter / chat'));

Opsætning af visningsfilen

Det sidste trin vil være at tilføje et inputfelt for brugeren at begynde at chatte. Det gode sted at tilføje, der er i filen home.blade.php, som sendes med Laravel ved deflaut. Man kan derefter finde filen i ressourcer / visninger / home.blade.php.

         Du er logget ind!     
    

Skriv noget til alle brugere

         
    

Beskeder     
         @ {{post.username}} siger: @ {{post.message}}          

Vi tilføjer et inputfiekd sammen med v-modellen = “newMsg” og en @ keyup.enter = ”press” for at udløse Vue-metoden, når brugeren trykker på Enter.

I vil man bare gå igennem brugerens indlæg.

Afslutter

Så det er måden at oprette en simpel chat-app med Laravel 5.3 og Vue. Prøv at åbne to browsere og se, om den fungerer.