Realtime Notification dengan Pusher dan Laravel Echo
Memahami broadcast service pada laravel
Pada tutorial kali ini penulis akan menjelaskan beberapa hal tentang tata cara menggunakan layanan pusher pada laravel menggunakan laravel-echo. Pusher adalah salah satu layanan pendukung komunikasi pesan secara realtime yang di-support oleh framework laravel. Sedangkan laravel-echo adalah library javascript untuk client-side yang berguna untuk men-subscribe sebuah channel dan me-listen sebuah event melalui websockets.
Apa yang dimaksud dengan notifikasi secara realtime? Dalam konteks artikel ini artinya kemampuan untuk mengirim sebuah pesan notifikasi (dalam bentuk data json) kepada user yang sedang membuka aplikasi web tanpa mengharuskan user untuk me-refresh halaman yang sedang dibukanya.
Biasanya pesan notifikasi ini (yang berupa data json) diolah untuk mengubah state dari komponen UI agar menampilkan informasi sesuai dengan kondisi database terbaru. Lalu bagaimana cara kerjanya?
Metode yang banyak digunakan untuk notifikasi realtime termasuk pusher adalah metode pub/sub. Terdiri dari kegiatan publish dan subscribe. Server bertugas melakukan publish dan client (browser) melakukan subscribe. Yang di-publish oleh server dan di-subscribe oleh client adalah event, event ini dikirimkan melalui jalur yang disebut channel.
Sebelum metode pub/sub ramai, teknik yang paling sering digunakan untuk notifikasi realtime adalah ajax polling. Berbeda dengan pub/sub yang menggunakan websocket, ajax polling melakukan http request setiap beberapa interval waktu untuk melihat dan mengantisipasi perubahan data pada server.
Posisi pusher pada aplikasi bertindak sebagai websocket server. Seperti yang kita tahu saat ini browser tidak dapat mengakses server php (laravel) melalui transport layer websocket, umumnya hanya bisa melalui http request saja, sedangkan trigger suatu event berada di dalam kode laravel. Jadi untuk menghubungkan client (browser) dengan server melalui websockets kira - kira skemanya seperti ini :
Publish :
server php (laravel) -> websocket server (pusher) -> client browser (javascript)
Subscribe / Listen :
client browser (javascript) -> websocket server (pusher) -> server php (laravel)
Pusher telah didukung oleh laravel sejak versi 5.1. Pada dokumentasinya berada pada kategori broadcasting (versi >=5.3) dan events (versi <= 5.2). Berikut adalah langkah - langkah implementasi pusher pada Laravel :
composer require pusher/pusher-php-server
Sebelum instalasi buat dulu akun pusher kalian untuk mendapatkan id dan key-nya di pusher.com.
Akun pusher gratisan dibatasi untuk mengirim pesan sebanyak 200.000 pesan per hari.
Lalu ubah file .env kalian untuk variabel PUSHER_APP_XX dengan key dari pusher.
PUSHER_APP_ID=xxxxxx
PUSHER_APP_KEY=xxxxxxxxxxxxxxxxxxxxx
PUSHER_APP_SECRET=xxxxxxxxxxxxxxxxxxx
PUSHER_APP_CLUSTER=xxx
Kemudian ubah variabel BROADCAST_DRIVER menjadi pusher.
BROADCAST_DRIVER=pusher
Sekarang buka file config/broadcasting.php
dan pastikan konfigurasinya sudah sesuai dengan file .env
'pusher' => [
'driver' => 'pusher',
'key' => env('PUSHER_APP_KEY'),
'secret' => env('PUSHER_APP_SECRET'),
'app_id' => env('PUSHER_APP_ID'),
'options' => [
'cluster' => env('PUSHER_APP_CLUSTER'),
// Sebaiknya encrypted dijadikan false bila diakses dari localhost atau public ip
'encrypted' => true
],
],
Terakhir, buka file config/app.php kemudian uncomment kode BroadcastServiceProvider.
Jalankan perintah di bawah untuk membuat event dengan nama 'CobaPusherEvent' :
php artisan make:event CobaPusherEvent
Buka folder app/Events/CobaPusherEvent.php
dan tambahkan ShouldBroadcast
pada class.
Kemudian tambahkan atribut messages dan inisialisasi pada constructor event tersebut.
public $message;
public function __construct($message)
{
$this->message = $message;
}
Pada method broadcastOn
sebutkan nama channel sebagai tujuan pengiriman pesan.
public function broadcastOn()
{
// nama channel di-return dalam bentuk array
// karena kita bisa mem-broadcast pesan ke banyak channel sekaligus
return ['coba-channel'];
}
Pada step ini kita telah membuat event sederhana yang bernama CobaPusherEvent
untuk mengirim pesan melalui channel yang bernama coba-channel
. Seharusnya sekarang kita bisa mengirim pesan notifikasi dengan perintah :
new event(\App\Events\CobaPusherEvent('ini isi message'))
Taruh kode ini di controller atau tempat lain yang menjadi pemicu event untuk memberikan notifikasi.
NOTE: method
broadcastOn
akan mengirim value dari semua variabel pada class (disini atribut-nya hanya variabel$message
) dalam bentuk json ke dalam channel yang disebutkan. Contoh: dengan kode di atas, instanceCobaPusherEvent
akan mengirim json dengan format{ message: "ini isi message" }
Tapi karena pada sisi client belum ada yang men-subscribe, maka tidak akan terjadi apa - apa di browser.
Laravel echo adalah library yang memudahkan kita untuk berkomunikasi dengan laravel melalui websocket server (dalam kasus ini pusher).
Pada hampir semua tutorial di artikel milik pusher maupun dokumentasi laravel untuk menggunakan laravel-echo kalian harus menggunakan npm
dan node
untuk mem-build library ini (echo.js
). Namun, agar lebih cepat dan mudah kita bisa menggunakan library ini melalui cdn saja.
Setidaknya ada 2 library yang dibutuhkan client / browser untuk menggunakan pusher laravel, yaitu :
Sekarang kita hanya perlu menambahkan kode untuk proses subscribe dari client.
window.Echo = new Echo({
broadcaster: 'pusher',
key: "{{ env('PUSHER_APP_KEY') }}",
cluster: "{{ env('PUSHER_APP_CLUSTER') }}",
// Sebaiknya encrypted dan disableStats dijadikan false bila diakses dari localhost atau public ip
encrypted: true,
disableStats: true
});
Echo.channel('coba-channel').listen('CobaPusherEvent', function(e) {
alert(e.message);
});
NOTE: Contoh kode tersebut disisipkan pada file dengan ekstensi *.blade.php karena butuh memanggil fungsi
env()
Sekarang kalian bisa coba mengirim pesan dari command php artisan tinker
.
$ php artisan tinker
>>> new event(\App\Events\CobaPusherEvent('Hello'));
>>> [ ]
atau langsung dari dashboard di pusher.com
Maka akan keluar alert
di browser dengan isi pesan notifikasi.
Tutorial di atas hanya memberikan contoh untuk mengirim pesan notifikasi kepada semua user melalui satu channel saja dan tanpa autentifikasi.
Bagaimana bila ingin mengirim pesan pada user tertentu saja?
Jawabannya menggunakan private channel dan multichannel.
Lalu, bagaimana bila ingin user yang menerima pesan di-autentifikasi dulu dari laravel?
Jawabannya menggunakan Broadcast:: route.
Bagaimana penjelasannya? Karena pembahasannya akan panjang, saya tidak akan menjelaskannya pada tutorial kali ini. Sampai jumpa pada tutorial selanjutnya.