Events di Livewire 4

Livewire memiliki sistem event yang cukup kuat untuk menghubungkan komponen-komponen yang ada di halaman. Sistem ini sangat menarik karena berbasis browser events. Artinya, event yang kita kirim dari Livewire bisa juga didengar oleh Alpine.js atau JavaScript murni.

Mari kita bahas secara bertahap, mulai dari konsep paling dasar hingga penggunaan lanjutan seperti event dinamis, event antar komponen, hingga integrasi dengan Laravel Echo.

1. Apa itu Event di Livewire?

Event di Livewire adalah mekanisme komunikasi antar komponen yang ada di halaman. Misalnya:

• Komponen A membuat data baru
• Komponen B harus refresh atau update daftar data

Maka, komponen A dapat mengirim event, dan komponen B dapat mendengarkan event tersebut.

2. Mengirim Event (Dispatching Event)

Di Livewire, untuk mengirim event kita menggunakan method:

$this->dispatch('nama-event');

Contoh sederhana:

<?php // resources/views/components/post/⚡create.blade.php

use Livewire\Component;

new class extends Component {
    public function save()
    {
        // ... simpan data

        $this->dispatch('post-created');
    }
};

Artinya: ketika method save() dipanggil, event post-created akan dikirim.

Mengirim data bersamaan dengan event

Kadang kita perlu mengirim data, misalnya judul post:

$this->dispatch('post-created', title: $post->title);

Jadi event tidak hanya memberi tahu “ada yang baru”, tapi juga mengirim informasi tambahan.

3. Mendengarkan Event (Listening Event)

Di komponen lain, kita bisa mendengarkan event dengan atribut #[On].

Contoh:

<?php // resources/views/components/⚡dashboard.blade.php

use Livewire\Component;
use Livewire\Attributes\On;

new class extends Component {
    #[On('post-created')]
    public function updatePostList($title)
    {
        // ... update daftar post
    }
};

Penjelasan:

• Ketika event post-created dipicu,
• maka method updatePostList() akan otomatis dipanggil.
• Parameter $title akan berisi data yang dikirim lewat event.

4. Event Dinamis (Dynamic Event Names)

Kadang event perlu “diikat” ke data tertentu, misalnya ID post.

Contoh:

$this->dispatch("post-updated.{$post->id}");

Dan di listener:

#[On('post-updated.{post.id}')]
public function refreshPost()
{
    // ...
}

Kalau ID post = 3, maka event yang didengar adalah:

post-updated.3

Ini berguna saat kita ingin event hanya mengenai satu data tertentu.

5. Mendengarkan Event dari Child Component (Parent-Child Communication)

Livewire memungkinkan parent mendengarkan event dari child langsung di Blade.

Contoh:

<div>
    <livewire:edit-post @saved="$refresh">
</div>

Artinya:

• jika child component edit-post memanggil dispatch('saved')
• maka parent akan otomatis refresh.

Kalau ingin memanggil method lain, misalnya close():

<livewire:edit-post @saved="close">

Dan jika event mengirim data:

$this->dispatch('saved', postId: 1);

Maka di parent bisa diteruskan:

<livewire:edit-post @saved="close($event.detail.postId)">

6. Interaksi dengan JavaScript

Karena Livewire event adalah event browser, maka kita bisa menggunakannya di JavaScript juga.

Mendengarkan event di dalam component script

<script>
    this.$on('post-created', () => {
        // ...
    });
</script>

Mengirim event dari script

<script>
    this.$dispatch('post-created');
</script>

Jika ingin event hanya untuk komponen itu saja (tidak “bocor” ke komponen lain), gunakan:

this.$dispatchSelf('post-created');

7. Event Global di JavaScript

teman-teman juga bisa mendengarkan event Livewire dari script global:

<script>
document.addEventListener('livewire:init', () => {
   Livewire.on('post-created', (event) => {
       // ...
   });
});
</script>

Kalau ingin berhenti mendengarkan:

let cleanup = Livewire.on('post-created', (event) => {});

cleanup(); // un-register listener

8. Integrasi dengan Alpine.js

Karena event Livewire adalah event browser, Alpine bisa mendengarnya.

Mendengarkan event di Alpine

<div x-on:post-created="..."></div>

Jika ingin mendengarkan dari seluruh halaman:

<div x-on:post-created.window="..."></div>

Mengambil data tambahan:

<div x-on:post-created="notify('New post: ' + $event.detail.title)"></div>

Mengirim event dari Alpine

<button x-on:click="$dispatch('post-created')">...</button>

Dengan data:

<button x-on:click="$dispatch('post-created', { title: 'Post Title' })">...</button>

9. Tidak Selalu Perlu Event

Jika tujuanmu hanya memanggil method parent dari child, sebenarnya bisa langsung menggunakan $parent.

Contoh:

<button wire:click="$parent.showCreatePostForm()">Create Post</button>

10. Dispatch Event ke Komponen Tertentu (Direct Dispatch)

Kadang kita ingin event tidak disebarkan ke semua listener, tapi hanya ke komponen tertentu.

$this->dispatch('post-created')->to(component: Dashboard::class);

Atau hanya ke komponen itu sendiri:

$this->dispatch('post-created')->to(self: true);

11. Dispatch dari Blade Template

teman-teman juga bisa mengirim event langsung dari Blade:

<button wire:click="$dispatch('show-post-modal', { id: {{ $post->id }} })">
    Edit Post
</button>

Atau langsung ke komponen tertentu:

<button wire:click="$dispatchTo('posts', 'show-post-modal', { id: {{ $post->id }} })">
    Edit Post
</button>

12. Testing Event (Unit Test)

Untuk memastikan event benar-benar dipanggil, Livewire menyediakan assertDispatched().

Contoh:

Livewire::test(CreatePost::class)
    ->call('save')
    ->assertDispatched('post-created');

Untuk memastikan listener bekerja:

Livewire::test(Dashboard::class)
    ->assertSee('Posts created: 0')
    ->dispatch('post-created')
    ->assertSee('Posts created: 1');

13. Real-time Events dengan Laravel Echo

Jika teman-teman ingin Livewire berfungsi real-time dengan WebSocket, teman-teman bisa menghubungkannya dengan Laravel Echo.

Contoh event Laravel:

class OrderShipped implements ShouldBroadcast
{
    public function broadcastOn()
    {
        return new Channel('orders');
    }
}

Di Livewire component, teman-teman bisa mendengarkan event Echo seperti ini:

#[On('echo:orders,OrderShipped')]
public function notifyNewOrder()
{
    $this->showNewOrderNotification = true;
}

Kalau channel-nya dinamis (misal ada order id), bisa menggunakan getListeners().

14. Custom Broadcast Name (broadcastAs)

Kadang event broadcast ingin diberi nama khusus:

public function broadcastAs(): string
{
    return 'score.submitted';
}

Maka Livewire listener-nya harus pakai dot prefix:

#[On('echo:scores,.score.submitted')]
public function handleScoreSubmitted($event)
{
    $this->scores[] = $event['score'];
}

15. Private & Presence Channel

Livewire juga mendukung private dan presence channel (syarat: channel auth sudah di-setup):

"echo-private:orders,OrderShipped" => 'notifyNewOrder',
"echo-presence:orders,joining" => 'notifyNewOrder',

Penutup

Livewire events itu seperti “penghubung antar komponen” yang sangat fleksibel. teman-teman bisa menggunakannya:

• antar komponen Livewire
• antar Livewire dan Alpine
• antar Livewire dan JavaScript
• bahkan dengan real-time WebSocket menggunakan Laravel Echo.