Laravel 5.4 va VueJ-lar yordamida haqiqiy vaqtda chatlar ilovasini qanday yaratish

Laravel - zamonaviy dunyoda juda yaqinlashib kelayotgan soha. Ushbu platforma platformaning turli tomonlarini osonlikcha ishlab chiqishga yordam berdi. Laravel Echo-dan foydalanish ham juda keng tarqalgan. Laravel Echo - bu Javascript kutubxonasidir, u turli kanallarga obuna bo'lish va Laravel tomonidan namoyish etilayotgan tadbirlarni tinglashni og'riqsiz qiladi.

Shuningdek, o'z messenjerida qayd yozuvini yaratishingiz mumkin bo'lgan itarib yuborish xizmati mavjud. Pichoqli fayllar uchun Laravel 5.3 va Luevel Echo ning vue-resursli kutubxonasidan foydalanish bilan butun jarayon juda oson ishlaydi.

Oxirida, ikkita brauzerni ochish va chat ishlayotganligini ko'rish kerak.

O'rnatish kerak bo'lgan bog'liqliklar

Hammasi Laravel Echo / Broadcasting tadbirlarida turish uchun ushbu paketlarni o'rnatish va keyin ishga tushirish bilan boshlanadi.

Echo-ni NPM paket menejeri orqali o'rnatish mumkin. Pusher-js paketini qaerga o'rnatishimiz mumkinligini misol qilib oling; biri Pusher translyatoridan foydalanadi:

Terminalda npm-ni o'rnatib, lara-echo itaruvchi-js-ni saqlash mumkin.

Agar kimdir voqealarni Pusher orqali uzatayotgan bo'lsa, kompozit paket menejeri yordamida Pusher PHP SDK-ni o'rnatish kerak:

kompozitorga sichqoncha / itaruvchi-php-server kerak bo'ladi

Endi barcha bog'liqliklarni osongina o'rnatib olgach, pusher.com hisob qaydnomasini o'rnatish vaqti keldi. Agar tegishli ravishda hisob qaydnomasini yaratib, so'ngra Ilovani yaratgan bo'lsangiz, u holda "App klavishalari" yorlig'i ostida ma'lum App tugmachalarini ko'rish kerak.

Shunchaki ushbu kalitni .env faylingizga nusxa ko'chiring.

PUSHER_APP_ID = 23222
PUSHER_KEY = ffssfb166f4976941e627c5
PUSHER_SECRET = 2o2323ojfw

Va Laravel qaysi drayverni ishlatishni xohlashini bilib olishi uchun translyatsiya drayverini ko'rishni unutmang.

BROADCAST_DRIVER = itaruvchi

Config / spread.php faylida shunga o'xshash itaruvchi ulanish uchun ba'zi variantlarni qo'shish yaxshi fikr

'itaruvchi' => [
           'driver' => 'itaruvchi',
           'key' => env ('PUSHER_APP_KEY'),
            'secret' => env ('PUSHER_APP_SECRET'),
            'app_id' => rasm ('PUSHER_APP_ID'),
            'options' => [
                 'klaster' => 'ap2',
                  'encrypted' => true
             ],
        ],

Endi biz Pusher hisobiga ba'zi xabarlarni to'g'ridan-to'g'ri yuborish mumkinligini ko'rish uchun voqea yaratishga harakat qilishimiz kerak.

Terminalga kirib, php usta-ni tering va MessagePosted-da tadbirni amalga oshiring.

ilovani / voqealarni / ChatMessageWas Received.php-da sinfni ShouldBroadcast-da amalga oshirish uchun toping. Shunday qilib

