Laravel – Integrasi dengan Pusher

Pada artikel sebelumnya, telah kita bahas bagaimana setup Laravel Broadcasting dengan driver menggunakan log. Pada artikel kali ini kita akan melakukan integrasi Laravel dengan Pusher sebagai broadcasting driver yang digunakan.

Pusher

Powering Realtime Experiences in All your Apps, Dari slogan yang digunakan oleh Pusher, tentu sudah bisa kita lihat bahwa Pusher dapat memberikan Realtime experiences untuk penggunanya. Pusher merupakan sebuah hosted service yang membuat fitur realtime data menjadi mudah.

Dengan menggunakan Pusher kita tidak perlu untuk membuat WebSocket sendiri pada server kita, hal ini tentu saja akan menghemat waktu development. Pada bagian ini, kita akan membahas bagaimana setup Pusher agar bisa kita integrasikan dengan Laravel app kita.

Membuat Project Baru

Setelah memiliki account di Pusher, langkah selanjutnya adalah kita perlu membuat app baru di halaman dashboard Pusher kita. Klik pada button “Create new App” untuk membuat app baru.

Isi nama dari app, kemudian pilih cluster (disini saya menggunakan cluster ap1), selanjutnya pilih frontend tech dan backend tech. Silahkan pilih frontend technology sesuai yang kalian gunakan, disini saya menggunakan jQuery.

Setelah membuat app baru, kita akan diarahkan kehalaman dashboard dari app kita. Pilih tab App Keys untuk melihat credential dari app yang kita buat. Kemudian ubah file .env sesuai dengan credential yang diberikan.

BROADCAST_DRIVER=pusher
PUSHER_APP_ID=xxxxx
PUSHER_APP_KEY=xxxxxxxxxxxxxxxxxxxx
PUSHER_APP_SECRET=xxxxxxxxxxxxxxxxxxxx
PUSHER_APP_CLUSTER=ap1

Install Pusher SDK

Karena kita menggunakan Pusher sebagai broadcasting driver, kita perlu menginstall pusher SDK dalam project Laravel kita.

composer require pusher/pusher-php-server

Setelah install Pusher SDK, kita bisa langsung mencoba fitur broadcasting Laravel. Disini saya akan menggunakan contoh pada artikel Setup Broadcasting di Laravel.

Untuk memeriksa event yang dikirim, pilih menu Debug Console pada halaman dashboard app kita di halaman Pusher.

Bisa kita lihat pada gambar diatas, kita telah berhasil mengirimkan Event OrderStatusUpdated beserta dengan data payloadnya ke halaman Pusher, artinya kita telah berhasil melakukan integrasi Laravel dengan Pusher.

Alfa Adhitya Member since December 18, 2019

Computer science education cannot make anybody an expert programmer any more than studying brushes and pigment can make somebody an expert painter – Eric S