Kako izraditi aplikaciju za chat u stvarnom vremenu s programom Laravel 5.4 i VueJs

Laravel je vrlo nadolazeće polje u modernom svijetu. Ova platforma pomogla je razvoju različitih aspekata platforme na jednostavan način. Uporaba Laravel Echo također je postala vrlo uobičajena. Laravel Echo je biblioteka Javascripta zbog koje se bezbolno pretplaćuje na različite kanale i sluša za događaje koje prenosi Laravel.

Postoji i dostupnost push-poruka usluga na kojima možete kreirati račun s vlastitim glasnikom. Upotrebom Laravel 5.3 za datoteke noževa, kao i knjižnicu sučelja Laravel Echo s vue-resursom, cijeli proces će se brzo pokrenuti.

Odmah na kraju trebali biste otvoriti dva preglednika i u skladu s tim vidjeti radi li chat.

Zavisnosti koje treba instalirati

Sve počinje instalacijom ovih paketa za ustajanje i zatim pokretanjem Laravel Echo / Broadcasting događaja.

Može se instalirati Echo putem upravitelja paketa NPM. Uzmimo primjer, gdje možemo instalirati pushher-js paket; jedan će koristiti Pusher emiter:

Moguće je pokrenuti npm install - spremite laravel-echo pushher-js u terminalu.

Ako neko emituje događaje preko Pushera, treba instalirati Pusher PHP SDK uz upotrebu Composer upravitelja paketa:

skladatelja zahtijevaju push / pushher-php-server

Sada, kada se sve lako postave, bit će vrijeme za postavljanje računa pushher.com. Ako je u skladu s tim stvorio račun, a zatim stvorio aplikaciju, na kartici Aplikacije trebate vidjeti određene ključeve aplikacije.

Samo kopirajte taj ključ u cijelu .env datoteku poput ove.

PUSHER_APP_ID = 23222
PUSHER_KEY = ffssfb166f4976941e627c5
PUSHER_SECRET = 2o2323ojfw

I zapamtite da vidite upravljački program tako da Laravel zna što vozač želi koristiti.

BROADCAST_DRIVER = potiskivač

U config / Broadcast.php datoteci dobra je ideja dodati neke mogućnosti za potiskivanje veze poput ove

'gurač' => [
           'vozač' => 'potisnik',
           'tipka' => env ('PUSHER_APP_KEY'),
            'tajna' => env ('PUSHER_APP_SECRET'),
            'app_id' => env ('PUSHER_APP_ID'),
            'opcije' => [
                 'cluster' => 'ap2',
                  'kodiran' => istina
             ],
        ],

Sada bismo trebali pokušati stvoriti događaj da vidimo može li netko gurnuti neke poruke pravo na Pusher račun.

Samo idite do terminala, a zatim upišite php artisan izrađujući događaj MessagePosted.

pronađite klasu u aplikaciji / događajima / ChatMessageWas Received.php čineći je implementacijom ShouldBroadcast. Tako ovako

