Kuidas luua reaalajas vestluse rakendus koos Laravel 5.4 ja VueJ-dega

Laravel on kaasaegses maailmas väga tulemas valdkond. See platvorm on aidanud vaevata arendada erinevaid platvormi aspekte. Ka Laravel Echo kasutamine on muutunud väga tavaliseks. Laravel Echo on Javascripti raamatukogu, mis muudab valutuks mitmesuguste kanalite tellimise ja Laraveli edastatavate sündmuste kuulamise.

Samuti on saadaval tõukesõnumiteenus, kus saab konto luua oma Messengeri abil. Laravel 5.3 kasutamisel terafailide jaoks ja Laravel Echo esiküljekogu koos vue-ressursiga saab kogu protsessi kiireks käitamiseks väga lihtsaks.

Kohe lõpus peaks olema võimalik avada kaks brauserit ja vastavalt näha, kas vestlus töötab.

Sõltuvused, mida üks peab installima

Kogu algab nende pakettide installimisega üles tõusmiseks ja seejärel käivitamiseks koos Laravel Echo / Broadcasting sündmustega.

Echo võib installida NPM-i paketihalduri kaudu. Võtame näite, kuhu saame installida paketi pusher-js; üks kasutab raadiojaama Pusher:

Terminalis saab käivitada npm installimise abil salvestatavaid laravel-kaja tõukajaid-js.

Kui nüüd saate sündmusi Pusheri kaudu levitada, siis tuleks Pusher PHP SDK installida Composeri paketihalduri abil:

helilooja nõuab tõukurit / tõukurit-php-serverit

Nüüd, kui kõik sõltuvused on hõlpsasti installitavad, on aeg pusher.com-i konto üles seada. Kui üks on vastavalt konto loonud ja seejärel rakenduse loonud, peaks vahekaardi Rakenduse klahvid nägema teatud rakenduse võtmeid.

Kopeerige see võti lihtsalt kogu oma .env-faili.

PUSHER_APP_ID = 23222
PUSHER_KEY = ffssfb166f4976941e627c5
PUSHER_SECRET = 2o2323ojfw

Ja pidage meeles, et näete saateidraiverit, nii et Laravel teaks, mida draiver kasutada soovib.

BROADCAST_DRIVER = tõukur

Failis config / broadcasting.php on mõttekas lisada mõned võimalused ühenduse loomiseks niimoodi

'tõukur' => [
           'juht' => 'tõukur',
           'võti' => env ('PUSHER_APP_KEY'),
            'salajane' => env ('PUSHER_APP_SECRET'),
            'app_id' => env ('PUSHER_APP_ID'),
            'valikud' => [
                 'klaster' => 'ap2',
                  'krüptitud' => tõene
             ],
        ],

Nüüd peaksime proovima luua sündmuse, et näha, kas keegi saab mõne kirja otse Pusheri kontole suunata.

Lihtsalt minge terminali ja tippige siis php artisan, muutes sündmuse MessagePosted.

klassi leidmine rakendusest / sündmused / ChatMessageWasd.php, muutes selle IfBroadcast'i rakendama. Nii nagu see

