Laravel 5.4 və VueJs ilə real vaxt söhbət proqramı necə yaradılır

Laravel müasir dünyada çox inkişaf etməkdə olan bir sahədir. Bu platforma platformanın müxtəlif aspektlərini asanlıqla inkişaf etdirməyə kömək etdi. Laravel Echo istifadəsi də geniş yayılmışdır. Laravel Echo, fərqli kanallara asanlıqla abunə olmağınıza və Laravel tərəfindən yayımlanan tədbirləri dinləməyinizə imkan verən bir Javascript kitabxanasıdır.

Öz messencerinizlə bir hesab yarada biləcəyiniz təkan mesajlaşma mövcuddur. Blade faylları üçün Laravel 5.3 və Vue-resurs ilə Laravel Echo-nun ön kitabxanasının istifadəsi ilə bütün proses çox asanlıqla və tez bir zamanda həyata keçirilir.

Ən sonunda iki brauzer aça və söhbətin işləyib işləmədiyini görə bilməli olmalısan.

Qurulacaq asılılıqlar

Hər şey bu paketlərin quraşdırılması ilə başlayır, beləliklə Laravel Echo / Broadcasting tədbirlərinə başlaya və işlədə bilərsiniz.

Echo'yu NPM paket meneceri vasitəsilə qura bilərsiniz. Pusher-js paketini qura biləcəyimiz nümunəni götürək. bir itələyən yayımçıdan istifadə ediləcək:

Terminalda npm install-save laravel-echo pusher-js-i işə sala bilərsiniz.

İndi hadisələri itələyici vasitəsi ilə itələyirsinizsə, bəstəkar paket menecerindən istifadə edərək itələyici PHP SDK quraşdırmalısınız:

bəstəkarlar pusher / pusher-php-serverə ehtiyac duyur

Sadəcə quraşdırılmış bütün asılılıqlarla, bir pusher.com hesabı qurma vaxtı gəldi. Müvafiq olaraq bir hesab yaratdınız və sonra bir tətbiq yaratdınızsa, Tətbiq açarı sekmesinin altında müəyyən tətbiq düymələrini görməlisiniz.

Bu açarı kopyalayıb bütün .env sənədinizə yapışdırın.

PUSHER_APP_ID = 23222 PUSHER_KEY = ffssfb166f4976941e627c5 PUSHER_SECRET = 2o2323ojfw

Və yayım sürücüsünü görməyi unutmayın, beləliklə Laravel hansı sürücünü istifadə edəcəyini bilsin.

BROADCAST_DRIVER = düymə

Config / broadcasting.php faylında push bağlantısına bəzi seçimləri aşağıdakı kimi əlavə etməyinizi məsləhət görürük

'pusher' => ['Sürücü' => 'İtici', 'açar' => env ('PUSHER_APP_KEY'), 'gizli' => env ('PUSHER_APP_SECRET'), 'app_id' => env ('PUSHER_APP_ID') , 'options' => ['cluster' => 'ap2', 'encrypted' => true],],

İndi bəzi mesajların birbaşa itələyici hesabına göndərilə biləcəyini görmək üçün bir hadisə yaratmağa çalışmalıyıq.

MessagePosted hadisəsini yaratmaq üçün sadəcə terminala gedin və php sənətkarını daxil edin.

ShouldBroadcast tətbiqini həyata keçirmək üçün tətbiq / hadisələr / ChatMessageWas Received.php-də sinfi tapın. Belə ki, necə

