Bu yazıda backend tarafı Laravel API ile geliştirilmiş bir projenin Nuxt.js ile geliştirilmiş frontend tarafında Pusher servisini nasıl kullanabileceğimizi göreceğiz.
İşe başlamadan önce backend tarafındaki tüm işlemlerin eksiksiz tamamlandığını ve Pusher servisine şu anda bildirimlerin gittiğini varsayıyoruz.
Nuxt.js bize Pusher ve Laravel Echo ile çalışmamız için hazır bir paket sunmakta. Bu adresten paketi inceleyebilirsiniz. Biz de ilk olarak bu paketi kuracağız. Hemen kuruluma geçelim.
İlk önce Pusher paketini sistemimize ekleyelim.
|
1 2 3 |
yarn add pusher-js // veya npm install pusher-js |
Ardından laravel-echo paketini sistemimize ekleyelim.
|
1 2 3 |
yarn add --dev @nuxtjs/laravel-echo // veya npm install --save-dev @nuxtjs/laravel-echo |
Gerekli paketlerin sistemde eksiksiz kurulu olduğundan emin olduktan sonra nuxt.config.js dosyamıza aşağıdaki gibi ekleme yapalım.
|
1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16 17 18 19 20 21 |
modules: [ [ '@nuxtjs/laravel-echo', { broadcaster: process.env.BROADCASTER, key: process.env.PUSHER_KEY, cluster: process.env.PUSHER_CLUSTER, encrypted: process.env.PUSHER_ENCRYPTED, // wsHost: '', // wsPort: 6001, disableStats: true, authEndpoint: process.env.BROADCASTING_AUTH_ENDPOINT, // namespace: '' } ] ], echo: { authModule: true, connectOnLogin: true, disconnectOnLogout: true }, |
Biraz kodları incelesek iyi olur. modules kısmında laravel-echo paketini sisteme dahil ettik ve gerekli ayarları parametre olarak hemen verdik. Buradaki değerler gördüğünüz gibi enviroment değişkenlerden çekiliyor. Hem güvenlik hem geliştirme hem de projenin ileri safhasında değişiklik yaparken işimizi kolaylaştırması açısından en doğru seçim enviroment kullanmak olacaktır. Sizin de bu şekilde yapmaya dikkat etmenizde fayda var.
.env dosyası oluşturalım ve gerekli değerleri aşağıdaki gibi tanımlayalım. İsterseniz dosya oluşturmadan doğruca sistem bazında tanımlama da yapabilirsiniz.
|
1 2 3 4 5 |
BROADCASTING_AUTH_ENDPOINT="https://SITE_ADRESI/broadcasting/auth" BROADCASTER="pusher" PUSHER_KEY="0000000000" PUSHER_CLUSTER="eu" PUSHER_ENCRYPTED="true" |
Şimdi bu ayarları test edebileceğimiz ilk bağlantımızı kurmaya çalışalım. Herhangi bir .vue dosyanızda aşağıdaki işlemleri yapabilirsiniz ama ben default.vue dosyasını kullanmanızı öneririm. Böylelikle projenin her yerinde bildirimleri alabiliyor olacaksınız. İsterseniz farklı bir component olarak tasarlayıp sadece ihtiyacınız olan yerlerde de kullanabilirsiniz.
Bildirimler için bir hikâye uydurmayı düşündüm ama sonra vazgeçtim. Bu nedenle bildirim isimlerini görmezden gelerek diğer noktalara odaklanmaya çalışın.
|
1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16 17 18 19 20 21 22 23 24 25 26 27 28 29 30 31 32 33 34 35 36 |
export default { mounted() { const $this = this // NOT : Oturumun açık olduğu varsayılmıştır.. // Kullanıcıya Özel Bildirimler const user = this.$store.getters['Auth/getUser'] $this.$echo.private('App.Models.User.' + user.id) .notification((notification) => { if(notification.type === 'App\\Notifications\\User\\Test1Notification'){ let row = { created_at: notification.created_at, message: notification.message, } this.$store.dispatch('Notification/addNotification', row) } if(notification.type === 'App\\Notifications\\User\\Test2Notification'){ let row = { message: notification.message, } this.$store.dispatch('Notification/addNotification', row) } }) ; // Genel Bildirimler $this.$echo.channel('FRONTEND').listen('Test3Notification', (notification) => { let row = { created_at: notification.created_at, message: notification.message, } this.$store.dispatch('Notification/addNotification', row) }); }, } |
Kullanıcı bildirimleri kısmında Laravel tarafından doğruca kullanıcıya gönderilen bildirimler yakalanmaktadır. Burada type değerini kontrol ederek hangi bildirimin geldiğini anlayabilir ve bildirimin içeriğine uygun şekilde gerekli işlemleri yapabiliriz. Ben örnekte Notification adında store olduğunu varsayarak ona eklettim. Siz kendi senaryonuza uygun işlemi gerçekleştirebilirsiniz.
Genel bildirimler kısmında ise Laravel tarafından broadcastAs ve broadcastOn içine yazdığınız değerleri yazarak bildirimleri yakalayabilirsiniz. Örneğin sitede gezinen oturum açmış veya açmamış herkese aynı bildirimi göstermek isterseniz FRONTEND adlı kanala Test3Notification bildirimini göndererek burada yakalayabilirsiniz.
Kanalların ne amaçla kullanılacağı sizin projeyi nasıl planladığınıza bağlı. Bildirimlerinizi isterseniz private kanala gönderebilir, isterseniz de kullanıcıya özel olan bildirimleri de public kanallara gönderip oturum kontrolüne göre gösterirsiniz. Burada sizin güvenlik tarafındaki bilginiz veya öncelikleriniz devreye girer.
Laravel tarafında yapmamız gerekenleri ise bir başka yazıda incelemeye çalışırız.
Herhangi bir sorunuz olursa yorum yoluyla ulaşabilirsiniz.
Faydalı olması dileğiyle..
İlk Yorumu Siz Yapın