TALL: Realtime Notification pada Laravel Livewire

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.