TALL: Realtime Notification pada Laravel Livewire
Membuat notifikasi dari user ke user secara realtime pada proyek PHP menggunakan Laravel dan Livewire.

Qisthi Ramadhani / 24 Januari 2023
Buat Project Laravel
composer create-project laravel/laravel notifikasi-realtime
Install Preset TALL Stack
composer require livewire/livewire laravel-frontend-presets/tall
php artisan ui tall --auth
pnpm install && pnpm run build
Setup Environment
composer require beyondcode/laravel-websockets pusher/pusher-php-server
Sesuaikan value environment (berkas .env)
BROADCAST_DRIVER=pusher
PUSHER_APP_ID=12345
PUSHER_APP_KEY=12345
PUSHER_APP_SECRET=12345
PUSHER_HOST=127.0.0.1
PUSHER_SCHEME=http
Publish berkas config dan migration
php artisan vendor:publish --provider="BeyondCodeLaravelWebSocketsWebSocketsServiceProvider" --tag="migrations"
php artisan migrate
<?php
return [
...
'connections' => [
'pusher' => [
...
'options' => [
'cluster' => env('PUSHER_APP_CLUSTER'),
'host' => env('PUSHER_HOST', '127.0.0.1'),
'port' => env('PUSHER_PORT', 6001),
'scheme' => env('PUSHER_SCHEME', 'https'),
'encrypted' => env('PUSHER_SCHEME', 'http') === 'https',
'useTLS' => env('PUSHER_SCHEME', 'https') === 'https',
],
]
]
];
Jalankan server websocket
php artisan websockets:serve
Bisa dilihat di halaman http://127.0.0.1:8000/laravel-websockets
, klik tombol Connect
.
Setup Aplikasi Laravel
Buka berkas config/app.php
, un-comment baris:
<?php
return [
...
'providers' => [
...
App\ProvidersBroadcastServiceProvider::class, // un-comment baris ini
]
...
];
Setelah aksi diatas, kita telah mengaktifkan sebuah private channel bawaan dari Laravel dari berkas routes/channels.php
.
<?php
Broadcast::channel('App.Models.User.{id}', function ($user, $id) {
return (int) $user->id === (int) $id;
});
Setup laravel-echo dan pusher
npm add laravel-echo pusher-js
Buka berkas resources/js/bootstrap.js
, un-comment dan ubah seperti dibawah ini:
import Echo from 'laravel-echo';
import Pusher from 'pusher-js';
window.Pusher = Pusher;
window.Echo = new Echo({
broadcaster: 'pusher',
key: import.meta.env.VITE_PUSHER_APP_KEY,
cluster: import.meta.env.VITE_PUSHER_APP_CLUSTER,
forceTLS: import.meta.env.VITE_PUSHER_SCHEME === 'https',
encrypted: import.meta.env.VITE_PUSHER_SCHEME === 'https',
wsHost: window.location.hostname,
wsPort: 6001,
});
Build ulang assets dengan command:
npm run build
Setup API untuk mengirim notifikasi
php artisan make:notification RealTimeNotification
Sesuaikan seperti kode dibawah ini:
<?php
namespace App\Notifications;
use Illuminate\Bus\Queueable;
use Illuminate\Contracts\Broadcasting\ShouldBroadcast;
use Illuminate\Notifications\Messages\BroadcastMessage;
use Illuminate\Notifications\Notification;
class RealTimeNotification extends Notification implements ShouldBroadcast
{
use Queueable;
public string $message;
/**
* Create a new notification instance.
*
* @return void
*/
public function __construct(string $message)
{
$this->message = $message;
}
/**
* Get the notification's delivery channels.
*
* @param mixed $notifiable
* @return array
*/
public function via($notifiable)
{
return ['broadcast'];
}
public function toBroadcast($notifiable): BroadcastMessage
{
return new BroadcastMessage(['message' => $this->message]);
}
}
Singkatnya, kode diatas akan membuat kita mendistribusikan sebuah pesan
ke para subcribers
.
Setup subcriber untuk user yang login
Buka berkas resources/views/layouts/base.blade.php
, tambahkan syntax Blade ini dalam berkas tersebut sebelum tag penutup </html>
.
@if (auth()->user())
<script type="module">
Echo.private('App.Models.User.' + '{{ auth()->user()->id }}')
.notification((notif) => {
console.log(notif.message);
});
</script>
@endif
Ketika pengguna tersebut menerima sebuah notifikasi, kita akan menampilkannya pada tab console
.
Percobaan
Buat 2 buah pengguna, kita akan membuat menggunakan ModelFactory
bawaan Laravel.
php artisan tinker
Tulis kode User::factory(2)->create();
.
Login ke aplikasi menggunakan masing-masing user.
Kirim notifikasi
Untuk mempermudah skenario, buka berkas routes/web.php
. Sesuaikan route
dengan nama home
menjadi seperti dibawah ini.
<?php
...
use App\Notifications\RealTimeNotification;
Route::get('/', function () {
$auth = auth()->user();
$notification = new RealTimeNotification('Hello from '.$auth->name);
$user = User::query()->find(3);
$user->notify($notification);
return view('welcome');
})->name('home');
Setiap pengguna membuka halaman home
, dia akan mengirimkan sebuah notifikasi ke user dengan ID 3.
It’s done! That’s it.