klasa ChatMessageWasReceived implementacije ShouldBroadcast
{

Sada želimo stvoriti odgovarajuću chat poruku, upišemo PHP artisan make: model ChatMessage –migracija. Ovo može stvoriti model i migraciju za nas i pokrenuti ovo ili dodati vlastite redove.

Shema :: create ('chat_messages', funkcija (Blueprint $ table) {
            $ Table> koracima ( 'id');
            $ Table> string ( 'poruke');
            $ Table> broj ( 'user_id') -> nepotpisani ();
            $ Table> vremenske oznake ();
        });

Obavezno dodajte $ fillable u model.

klasa ChatMessage proširuje Model
{
    public $ fillable = ['user_id', 'message'];
}

Sada pokušajte ubrizgati korisnika i poruke pravo na događaj

klasa ChatMessageWasReceived implementacije ShouldBroadcast
{
    koristite InteractsWithSockets, SerializedModels;

    javni $ chatMessage;
    javni $ korisnik;

    / **
     * Stvorite novu instancu događaja.
     *
     * @param $ chatMessage
     * @param $ korisnik
     * /
    javna funkcija __construct ($ chatMessage, $ korisnik)
    {
        $ this-> chatMessage = $ chatMessage;
        $ this-> user = $ korisnik;
    }

    / **
     * Nabavite kanale na kojima bi događaj trebao emitirati.
     *
     * @return Channel | niz
     * /
    javna funkcija emisijaOn ()
    {
        vrati novi kanal ('javni-test-kanal');
    }
}

Pomoću naše datoteke rute web.php postavit ćemo rutu za JavaScript za upućivanje ajax poziva s porukom.

// Pošaljite poruku Javascript-om.
Ruta :: pošta ('poruka', funkcija (zahtjev $ zahtjeva) {

    $ user = Auth :: user ();

    $ message = ChatMessage :: create ([
        'user_id' => $ user-> id,
        'message' => $ zahtjev-> ulaz ('poruka')
    ]);

    događaj (novi ChatMessageWasReceived ($ poruka, $ korisnik));


});

Zgrabimo prijavljenog korisnika pravo da umetnemo id i poruku u zadanu tablicu chat_ poruka, a također i vatru događaja s porukom i korisničkim objektom.

Sve to u potpunosti pokriva potporu.

Postavljanje sučelja

Laravel 5.4 isporučuje se s nekim JavaScript datotekama koje će postaviti jquery, bootstrap, vue i vue-resurs zaista je zgodan za brzo ustajanje i brzo trčanje.

Sljedeći korak bit će uvoziti biblioteku sučelja Laravel Echo, a zatim to učiniti resursima / imovinom / js / bootstrap.js s nekim kodom na koji je komentiran komentar, pa komentirajte:

import Echo iz "laravel-eho"

window.Echo = novi odjek ({
    emiter: 'gurač',
    ključ: 'ffb166f4976941e634327c5',
    cluster: 'ap2',
    šifrirano: istinito
});

Sjetite se samo dodati vlastiti potisni ključ.

Sljedeći korak je kreiranje datoteke stvoriti pod nazivom chat.js, a zatim je u skladu s tim staviti u mapu komponenti JavaScripta i, prema tome, dodati ovaj kôd.

module.exports = {

    podaci () {
        povratak {
            postovi: [],
            newMsg: '',

        }
    }


    spreman () {
        Echo.channel ( 'javno-Test-kanal')
            .listen ('ChatMessageWasReceived', (podaci) => {

                // Gurnite ata na popis postova.
                this.posts.push ({
                    poruka: data.chatMessage.message,
                    korisničko ime: data.user.name
                });
            });
    }

    metode: {

        pritisnite () {

            // Pošaljite poruku pozadini.
            ovo. $ http.post ('/ message /', {message: this.newMsg})
                . tada ((odgovor) => {

                    // Očistite polje unosa.
                    this.newMsg = '';
                });
        }
    }
};

Prije svega u pripravnoj () metodi, preslušat će javni-testni kanal koji je naveden u događaju ChatMessageWasRecieved

Dalje će preslušati sve događaje koji dolaze točno u klasu događaja i zatim u skladu s tim gurnuti primljene podatke u niz podataka podataka o postovima.

Metoda press () u skladu s tim će poslati ajax zahtjev za usmjeravanje datoteke s porukom koju je tipkao korisnik u pregledavanju. I zadnje što trebamo je dodati komponentu u app.js datoteku na sljedeći način.

Vue.component ('primjer', zahtijevaju ('./ components / Example.vue'));
 Vue.component ('chat', zahtjev ('./ components / chat'));

Postavljanje datoteke prikaza

Posljednji korak bit će dodavanje polja za unos da korisnik započne razgovarati. Dobro mjesto za dodati ovo je u datoteci home.blade.php koja se s Laravelom isporučuje deflautom. Zatim datoteku možete pronaći u resursima / views / home.blade.php.

         Prijavljeni ste!     
    

Napišite nešto svim korisnicima

         
    

Poruke     
         @ {{post.username}} kaže: @ {{post.message}}          

Dodajemo ulazni fiekd, zajedno s v-modelom = „newMsg“ i @ keyup.enter = „pritisnite“ za pokretanje Vue metode kada korisnik pritisne Enter.

U , jedan će samo pregledavati korisnikove postove.

Završavati

Dakle, to je način za stvaranje jednostavne aplikacije za chat s Laravelom 5.3 i Vue. Pokušajte otvoriti dva preglednika i provjerite radi li.