Notifikasi Realtime Menggunakan Laravel dan Pusher

Laravel – Dalam tulisan ini, saya akan berbagi pengetahuan untuk membuat notifikasi realtime. Notifikasi umum digunakan dalam sebuah aplikasi seperti ketika menggunakan Facebook terdapat notifikasi yang memberitahukan kita segala aksi/aktivitas yang dilakukan user.

Pada kesempatan ini kita akan membuat notifikasi realtime menggunakan laravel dan pusher. Realtime artinya segala aktivitas yang kita lakukan maka keluarannya akan langsung muncul tanpa harus refresh halaman.

Di laravel kita akan menggunakan broadcasting untuk mengirim pesan ke websocket. Nah kita akan menggunakan websocket pusher karena kita tidak membuat websocket sendiri dari awal, kita cuma pakai aja.

Langkah 1

Buat project baru.

Buka config/broadcasting.php maka kalian akan melihat array connection pusher seperti di bawah ini.

Langkah 2

Sebelum membuka .env , kalian buka dashboard pusher terlebih dahulu. Kalau belum punya akun silahkan sign up.

Setelah masuk ke dashboard pusher, klik tab sebelah kiri yang Channels kemudian lihat sebelah kanan ada button create app, silahkan klik create app.

Dashboard Pusher

Setelah diklik maka silahkan isi seperti dibawah ini. Misalkan kita akan membuat channel bernama test.

Create New Channel

Kemudian lihat dan buka channel yang sudah kita buat tadi yang bernama test.

Klik App Keys maka akan tampil id, key, secret dan cluster yang kita butuhkan untuk dimasukkan di .env aplikasi kita.

Silahkan kalian buka .env . Kalian ubah dulu broadcastdriver seperti contoh dibawah ini.

Selanjutnya kalian isikan id, key dan secret dsb dari pusher seperti dibawah ini dalam file .env .

Kita akan membuat satu buah file di dalam folder config untuk memudahkan kita dalam memberikan credential pusher dari .env, jadi kalau kita mau merubah id,key,secret dll cukup dari .env saja.

Simpan dengan nama file test.php ke folder config.

Langkah 3

Membuat koneksi laravel dan pusher. Kita tambahkan dulu pusher di project kita. Pastikan kalian sudah masuk direktori project kalian.

Kemudian kita akan membuat sebuah event untuk mengirimkan notifikasi melalui Pusher.

Buka /app/Events/NotifPusherEvent.php dan ubah seperti kode di bawah ini.

Langkah 4

Tambahkan ke resources/views/home.blade.php.

Buka routes/web.php kemudian tambahkan routenya.

Langkah 6

Kita akan mencoba melakukan tes terhadap apa yang sudah kita buat. Jalankan php artisan serve diterminal kalian. Jalankan di dua browser ya teman 🙂

Berhasil Konek ke Pusher

Kita akan mecoba memanggil event yang sudah dibuat di route.

Kirim Event

Maka hasilnya seperti tampilan di bawah.

Pesannya Akan Langsung Muncul Tanpa Refresh Halaman

Selamat kalian sudah berhasil membuat koneksi dari laravel ke pusher.

Langkah 7

Karena judulnya membuat notifikasi maka kita akan melakukan custom halaman resources/views/home.blade.php .

Yang akan kita tambahkan mungkin tampilan sederhana. Silahkan copy paste kode di bawah untuk home.blade.php .

Sekarang kalian jalankan lagi aplikasinya, pake 2 browser ya teman 🙂 biar keliatan perubahannya.

Tampilan awal

Setelah itu kita coba kirim pesan melalu event nya. Maka jadinya seperti di bawah ini.

Selamat kalian telah berhasil membuat notifikasi realtime menggunakan laravel + pusher. Sekedar informasi, menggunakan provider websocket memang mudah dalam penggunannya. Namun fasilitas yang kita dapat terbatas, mulai dari limit concurentnya cuma 100 dan maksimal pesan terkirim 200rb. Jadi kalau mau limitnya nambah ya upgrade pusher ke yang berbayar alias beli.

Semoga apa yang saya sampaikan bermanfaat 🙂

Baca Juga : Otentikasi API Menggunakan Passport Laravel

About the Author: ikhsan

You May Also Like

Leave a Reply

Your email address will not be published. Required fields are marked *