ChatMessageWasReceived sinfi ShouldBroadcast {tətbiq edir

İndi uyğun bir chat mesajı yaratmaq və PHP sənətkar markasına daxil olmaq istəyirik: model ChatMessage - köç. Bu, bizim üçün bir model və köç qura bilər və başlaya bilər və ya özlərinə məxsus xətlər əlavə edə bilər.

Schema :: create ('chat_messages', function (Blueprint $ table) {$ table-> increments ('id'); $ table-> string ('message'); $ table-> integer ('user_id') -> unsigned (); $ table-> timestamps ();});

Modelə $ fillable əlavə etdiyinizə əmin olun.

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

İndi istifadəçini və mesajları birbaşa tədbirə daxil etməyə çalışın

ChatMessageWasReceived sinfi ShouldBroadcast tətbiq edir {use InteractsWithSockets, SerializesModels; ictimai $ chatMessage; public $ user; / ** * Yeni bir hadisə nümunəsi yaradın. * * @param $ chatMessage * @param $ user * / public function __construct ($ chatMessage, $ user) {$ this-> chatMessage = $ chatMessage; $ this-> user = $ user; } / ** * Tədbirin yayımlanacağı kanalları əldə edin. * * @ Return Channel | array * / public function BroadOn () {return new channel ('public-test-channel'); }}

Marşrut faylı web.php ilə bir mesajla Ajax zəng etməsi üçün JavaScript üçün bir yol təyin edirik.

// Javascript vasitəsilə mesaj göndərin. Route :: post ('message', function (Request $ request) {$ user = Auth :: user (); $ message = ChatMessage :: create (['user_id' => $ user-> id, 'message' = > $ request-> input ('message')]); hadisə (yeni ChatMessageWasReceived ($ message, $ user));});

Verilən chat_messages cədvəlinə id və mesajı daxil etmək və hadisəni mesaj və istifadəçi obyekti ilə tetiklemek üçün daxil olmuş istifadəçi hüququna daxil oluruq.

Bütün bunlar tamamilə arxa tərəfdən əhatə olunur.

Frontend quraşdırma

Laravel 5.4 jquery, bootstrap, vue və vue-resource quran bəzi Javascript sənədləri ilə təchiz olunur.

Növbəti addım Laravel Echo-nun ön kitabxanasını idxal etmək və sonra Resources / дорои / js / bootstrap.js vasitəsilə içərisində bir şərhi olan kodla etmək olacaq.

"Laravel echo" pəncərəsindən əks-səda gətirin.Echo = yeni əks-səda ({göndərən: "pusher", açar: 'ffb166f4976941e634327c5', klaster: 'ap2', şifrələnmiş: true});

Öz itələyici açarınızı əlavə etməyi unutmayın.

Növbəti addım chat.js adlı bir fayl yaratmaq və sonra uyğun olaraq javascript komponentləri qovluğuna qoymaq və bu kodu müvafiq olaraq əlavə etməkdir.

module.exports = {data () {return {posts: [], newMsg: '',}}, ready () {Echo.channel ('public-test-channel'). Listen ('ChatMessageWasReceived', (data) => {// ata-nı yazı siyahısına göndərin. Bu.posts.push ({mesaj: data.chatMessage.message, istifadəçi adı: data.user.name});}); }, Metodlar: {Press () {// Arka tərəfə mesaj göndərin. bu. $ http.post ('/ message /', {message: this.newMsg}). sonra ((cavab) => {// giriş sahəsini silin. this.newMsg = ''}}); }}};

Əvvəlcə hazır () metodu ChatMessageWasRecieved hadisəsində göstərilən ümumi test kanalını gözləyir.

Sonra birbaşa hadisə sinfinə aid hadisələr axtarılır və alınan məlumatlar müvafiq olaraq post məlumat sahəsinə köçürülür.

Buna görə press () metodu, istifadəçinin daxil etdiyi mesajla faylı ötürmək üçün Ajax sorğusu göndərir. Etməli olduğumuz son şey, komponenti app.js faylına aşağıdakı şəkildə əlavə etməkdir.

Vue.component ('nümunə', tələb ('./ komponentlər / Example.vue')); Vue.component ('söhbət', tələb olunur ('./ komponentlər / söhbət'));

Görünüş sənədini qurun

Son addım, istifadəçinin söhbətə başlaya biləcəyi bir giriş sahəsi əlavə etməkdir. Əlavə etmək üçün yaxşı yer, varsayılan olaraq Laravel ilə gələn home.blade.php sənədidir. Daha sonra sənədi Resources / views / home.blade.php-də tapa bilərsiniz.

Daxil oldunuz! Bütün istifadəçilərə bir şey yazın xəbərlər @ {{post.username}} sagt: @ {{post.username}} deyir: @ {{post.message}} @ {{post.message}}

İstifadəçi giriş düyməsini basdıqda Vue metodunu işə salmaq üçün v-model = "newMsg" və @ keyup.enter = "press" ilə birlikdə bir giriş sahəsi əlavə edirik.

İçində yalnız istifadəçinin yazıları keçir.

Bükün

Bu, Laravel 5.3 və Vue ilə sadə bir söhbət tətbiqi etmək üçün əla bir yoldur. İki brauzer açmağa çalışın və işlədiyini yoxlayın.