sinf ChatMessageWasKabul qilingan ShouldBroadcast dasturlari
{

Endi biz tegishli chat xabarini yaratmoqchimiz, PHP usta yaratamiz: ChatMessage modeli - migratsiya. Bu biz uchun model va ko'chirishni yaratishi va uni boshlashi yoki o'z qatorlarini qo'shishi mumkin.

Schema :: create ('chat_messages', funktsiya ($ jadval jadvaliga) {
            $ table-> qadamlar ('id');
            $ table-> string ('xabar');
            $ table-> integer ('user_id') -> imzolanmagan ();
            $ table-> vaqt belgilari ();
        });

Modelga $ to'ldiriladigan vositani qo'shganingizga ishonch hosil qiling.

sinf ChatMessage Model kengaytiradi
{
    public $ fillable = ['user_id', 'message'];
}

Endi foydalanuvchi va xabarlarni voqeaga to'g'ri kiritishga harakat qiling

sinf ChatMessageWasKabul qilingan ShouldBroadcast dasturlari
{
    InteractsWithSockets, SerializesModels-dan foydalaning;

    ommaviy $ chatMessage;
    jamoat $ foydalanuvchisi;

    / **
     * Yangi voqea namunasini yarating.
     *
     * @param $ chatMessage
     * @param $ foydalanuvchisi
     * /
    ommaviy funktsiya __konstruktsiya ($ chatMessage, $ user)
    {
        $ this-> chatMessage = $ chatMessage;
        $ this-> user = $ foydalanuvchi;
    }

    / **
     * Tadbir translyatsiya qilinishi kerak bo'lgan kanallarni oling.
     *
     * Kanalni qaytarish | qator
     * /
    jamoat vazifasi BroadOn ()
    {
        yangi kanalni qaytaring ('public-test-channel');
    }
}

Web.php marshrut fayli bilan biz JavaScript-ga xat bilan qo'ng'iroq qilish uchun marshrutni o'rnatamiz.

// Javascript orqali xabar yuboring.
Route :: post ('xabar', funktsiya ($ so'rovni so'rash) {

    $ user = Auth :: foydalanuvchi ();

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

    voqea (yangi ChatMessageWasReceived ($ xabar, $ foydalanuvchi));


});

Biz ushbu chat_messages jadvaliga id va xabarni kiritish uchun kirgan foydalanuvchi huquqini olamiz, shuningdek xabar va foydalanuvchi ob'ekti bilan voqea olovini olamiz.

Bularning barchasi orqa tomonni to'liq qoplaydi.

Frontend-ni sozlash

Laravel 5.4 javascript-ning ba'zi fayllari bilan jquery, bootstrap, vue-vue-res-ni o'rnatadi, u tezda turish va ishga tushirish uchun juda qulaydir.

Keyingi qadam Laravel Echo-ning tashqi kutubxonasini import qilish va keyin buni manbalar / aktivlar / js / bootstrap.js yordamida, ba'zi sharh qilingan ba'zi bir kodlar bilan, ko'rish uchun izohlanmagan holda amalga oshiriladi:

Echo-ni "larva-echo" dan import qilish

windows.Echo = yangi echo ({
    ko'rsatuvchi: "itaruvchi",
    kalit: 'ffb166f4976941e634327c5',
    klaster: 'ap2',
    shifrlangan: haqiqiy
});

O'zingizning itarish kalitingizni qo'shishni unutmang.

Keyingi qadam chat.js nomli faylni yaratish va uni tegishli ravishda javascript komponentlari papkasiga kiritish va shunga mos ravishda ushbu kodni qo'shishdir.

modul.exports = {

    ma'lumotlar () {
        return {
            xabarlar: [],
            newMs: '',

        }
    },


    tayyor () {
        Exo.channel ("ommaviy sinov kanallari")
            .listen ('ChatMessageWasReceived', (ma'lumotlar) => {

                // Xabarlarni ro'yxatiga atani bosing.
                this.posts.push ({
                    xabar: data.chatMessage.message,
                    foydalanuvchi nomi: data.user.name
                });
            });
    },

    usullari: {

        press () {

            // xabarni backend-ga yuboring.
            bu. $ http.post ('/ message /', {message: this.newMsg})
                .then ((javob) => {

                    // Kirish maydonini tozalash.
                    this.newMsg = '';
                });
        }
    }
};

Birinchidan, tayyor () usulida, Voqealar ChatMessageWasRecited-da ko'rsatib o'tilgan ommaviy kanal-kanalni tinglaydi.

Keyin u voqealar sinfiga to'g'ri keladigan har qanday voqealarni tinglaydi va so'ngra olingan ma'lumotlarni postlar qatoriga o'tkazadi.

Shunday qilib, press () usuli, foydalanuvchi tomonidan yozilgan xabar bilan faylni yo'naltirish uchun ajax so'rovini yuboradi. Va bizga kerak bo'ladigan oxirgi narsa bu tarkibiy qismni app.js fayliga quyidagicha qo'shishdir.

Vue.component ('misol', talab ('./ komponentlar / Misol.vue'));
 Vue.component ('chat', talab ('./ komponentlar / chat'));

Ko'rish faylini sozlash

So'nggi qadam foydalanuvchi suhbatni boshlash uchun kirish maydonini qo'shishdir. Laravel bilan deflaut orqali jo'natiladigan home.blade.php faylida buni qo'shish uchun yaxshi joy. Keyin faylni manbalarda / views / home.blade.php-da topish mumkin.

         Siz tizimga kirgansiz!     
    

Barcha foydalanuvchilarga biror narsa yozing

         
    

Xabarlar

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

Foydalanuvchi kiritish tugmachasini bosganda Vue usulini ishga tushirish uchun biz v-model = "newMsg" ni va @ keyup.enter = "press" ni qo'shamiz.

da foydalanuvchining yozuvlarini ko'rib chiqish kifoya.

O'ramoq

Shunday qilib, Laravel 5.3 va Vue-da oddiy chat ilovasini yaratish usuli. Ikkita brauzerni ochib ko'ring va u ishlayotganligini tekshirib ko'ring.