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',
    ],

    eventserviceprovider

  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
    konfigurasi pusher untuk broadcast
  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…
    konfigurasi laravel echo

  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.contoh laravel broadcast

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

Tinggalkan Balasan

Alamat email Anda tidak akan dipublikasikan. Ruas yang wajib ditandai *