Kuinka luoda reaaliaikainen chat-sovellus Laravel 5.4: n ja VueJ: ien kanssa

Laravel on erittäin uusi kenttä nykymaailmassa. Tämä foorumi on auttanut kehittämään foorumin erilaisia ​​näkökohtia vaivattomasti. Laravel Echon käytöstä on tullut myös hyvin yleistä. Laravel Echo on Javascript-kirjasto, jonka avulla on helppoa tilata erilaisia ​​kanavia ja kuunnella Laravelin lähettämiä tapahtumia.

Saatavana on myös työntöviestipalvelu, jossa voi luoda tilin omalla messengerillä. Kun Laravel 5.3: tä käytetään terätiedostoissa sekä Laravel Echon etusivukirjastoa vue-resurssien avulla, koko prosessi on erittäin helppo ajaa nopeasti.

Heti lopussa yhden pitäisi voida avata kaksi selainta ja nähdä vastaavasti, toimiiko chatti.

Riippuvuudet, jotka on asennettava

Koko alkaa näiden pakettien asentamisesta nousemaan ja suoritetaan sitten Laravel Echo / Broadcasting -tapahtumien kanssa.

Echo voidaan asentaa NPM-paketinhallinnan kautta. Otetaan esimerkki, missä voimme asentaa pusher-js-paketin; yksi käyttää Pusher-yleisradioyhtiötä:

Terminaalissa voidaan suorittaa npm asennussäästöä säästäviä laravel-kaiun työntäjiä-j.

Jos nyt lähetetään tapahtumia Pusherin kautta, Pusher PHP SDK: n pitäisi olla asennettuna Composer-paketinhallinnan avulla:

säveltäjä vaatii työntäjän / pusher-php-palvelimen

Nyt kun kaikki riippuvuudet on helppo asentaa, on aika perustaa pusher.com-tili. Kun vastaavasti on luotu tili ja sitten luotu sovellus, tietyt sovellusavaimet pitäisi nähdä sovellusnäppäimet -välilehdessä.

Kopioi vain tämä avain koko .env-tiedostoon näin.

PUSHER_APP_ID = 23222
PUSHER_KEY = ffssfb166f4976941e627c5
PUSHER_SECRET = 2o2323ojfw

Muista nähdä lähetysohjain, jotta Laravel tietää mitä ohjainta halutaan käyttää.

BROADCAST_DRIVER = työnnin

Config / broadcasting.php-tiedostoon on hyvä idea lisätä joitain vaihtoehtoja tällaisen yhteyden siirtämiseen

'työntäjä' => [
           'kuljettaja' => 'työntäjä',
           'key' => env ('PUSHER_APP_KEY'),
            'salainen' => env ('PUSHER_APP_SECRET'),
            'app_id' => env ('PUSHER_APP_ID'),
            'vaihtoehdot' => [
                 'klusteri' => 'ap2',
                  'salattu' => totta
             ],
        ],

Nyt meidän pitäisi yrittää luoda tapahtuma nähdäksesi, voidaanko jotkut viestit viedä suoraan Pusher-tilille.

Mene vain päätelaitteeseen ja kirjoita sitten php artisan, jolloin tapahtuma on MessagePosted.

etsi luokka sovelluksesta / tapahtumista / ChatMessageWas Received.php saaden sen toteuttamaan IfBroadcast. Joten näin

