Kako sestaviti aplikacijo za sprotni klepet s programom Laravel 5.4 in VueJs

Laravel je zelo prihajajoče področje v sodobnem svetu. Ta platforma je pomagala pri razvoju različnih vidikov platforme na enostaven način. Zelo pogosta je postala tudi uporaba zdravila Laravel Echo. Laravel Echo je knjižnica Javascript, ki omogoča neboleče naročanje na različne kanale in poslušanje dogodkov, ki jih oddaja Laravel.

Na voljo je tudi storitev potisnih sporočil, kjer lahko ustvarite račun s svojim messengerjem. Z uporabo Laravel 5.3 za datoteke rezil in knjižnico sprednje strani Laravel Echo z vue-resource bo celoten postopek hitro potekal.

Takoj na koncu bi morali imeti možnost odpreti dva brskalnika in v skladu s tem videti, ali klepet deluje.

Odvisnosti, ki jih mora nekdo namestiti

Celotno se začne z namestitvijo teh paketov za vstajanje in nato z izvajanjem dogodkov Laravel Echo / Broadcasting.

Echo lahko namestite prek upravitelja paketov NPM. Vzemimo primer, kam lahko namestimo pushher-js paket; eden bo uporabljal program Pusher:

Lahko zaženete npm install - shranite laravel-echo pushher-js v terminal.

Zdaj, če nekdo predvaja dogodke prek Pusherja, bi moral namestiti PKER PHP SDK z uporabo upravitelja paketov Composer:

skladatelj zahteva potisni / potisni-php-strežnik

Zdaj, ko bomo imeli vse odvisnosti enostavno nameščene, bo čas za ustanovitev računa pushher.com. Če je kdo ustvaril račun in nato ustvaril aplikacijo, bi morali na zavihku App tipke videti nekatere ključe aplikacije.

Prekopirajte ta ključ v celotno .env datoteko, kot je ta.

PUSHER_APP_ID = 23222
PUSHER_KEY = ffssfb166f4976941e627c5
PUSHER_SECRET = 2o2323ojfw

In ne pozabite videti gonilnika oddaje, da bo Laravel vedel, kaj bo voznik želel uporabljati.

BROADCAST_DRIVER = potisnik

V datoteki config / Broadcast.php je dobro dodati nekaj možnosti za potisno povezavo, kot je ta

'potisnik' => [
           'gonilnik' => 'potisnik',
           'tipka' => env ('PUSHER_APP_KEY'),
            'skrivnost' => env ('PUSHER_APP_SECRET'),
            'app_id' => env ('PUSHER_APP_ID'),
            'možnosti' => [
                 'cluster' => 'ap2',
                  'šifrirano' => res
             ],
        ],

Zdaj bi morali poskušati ustvariti dogodek, da vidimo, ali lahko neko sporočilo potisnemo direktno v račun Pusher.

Pojdite do terminala in nato vtipkajte php obrtnik, ki je dogodek MessagePosted.

poiščite razred v aplikaciji / dogodki / ChatMessageWas Received.php, zaradi česar bo izvajal ShouldBroadcast. Torej takole

