Real Time Notifikasi dengan Laravel 8 dan Pusher
Pada kesempatan kali ini saya ingin membagikan tutorial web development yang cukup menarik yaitu real time notification. Penggunaan real time notification ini akan sangat berguna dalam memberikan informasi ke user web atau admin dari web sistem yang kita buat.
Sebagai contoh disini seperti notifikasi pada facebook,dimana ketika user melakukan interaksi berupa comment atau likes pada postingan tertentu akan memberikan notifikasi secara real time kepada user yang mempunyai postingan tersebut.
Dan seperti biasa kita akan menggunakan framework laravel untuk membuat web ini dan pusher untuk membangun service real timenya.
Pusher sendiri adalah sebuah hosted API service yang mampu menambahkan fungsi data real time pada aplikasi web maupun mobile tanpa perlu kita melakukan konfigurasi pada server karena semua di tangani oleh pusher.
Dengan package yang di sediakan oleh pusher ini juga memudahkan kita melakukan konfigurasi pada framework laravel.
Hal pertama yang akan kita lakukan adalah melakukan instalasi framework laravel disini saya melakukan instalasi menggunakan composer.
composer create-project laravel/laravel nama-projectSetelah instalasi selesai kita akan menambahkan scaffolding auth bawaan laravel yaitu laravel / ui dan setelahnya scaffolding auth selesai atur konfigurasi .env untuk menambahkan database yang akan digunakan.
Jalankan perintah berikut untuk instalasi scaffold auth composer require laravel/ui. Kemudian lakukan generate scaffold authnya, disini saya menggunakan bootstrap jika ingin menggunakan vue atau react slahkan ganti kata bootstrap pada command berikut :
php artisan ui bootstrap –auth
Dan jangan lupa untuk menjalankan perintah npm install setelahnya,lalu lanjut dengan menjalankan npm run dev untuk compile semua dependencies yang baru di install
Selajutnya kita akan melakukan instalasi package pusher dan pastikan kalian sudah memiliki akun pusher agar bisa mendapatkan key dari pusher yang akan digunakan pada laravel.
selanjutnya kembali ke project laravel dan buka file app.php yang berada pada folder config di bagian provider uncomment broadcastservice provider class
Masuk kembali ke akun pusher pilih channels kemudian klik create app di pojok kanan
Masukkan nama aplikasi yang diinginkan lalu pilih cluster setelah itu klik create app tunggu hingga selesai.
Setelah itu pilih menu app keys lalu copy semua credentials yang ada dan paste ke file .env
Pastikan semua pengaturan yang ada antara laravel dan pusher sama. Baik keys, id, atau clusternya. Masih di file .env ubah broadcast driver menjadi pusher.
Setelah semua konfigurasi untuk pusher selesai tahap selanjutnya kita membuat event untuk menghandle broadcast dari pusher dan file blade untuk menampilkan aksi event yang akan kita buat. Kasusnya disini adalah kita akan memunculkan notifikasi di halaman tertentu ketika ada user yang baru saja melakukan pendaftaran.
Jalankan command artisan untuk membuat event
php artisan make:event MyEvent
Lalu isi class tersebut seperti dibawah ini :
Jika sudah kita akan membuat tampilan navbar yang mana akan memunculkan notifikasi ketika user melakukan pendaftaran. Buat file blade pada folder views disini saya membuat file blade sample.blade.php seperti dibawah ini :
Lamgkah selanjutnya masuk ke folder vendor/laravel/uiauth-backend cari file RegistersUsers.php disini kita akan memanggil class event yang kita buat sebelumnya. Tambahkan event yang kita buat pada method register seperti gambar berikut.
Kode Lengkapnya seperti berikut :
Langkah terakhir atur routes web seperti berikut :
Jalankan local server laravel pada tab pertama. Akses route utama dan tab kedua akses route welcome dan coba lakukan registrasi jika berhasil akan memunculkan notifikasi seperti gambar berikut pada route utama.
Sekian untuk tutorial kali ini, Jika ada kesulitan silahkan berkomentar dibawah atau kontak saya via telegram https://t.me/eripratama
Source Project : https://github.com/eripratama1/laravel-pushnotif-pusher