Lihat Daftar Artikel

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.

Realtime Notification

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.

1. Event merupakan kegiatan pada situasi tertentu yang dipanggil dari sisi server dan dikirim melalui channel untuk sampai pada sisi client.
2. Channel semacam jalur komunikasi antar layer websocket. Ketika event di server mengirim pesan notifikasi melalui nama channel yang sama, maka kita bisa mengeksekusi kode javascript pada browser untuk menampilkan pesan tersebut.

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.

Pusher (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 :

Install package pusher-php

composer require pusher/pusher-php-server

Konfigurasi

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.

Membuat file event

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, instance CobaPusherEvent 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 (Client)

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.

Import Library

Setidaknya ada 2 library yang dibutuhkan client / browser untuk menggunakan pusher laravel, yaitu :

Javascript

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.

Authentication dan Private Channel

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.