razred ChatMessageWasReceived implementacije ShouldBroadcast
{

Zdaj želimo ustvariti ustrezno sporočilo za klepet, vtipkamo PHP artisan make: model ChatMessage –migration. To lahko ustvari model in selitev za nas in zažene to ali doda lastne vrstice.

Shema :: create ('chat_messages', funkcija (Blueprint $ table) {
            $ table-> prirastki ('id');
            $ table-> string ('sporočilo');
            $ table-> celo število ('user_id') -> brez podpisa ();
            $ table-> časovne žige ();
        });

Pazite, da v model dodate $ fillable.

razred ChatMessage razširja Model
{
    public $ fillable = ['user_id', 'message'];
}

Zdaj poskusite vbrizgati uporabnika in sporočila prav do dogodka

razred ChatMessageWasReceived implementacije ShouldBroadcast
{
    uporabite InteractsWithSockets, SerializesModels;

    javni $ chatMessage;
    javni $ uporabnik;

    / **
     * Ustvari nov primerek dogodka.
     *
     * @param $ chatMessage
     * uporabnik @param $
     * /
    javna funkcija __construct ($ chatMessage, $ user)
    {
        $ this-> chatMessage = $ chatMessage;
        $ this-> user = $ uporabnik;
    }

    / **
     * Pridobite kanale, na katerih naj bi dogodek predvajal.
     *
     matrika * @return Channel |
     * /
    javna funkcija oddajaOn ()
    {
        vrne nov kanal ("javni-test-kanal");
    }
}

Z našo datoteko o poti web.php bomo določili pot za JavaScript za klic ajax s sporočilom.

// Pošlji sporočilo preko Javascript.
Pot :: objava ('sporočilo', funkcija (Zahtevaj zahtevo $) {

    $ user = Auth :: user ();

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

    dogodek (nov ChatMessageWasReceived ($ sporočilo, $ uporabnik));


});

Zagrabljeni prijavljeni uporabnik vstavimo id in sporočilo v dano tabelo chat_messages ter tudi požar dogodka s sporočilom in uporabniškim objektom.

Vse to v celoti pokriva zaledje.

Nastavitev sočelja

Laravel 5.4 vsebuje nekaj datotek javascripta, ki bodo namestili jquery, bootstrap, vue in vue-resource, resnično priročen za hitro vstajanje in tek.

Naslednji korak bo uvoziti knjižnico sprednje strani Laravel Echo in nato storiti z viri / sredstva / js / bootstrap.js z neko kodo, ki je dodala komentar, in komentirajte:

import Echo iz "laravel-eho"

window.Echo = nov odmev ({
    izdajatelj: "potisnik",
    tipka: 'ffb166f4976941e634327c5',
    grozd: 'ap2',
    šifrirano: res
});

Ne pozabite dodati lastne tipke.

Naslednji korak bo, da odprete datoteko z imenom chat.js in jo nato vstavite v mapo s komponentami javascripta in temu dodate to kodo.

module.exports = {

    podatki () {
        vrnitev {
            objave: [],
            newMsg: '',

        }
    },


    pripravljen () {
        Echo.channel ('javni-test-kanal')
            .listen ('ChatMessageWasReceived', (podatki) => {

                // Potisni ata na seznam objav.
                this.posts.push ({
                    sporočilo: data.chatMessage.message,
                    uporabniško ime: data.user.name
                });
            });
    },

    metode: {

        pritisnite () {

            // Pošlji sporočilo za nazaj.
            to. $ http.post ('/ message /', {message: this.newMsg})
                . takrat ((odgovor) => {

                    // Počistite polje za vnos.
                    this.newMsg = '';
                });
        }
    }
};

Najprej v metodi ready (), bo poslušal javno-testni kanal, ki je določen v Event ChatMessageWasRecieved

Nato bo prisluhnil vsem dogodkom, ki pridejo prav do razreda dogodkov, nato pa bo prejel prejete podatke v niz podatkov o objavah.

Metoda press () bo zato poslala zahtevo ajax za usmerjanje datoteke s sporočilom, ki ga je vpisal uporabnik. In zadnje, kar potrebujemo, je, da komponento v datoteko app.js dodamo na naslednji način.

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

Nastavitev datoteke za ogled

Zadnji korak bo dodal polje za vnos, da lahko uporabnik začne klepetati. Dobro mesto za dodajanje tega je v datoteki home.blade.php, ki je skupaj z Laravelom odpuščena. Nato lahko datoteko najdete v resource / views / home.blade.php.

         Prijavljeni ste!     
    

Napišite nekaj vsem uporabnikom

         
    

Sporočila

    
         @ {{post.username}} pravi: @ {{post.message}}     
    

Vhodni fiekd dodamo skupaj z v-model = "newMsg" in @ keyup.enter = "pritisnite" za sprožitev metode Vue, ko uporabnik pritisne Enter.

V bo eden samo brskal po uporabnikovih objavah.

Zavijanje

Tako lahko ustvarite preprosto aplikacijo za klepet s programoma Laravel 5.3 in Vue. Poskusite odpreti dva brskalnika in preverite, ali deluje.