Listening Event menggunakan Laravel Echo

Pada artikel Integrasi dengan Pusher kita telah mengetahui bagaimana cara push sebuah message ke Pusher. Pada artikel ini kita akan membahas bagaimana cara listening / menangkap Event yang di kirim ke Pusher dengan menggunakan Laravel Echo yang nantinya akan kita tampilkan di halaman project kita.

Setelah konfigurasi backend, kita juga perlu untuk konfigurasi bagian frontend dengan menginstal dependency yang diperlukan. Kita masih akan tetap menggunakan kode dari artikel-artikel sebelumnya, silahkan ikuti series Laravel Realtime Push Notification jika anda belum membaca artikel sebelumnya.

Install Dependency

Disini kita memerlukan laravel-echo dan pusher-js, untuk menginstall kita bisa menggunakan perintah npm.

npm install laravel-echo pusher-js

Konfigurasi Laravel Echo

Pada file resources/js/bootstrap.js, Laravel telah menyediakan cara implementasi Laravel Echo dengan Pusher, akan tetapi tidak diaktifkan secara default. Untuk mengaktifkannya, kita hanya perlu menghapus komentar dari kode tersebut.

import Echo from 'laravel-echo';

window.Pusher = require('pusher-js');

window.Echo = new Echo({
    broadcaster: 'pusher',
    key: process.env.MIX_PUSHER_APP_KEY,
    cluster: process.env.MIX_PUSHER_APP_CLUSTER,
    encrypted: true
});

Setelah mengupdate file bootstrap.js, pastika kita mengcompile ulang asset dengan menggunakan perintah npm.

npm run dev

Setup View

Langkah selanjutnya adalah setup view yang akan kita gunakan, disini saya akan menggunakan view welcome.blade.php yang sudah ada secara default ketika kita menginstal Laravel pertama kali.

App.js

Selanjutnya, pastikan view yang kita gunakan telah mengimport file app.js.

<script src="{{ asset('js/app.js') }}"></script>

Event Handler

Langkah selanjutnya, kita harus mendefinisikan event handler untuk memproses event dari Pusher. Pada contoh kali ini kita akan mengubah label Laravel pada view welcome.blade.php sesuai dengan data pada event.

Pada kode dibawah ini, kita akan merubah label Laravel pada halaman diatas dengan nilai yang diberikan pada saat mentrigger event.

<script>
    Echo.channel('orders')
        .listen('OrderStatusUpdated', (e) => {
            $('div.title').html(e.data);
        });
</script>

Trigger Event

Kita akan menggunakan contoh sederhana dibawah ini untuk mentrigger event.

Route::get('/', function () {
    event(new OrderStatusUpdated('Hello Echo'));

    return view('welcome');
});

Pada contoh diatas, ketika kita merefresh 1 halaman yang mana kita juga mentrigger event, maka halaman lain akan memproses event tersebut dan mengupdate halaman sesuai dengan yang telah diatur pada event handler. Dari contoh diatas kita telah berhasil listening/menangkap event menggunakan Laravel Echo.

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