Contoh Implementasi Laravel Broadcast

Untuk membuat aplikasi yang memiliki feature real-time communication antara server dan client bisa menggunakan fungsi broadcast pada laravel. Untuk testing kali ini saya akan menggunakan laravel 5.8 dengan bantuan pusher dan laravel echo.

Skenario aplikasi  sebagai berikut :

• merupakan aplikasi perizinan online
• user melakukan request approval (tidak ada demo)
• reviewer melakukan approval request (tidak ada demo)
• update status real-time ke user saat requestnya di-approve (ini yang didemokan)

Berikut adalah langkah-langkahnya :

1. Buat project baru

   laravel new larapush

2. Buat event class yang akan di broadcast. Sebagai contoh di sini kita akan membuat event RequestApproved. Buka file app/Providers/EventServiceProvider.php, lalu tambahkan event=>listener ke attribut $listen

   'App\Events\RequestApproved' => [
      'App\Listeners\ApprovalNotification',
   ],

   

3. eksekusi di terminal/cmd

   php artisan event:generate

   Maka secara otomatis akan ter-create 2 buah file yaitu, app/Events/RequestApproved.php dan app/Listeners/ApprovalNotification.php

4. Buka file app/Events/RequestApproved.php. Supaya bisa di-broadcast, event tersebut harus mengimplementasi (inherit) interface ShouldBroadcast.

   class RequestApproved implements ShouldBroadcast

5. Update method broadcastOn pada class event RequestApproved.php

   return new Channel('requestStatus');

   Kali ini kita gunakan channel public untuk mempermudah demo. Kita beri nama channel public nya dengan nama ‘requestStatus‘.

   Tambahkan property $id dan update method constructnya menjadi seperti ini:

   //bisa menambahkan property sesuai keperluan
    public $id;
   
    //untuk kebutuhan demo saja, nanti disesuaikan dengan kebutuhan yang real
    public function __construct($id)
    {
        $this->id = $id;
    }

6. Buka config/broadcasting.php dan .env, pastikan broadcast driver nya adalah ‘pusher‘
   
7. Waktunya menginstall pusher driver

   composer require pusher/pusher-php-server

8. Install laravel echo server untuk membuat server local

   npm install -g laravel-echo-server

   pastikan flag -g diikut sertakan alias install secara global supaya bisa maju ke step selanjutnya. Jika menemukan issue error tidak bisa install secara global, silahkan reinstall nodejs nya.

9. Buat konfigurasi file server

   laravel-echo-server init

   Ikuti sesuai prompt saja…
   

10. Buka file configurasi yang telah dibuat di step 8, update subcriber redish menjadi FALSE

    "subscribers": {
          "http": true,
          "redis": false
      },

11. Buka file config/broadcasting.php, update detail pusher menjadi seperti di bawah ini. Sesuaikan appID dan key dengan file konfigurasi di step 10 (bisa diedit langsung di file tersebut atau update konfigurasi di file .env).

    'pusher' => [
        'driver' => 'pusher',
        'key' => env('PUSHER_APP_KEY'),
        'secret' => null,
        'app_id' => env('PUSHER_APP_ID'),
        'options' => [
            'host' => 'localhost',
            'port' => 6001,
        ],
    ],

12. Waktunya membuat route dummy untuk proses approval sekaligus trigger event. Buka route/web.php lalu tambahkan route berikut

    Route::get('/approved/{id}', function ($id)
    {
        event(new App\Events\RequestApproved($id)); // trigger event
        return Response::make('Request Anda telah disetujui! ID#'.$id);
    });

    Oke, nanti untuk sample mentrigger event nya kita cukup mengakses url http://localhost:8000/approved/12345

13. Kita siapkan client untuk menerima broadcast event nya. Kita gunakan url homepage saja (http://localhost:8000). Buka view url homepage (resource/views/welcome.blade.php)
    – tambahkan csrf token pada bagian meta tag

    <meta name="csrf-token" content="{{ csrf_token() }}">

    – tambahkan url web socketnya

    <script src="//{{ Request::getHost() }}:6001/socket.io/socket.io.js"></script>

    – tambahkan app js yang nanti akan kita compile

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

14. Buka file resources/js/bootstrap.js. Tambahkan skrip berikut

    import Echo from 'laravel-echo'
    window.Echo = new Echo({
        broadcaster: 'socket.io',
        host: window.location.hostname + ':6001'
    });
    
    //skrip yang menghandle respon server, kita buat untuk menampilkan pesan pada consol browser
    window.Echo.channel(`requestStatus`) // Broadcast channel name
      .listen('RequestApproved', (e) => { // Message name
         console.log(e); // kita buat untuk menampilkan pesan pada console browser
      }
    );

15. Selesai, tinggal kita compile file-file javascript nya. eksekusi command ini secara berurutan.
    npm install
    npm install –save laravel-echo
    npm run dev 
16. Siap testing, pertama jalankan ‘php artisan serve‘. lalu akses url http://localhost:8000 pada browser (1) lalu buka console browser nya. Kedua, nyalakan server echo ‘laravel-echo-server start‘ lalu buka browser baru (2) dan akses url dummy untuk proses approval yang telah dibuat sebelumnya http://localhost:8000/approved/12345.perhatikan console pada browser pertama akan menampilkan message pada layar, setiap kali anda mengakses url dummy pada browser kedua…maka secara real-time console pada browser pertama akan menampilkan pesan yang dikirim oleh server echo. Dengan cara seperti ini kita bisa mengupdate status request user pada browser yang sedang diakses oleh user tanpa si user merefresh nya terlebih dahulu.

Sekian contoh laravel broadcast yang sangat sederhana ini sengaja dibuat supaya lebih mudah dipahami dulu konsepnya. Selamat mencoba…..