luokan ChatMessageWasVastaanotetut välineet tulisiBroadcast
{

Nyt haluamme luoda sopivan chat-viestin, kirjoitamme PHP-käsityöläisen merkki: malli ChatMessage –muutto. Tämä voi luoda meille mallin ja siirron ja aloittaa tämän tai lisätä omia rivejä.

Schema :: luo ('chat_messages', toiminto (Blueprint $ taulukko) {
            $ Pöytä-> kerrallaan (id);
            $ Pöytä-> string ( 'sanoma');
            $ Pöytä-> kokonaisluku ( 'user_id') -> unsigned ();
            $ Pöytä-> aikaleimat ();
        });

Muista lisätä malliin täytettävä $.

luokan ChatMessage laajentaa mallia
{
    public $ fillable = ['user_id', 'message'];
}

Yritä nyt pistää käyttäjä ja viestit suoraan tapahtumaan

luokan ChatMessageWasVastaanotetut välineet tulisiBroadcast
{
    käytä InteractsWithSockets, SerializesModels;

    julkinen $ chatMessage;
    julkinen $ käyttäjä;

    / **
     * Luo uusi tapahtumaesimerkki.
     *
     * @param $ chatMessage
     * @param $ -käyttäjä
     * /
    julkinen toiminto __construct ($ chatMessage, $ user)
    {
        $ this-> chatMessage = $ chatMessage;
        $ tämä-> käyttäjä = $ käyttäjä;
    }

    / **
     * Hanki kanavat, joissa tapahtuman tulisi lähettää.
     *
     * @kierrä kanava | -ryhmä
     * /
    julkisen toiminnan lähetysOn ()
    {
        palauttaa uusi kanava ('public-test-channel');
    }
}

Reittitiedostomme web.php-tiedostomme asettaa reitin JavaScriptille ajax-puhelun soittamiseksi viestillä.

// Lähetä viesti Javascriptin avulla.
Reitti :: viesti ('viesti', toiminto (Pyydä $ pyyntö) {

    $ user = Auth :: user ();

    $ viesti = ChatMessage :: luoda ([
        'user_id' => $ user-> id,
        'viesti' => $ pyyntö-> syöttö ('viesti')
    ]);

    tapahtuma (uusi ChatMessageWasReceptiond ($ viesti, $ käyttäjä));


});

Me tartumme sisään kirjautuneen käyttäjän oikeuteen lisätä tunnus ja viesti annettuun chat_messages-taulukkoon sekä tapahtuman tulipalo viestillä ja käyttäjäobjektilla.

Kaikki tämä kattaa kokonaan taustan.

Käyttöliittymän asennus

Laravel 5.4 toimitetaan joidenkin javascript-tiedostojen kanssa, jotka asettavat jquery-, bootstrap-, vue- ja vue-resurssit ovat todella käteviä nopeaan nousuun ja ajamiseen.

Seuraava askel on tuoda Laravel Echon käyttöliittymäkirjasto ja tehdä se sitten resursseilla / resources / js / bootstrap.js jollain koodilla, josta tehdään kommentti, kommentoimatta sitä:

tuo kaiku "laravel-echo"

ikkuna.Echo = uusi kaiku ({
    lähetystoiminnan harjoittaja: 'pusher',
    avain: 'ffb166f4976941e634327c5',
    klusteri: 'ap2',
    salattu: totta
});

Muista vain lisätä oma painike.

Seuraava vaihe on luoda ja luoda tiedosto nimeltä chat.js ja laittaa se vastaavasti javascript components -kansioon ja lisätä vastaavasti tämä koodi.

module.exports = {

    tiedot () {
        palauta {
            viestit: [],
            uusi viesti: '',

        }
    },


    valmis () {
        Echo.channel ( 'julkisen-testi-kanava')
            .listen ('ChatMessageWasReceptiond', (data) => {

                // Työnnä ata viestiluetteloon.
                this.posts.push ({
                    viesti: data.chatMessage.message,
                    käyttäjänimi: data.käyttäjänimi
                });
            });
    },

    menetelmät: {

        Lehdistö() {

            // Lähetä viesti taustalle.
            tämä. $ http.post ('/ viesti /', {viesti: this.newMsg})
                . sitten ((vastaus) => {

                    // Tyhjennä syöttökenttä.
                    this.newMsg = '';
                });
        }
    }
};

Ensinnäkin valmis () -menetelmässä se kuuntelee julkisen testikanavan, joka on määritetty tapahtumassa ChatMessageWasRecieved

Seuraavaksi se kuuntelee tapahtumia, jotka tulevat oikein tapahtumaluokkaan, ja työntää sitten vastaavasti vastaanotetut tiedot viestien tietojoukkoon.

Press () -menetelmä lähettää vastaavasti ajax-pyynnön oikeudesta reitittää tiedosto viestin kanssa, jonka käyttäjä on kirjoittanut tarkasteltavaksi. Viimeinen asia, jonka tarvitsemme, on komponentin lisääminen app.js-tiedostoon seuraavalla tavalla.

Vue.component ('esimerkki', vaadi ('./ komponentit / Esimerkki.vue'));
 Vue.component ('chat', vaatii ('./ komponentit / chat'));

Näkymätiedoston asettaminen

Viimeinen vaihe on lisätä syöttökenttä, jonka avulla käyttäjä voi keskustella. Hyvä paikka lisätä se on home.blade.php-tiedosto, joka lähetetään Laravelin kanssa tyhjäksi. Tiedosto voidaan sitten löytää lähteistä / views / home.blade.php.

         Olet kirjautunut sisään!          

Kirjoita jotain kaikille käyttäjille

              

Viestit     
         @ {{post.username}} sanoo: @ {{post.message}}          

Lisäämme tulosignaalin fiekd yhdessä v-model = “newMsg” ja @ keyup.enter = ”paina” käynnistääksesi Vue-menetelmän, kun käyttäjä painaa Enter.

-sovelluksessa yksi vain kulkee käyttäjän viestien läpi.

Käärimistä

Joten tällä tavalla voit luoda yksinkertaisen chat-sovelluksen Laravel 5.3: n ja Vue: n kanssa. Yritä avata kaksi selainta ja tarkista, toimiiko se.