Laravel – Dalam tulisan ini, saya akan berbagi pengetahuan untuk membuat notifikasi realtime. Notifikasi umum digunakan dalam sebuah aplikasi seperti ketika menggunakan Facebook terdapat notifikasi yang memberitahukan kita segala aksi/aktivitas yang dilakukan user.
Pada kesempatan ini kita akan membuat notifikasi realtime menggunakan laravel dan pusher. Realtime artinya segala aktivitas yang kita lakukan maka keluarannya akan langsung muncul tanpa harus refresh halaman.
Di laravel kita akan menggunakan broadcasting untuk mengirim pesan ke websocket. Nah kita akan menggunakan websocket pusher karena kita tidak membuat websocket sendiri dari awal, kita cuma pakai aja.
Langkah 1
Buat project baru.
|
1 |
composer create-project laravel/laravel RealtimeNotif && cd RealtimeNotif |
Buka config/broadcasting.php maka kalian akan melihat array connection pusher seperti di bawah ini.
|
1 2 3 4 5 6 7 8 9 10 |
'pusher' => [ 'driver' => 'pusher', 'key' => env('PUSHER_APP_KEY'), 'secret' => env('PUSHER_APP_SECRET'), 'app_id' => env('PUSHER_APP_ID'), 'options' => [ 'cluster' => env('PUSHER_APP_CLUSTER'), 'useTLS' => true, ], ], |
Langkah 2
Sebelum membuka .env , kalian buka dashboard pusher terlebih dahulu. Kalau belum punya akun silahkan sign up.
Setelah masuk ke dashboard pusher, klik tab sebelah kiri yang Channels kemudian lihat sebelah kanan ada button create app, silahkan klik create app.
Setelah diklik maka silahkan isi seperti dibawah ini. Misalkan kita akan membuat channel bernama test.
Kemudian lihat dan buka channel yang sudah kita buat tadi yang bernama test.
Klik App Keys maka akan tampil id, key, secret dan cluster yang kita butuhkan untuk dimasukkan di .env aplikasi kita.
Silahkan kalian buka .env . Kalian ubah dulu broadcastdriver seperti contoh dibawah ini.
|
1 |
BROADCAST_DRIVER=pusher |
Selanjutnya kalian isikan id, key dan secret dsb dari pusher seperti dibawah ini dalam file .env .
|
1 2 3 4 5 |
PUSHER_APP_ID= PUSHER_APP_KEY= PUSHER_APP_SECRET= PUSHER_APP_CLUSTER= PUSHER_CHANNEL= |
Kita akan membuat satu buah file di dalam folder config untuk memudahkan kita dalam memberikan credential pusher dari .env, jadi kalau kita mau merubah id,key,secret dll cukup dari .env saja.
|
1 2 3 4 5 6 7 8 |
<?php return [ 'channel' => env('PUSHER_CHANNEL',''), 'pusher_id' => env('PUSHER_APP_ID',''), 'pusher_key' => env('PUSHER_APP_KEY',''), 'pusher_cluster' => env('PUSHER_APP_CLUSTER',''), ]; |
Simpan dengan nama file test.php ke folder config.
Langkah 3
Membuat koneksi laravel dan pusher. Kita tambahkan dulu pusher di project kita. Pastikan kalian sudah masuk direktori project kalian.
|
1 |
composer require pusher/pusher-php-server |
Kemudian kita akan membuat sebuah event untuk mengirimkan notifikasi melalui Pusher.
|
1 |
php artisan make:event NotifPusherEvent |
Buka /app/Events/NotifPusherEvent.php dan ubah seperti kode di bawah ini.
|
1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16 17 18 19 20 21 22 23 24 25 26 27 28 29 30 31 |
<?php namespace App\Events; use Illuminate\Broadcasting\Channel; use Illuminate\Broadcasting\InteractsWithSockets; use Illuminate\Broadcasting\PresenceChannel; use Illuminate\Broadcasting\PrivateChannel; use Illuminate\Contracts\Broadcasting\ShouldBroadcast; use Illuminate\Foundation\Events\Dispatchable; use Illuminate\Queue\SerializesModels; class NotifPusherEvent implements ShouldBroadcast { use Dispatchable, InteractsWithSockets, SerializesModels; public $message; public function __construct($message) { $this->message = $message; } public function broadcastOn() { //call your name channel from env return config('test.channel'); } } |
Langkah 4
Tambahkan ke resources/views/home.blade.php.
|
1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16 17 18 19 20 21 22 23 24 25 26 |
<!DOCTYPE html> <head> <title>Pusher Test</title> <script src="https://js.pusher.com/6.0/pusher.min.js"></script> <script> //Enable pusher logging - don't include this in production Pusher.logToConsole = true; var pusher = new Pusher('{{ config('test.pusher_key')}}', { cluster: '{{config('test.pusher_cluster')}}' }); var channel = pusher.subscribe('{{config('test.channel')}}'); channel.bind('App\\Events\\NotifPusherEvent', function(data) { alert(JSON.stringify(data)); }); </script> </head> <body> <h1>Pusher Test</h1> <p> Try publishing an event to channel <code>my-channel</code> with event name <code>my-event</code>. </p> </body> |
Buka routes/web.php kemudian tambahkan routenya.
|
1 2 3 4 5 6 7 8 |
Route::get('/', function() { return view('home'); }); Route::get('/pusher', function() { event(new App\Events\NotifPusherEvent('Hi there Pusher!')); return "Event has been sent!"; }); |
Langkah 6
Kita akan mencoba melakukan tes terhadap apa yang sudah kita buat. Jalankan php artisan serve diterminal kalian. Jalankan di dua browser ya teman 🙂
Kita akan mecoba memanggil event yang sudah dibuat di route.
Maka hasilnya seperti tampilan di bawah.
Selamat kalian sudah berhasil membuat koneksi dari laravel ke pusher.
Langkah 7
Karena judulnya membuat notifikasi maka kita akan melakukan custom halaman resources/views/home.blade.php .
Yang akan kita tambahkan mungkin tampilan sederhana. Silahkan copy paste kode di bawah untuk home.blade.php .
|
1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16 17 18 19 20 21 22 23 24 25 26 27 28 29 30 31 32 33 34 35 36 37 38 39 40 41 42 43 44 45 46 47 48 49 50 51 52 53 54 55 56 57 58 59 60 |
<!DOCTYPE html> <head> <title>Pusher Test</title> <link rel="stylesheet" href="https://stackpath.bootstrapcdn.com/bootstrap/4.5.0/css/bootstrap.min.css" integrity="sha384-9aIt2nRpC12Uk9gS9baDl411NQApFmC26EwAOH8WgZl5MYYxFfc+NcPb1dKGj7Sk" crossorigin="anonymous"> <script src="https://code.jquery.com/jquery-3.5.1.slim.min.js" integrity="sha384-DfXdz2htPH0lsSSs5nCTpuj/zy4C+OGpamoFVy38MVBnE+IbbVYUew+OrCXaRkfj" crossorigin="anonymous"></script> <script src="https://cdn.jsdelivr.net/npm/popper.js@1.16.0/dist/umd/popper.min.js" integrity="sha384-Q6E9RHvbIyZFJoft+2mJbHaEWldlvI9IOYy5n3zV9zzTtmI3UksdQRVvoxMfooAo" crossorigin="anonymous"></script> <script src="https://stackpath.bootstrapcdn.com/bootstrap/4.5.0/js/bootstrap.min.js" integrity="sha384-OgVRvuATP1z7JjHLkuOU7Xw704+h835Lr+6QL9UvYjZE3Ipu6Tp75j7Bh/kR0JKI" crossorigin="anonymous"></script> </head> <body> <h1>Pusher Test</h1> <p> Try publishing an event to channel <code>my-channel</code> with event name <code>my-event</code>. </p> <div class="row"> <div class="col-sm-12"> <div class="col-sm-6"> <div class="dropdown"> <button class="btn btn-primary dropdown-toggle" type="button" id="dropdownMenuButton" data-toggle="dropdown" aria-haspopup="true" aria-expanded="false"> Notifikasi <span class="badge badge-pill badge-light countNotif">2</span> </button> <div class="dropdown-menu" aria-labelledby="dropdownMenuButton"> <a class="dropdown-item" href="#">Helo World 2</a> <a class="dropdown-item" href="#">Hello World 1</a> </div> </div> </div> </div> </div> </body> <script src="https://js.pusher.com/6.0/pusher.min.js"></script> <script> // Enable pusher logging - don't include this in production Pusher.logToConsole = false; var pusher = new Pusher('{{ config('test.pusher_key')}}', { cluster: '{{config('test.pusher_cluster')}}' }); var channel = pusher.subscribe('{{config('test.channel')}}'); channel.bind('App\\Events\\NotifPusherEvent', function(data) { //alert(JSON.stringify(data)); var existing = $('.dropdown .dropdown-menu').html(); var ncount = $('.dropdown .countNotif').html(); var notifcount = parseInt(ncount); var html=''; if(data){ html +=' <a class="dropdown-item" href="#">'+data.message+'</a>'; notifcount +=1; $('.dropdown .countNotif').text(notifcount); var newNotifHtml = html + existing; $('.dropdown .dropdown-menu').html(newNotifHtml); } }); </script> |
Sekarang kalian jalankan lagi aplikasinya, pake 2 browser ya teman 🙂 biar keliatan perubahannya.
Setelah itu kita coba kirim pesan melalu event nya. Maka jadinya seperti di bawah ini.
Selamat kalian telah berhasil membuat notifikasi realtime menggunakan laravel + pusher. Sekedar informasi, menggunakan provider websocket memang mudah dalam penggunannya. Namun fasilitas yang kita dapat terbatas, mulai dari limit concurentnya cuma 100 dan maksimal pesan terkirim 200rb. Jadi kalau mau limitnya nambah ya upgrade pusher ke yang berbayar alias beli.
Semoga apa yang saya sampaikan bermanfaat 🙂
Baca Juga : Otentikasi API Menggunakan Passport Laravel
