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 :

Buat project baru
```
laravel new larapush
```
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',
],
```
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
Buka file app/Events/RequestApproved.php. Supaya bisa di-broadcast, event tersebut harus mengimplementasi (inherit) interface ShouldBroadcast.
```
class RequestApproved implements ShouldBroadcast
```
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;
 }
```
Buka config/broadcasting.php dan .env, pastikan broadcast driver nya adalah ‘pusher‘

Waktunya menginstall pusher driver

composer require pusher/pusher-php-server

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.
Buat konfigurasi file server
```
laravel-echo-server init
```
Ikuti sesuai prompt saja…
Buka file configurasi yang telah dibuat di step 8, update subcriber redish menjadi FALSE
```
"subscribers": {
      "http": true,
      "redis": false
  },
```

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

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
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>
```

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
  }
);

Selesai, tinggal kita compile file-file javascript nya. eksekusi command ini secara berurutan.
npm install
npm install –save laravel-echo
npm run dev
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…..

Tinggalkan Balasan Batalkan balasan