klassi ChatMessageWasRetrieped tools shouldBroadcast
{

Nüüd soovime luua sobiva vestlussõnumi, kirjutame PHP artisan make: model ChatMessage –migration. See võib luua meie jaoks mudeli ja migratsiooni ning käivitada selle või lisada oma ridu.

Skeem :: loo ('chat_messages', funktsioon (tabel Blueprint $) {
            $ table-> juurdekasv ('id');
            $ table-> string ('teade');
            $ table-> täisarv ('user_id') -> unsigned ();
            $ tabel-> ajatemplid ();
        });

Lisage kindlasti mudelile täidetav dollar.

klassi ChatMessage laiendab mudelit
{
    avalik $ fillable = ['user_id', 'message'];
}

Proovige nüüd kasutaja ja sõnumid otse sündmusele süstida

klassi ChatMessageWasRetrieped tools shouldBroadcast
{
    kasutage rakendusi InteractsWithSockets, SerializesModels;

    avalik $ chatMessage;
    avalik $ kasutaja;

    / **
     * Looge uus sündmuse eksemplar.
     *
     * @param $ chatMessage
     * @param $ kasutaja
     * /
    avalik funktsioon __construct ($ chatMessage, $ kasutaja)
    {
        $ this-> chatMessage = $ chatMessage;
        $ see-> kasutaja = $ kasutaja;
    }

    / **
     * Hankige kanalid, mida sündmus peaks edastama.
     *
     * @return Channel | massiiv
     * /
    avalik funktsioon onOn ()
    {
        tagastama uue kanali ('avalik-test-kanal');
    }
}

Oma marsruudifailiga web.php määrame JavaScripti marsruudi ajax-kõne saamiseks teates.

// Saada sõnum Javascripti kaudu.
Route :: post ('teade', funktsioon (Request $ request) {

    $ kasutaja = Auth :: kasutaja ();

    $ message = ChatMessage :: looma ([
        'user_id' => $ user-> id,
        'teade' => $ päring-> sisend ('teade')
    ]);

    sündmus (uus ChatMessageWasReceptiond ($ teade, $ kasutaja));


});

Haarame sisse loginud kasutaja õiguse sisestada ID-d ja sõnumit antud chat_messages tabelisse ning ka sündmuse tulekahju koos teate ja kasutajaobjektiga.

Kõik see katab täielikult taustaprogrammi.

Esipaneeli seadistamine

Laravel 5.4 tarnitakse koos mõne JavaScripti failiga, mis seadistavad jquery, bootstrap, vue ja vue-ressursi. See on käepärast kiireks kasutamiseks.

Järgmine samm on Laravel Echo kasutajaliidese teegi importimine ja seejärel ressursside / varade / js / bootstrap.js abil mõne koodiga, millele tehakse kommentaar, märkimata, et näha:

impordi kaja "laravel-echo"

window.Echo = uus kaja ({
    ringhäälinguorganisatsioon: 'tõukur',
    võti: 'ffb166f4976941e634327c5',
    klaster: 'ap2',
    krüptitud: tõsi
});

Ärge unustage lisada oma tõukuklahvi.

Järgmine samm on luua fail chat.js nimega fail ja seejärel panna see vastavalt javascripti komponentide kausta ning lisada see kood.

moodul.exports = {

    andmed () {
        tagastama {
            postitused: [],
            newMsg: '',

        }
    },


    valmis () {
        Echo.channel (avalik test-kanal)
            .listen ('ChatMessageWasReceptiond', (andmed) => {

                // Lükake ata postituste loendisse.
                this.posts.push ({
                    sõnum: data.chatMessage.message,
                    kasutajanimi: data.user.name
                });
            });
    },

    meetodid: {

        vajutage () {

            // Saada sõnum taustal.
            see. $ http.post ('/ message /', {message: this.newMsg})
                . seejärel ((vastus) => {

                    // Tühjenda sisestusväli.
                    this.newMsg = '';
                });
        }
    }
};

Kõigepealt kuulab see valmis () meetodil avaliku kanali kanalit, mis on täpsustatud sündmuses ChatMessageWasRecieved

Järgmisena kuulab ta kõiki sündmusi, mis kuuluvad sündmusklassi, ja surub seejärel saadud andmed postituste andmemassiivi.

Vajutades () meetod saadab vastavalt ajax päringu faili marsruutimisõiguse koos vaadeldava kasutaja sisestatud teatega. Ja viimane, mida vajame, on komponendi lisamine faili app.js järgmisel viisil.

Vue.component ('näide', nõuda ('./ komponendid / näide.vue'));
 Vue.component ('vestlus', nõuda ('./ komponendid / vestlus'));

Vaatefaili seadistamine

Viimane samm on sisestusvälja lisamine, et kasutaja saaks vestelda. Hea koht selle lisamiseks on fail home.blade.php, mis saadetakse Laraveliga tühjaks. Seejärel saate faili leida ressurssidest / vaated / home.blade.php.

         Oled sisse logitud!     
    

Kirjutage kõigile kasutajatele midagi

         
    

Sõnumid

    
         @ {{post.username}} ütleb: @ {{post.message}}     
    

Lisame sisendi fiekd koos v-model = “newMsg” ja @ keyup.enter = ”vajutage” Vue meetodi käivitamiseks, kui kasutaja vajutab Enter.

Jaotises saab kasutaja postitusi lihtsalt ringi vaadata.

Pakkimine üles

Nii saabki Laravel 5.3 ja Vue abil luua lihtsa vestlusrakenduse. Proovige avada kaks brauserit ja vaadake, kas see töötab.