Livewire Events

Laravel Livewire simplifies so many aspects of building out your Laravel application. Livewire makes it easy to send data from the client to the server and from the server back to the client.

It's kind of like Ajax and Laravel hooked up 💖 to create Livewire. It's as if the front-end 🍆 and the back-end 🍑 created a child with XHR superpowers.

In this quick tutorial, I'll show you how easy it is to send data back and forth from the client and the server.

Client To The Server

Sending events from the client to the server can easily be accomplished with a wire:click event:

<button wire:click="functionName">Click Me</button>

This is covered in the Livewire Actions Documentation, but what if we wanted to call a PHP function from vanilla javascript?

Simple enough, we can utilize Livewire Events, like so:

<script>
    window.livewire.emit('say-hello');
</script>

Then, inside of our PHP code, you'll need to register an event listener that maps to a function:

protected $listeners = ['say-hello' => 'sayHello'];

public function sayHello()
{
    // your code here
}

That's the simplest way for your front-end to talk to your back-end. Next, we'll see how we can send an event from the back-end to the front-end.

Server to the Client

Sending events from the server to the client can be done by utilizing the dispatchBrowserEvent function, like so:

🤩 Our Amazing Sponsors 👇

View Website

DigitalOcean offers a simple and reliable cloud hosting solution that enables developers to get their website or application up and running quickly.

View Website

Laravel News keeps you up to date with everything Laravel. Everything from framework news to new community packages, Laravel tutorials, and more.

View Website

A Laravel Starter Kit that includes Authentication, User Dashboard, Edit Profile, and a set of UI Components. Learn more about the DevDojo sponsorship program and see your logo here to get your brand in front of thousands of developers.

public function sayGoodbye()
{
    $this->dispatchBrowserEvent('say-goodbye', []);
}

Then, we can register an even listener in javascript to catch this event:

<script>
window.addEventListener('say-goodbye', event => {
    alert('Radical!');
});
</script>

And that's it 🙌

Your front-end and your back-end are talking to each other like high school BFFs!

Finally, you may like to know how to send data between the two. Let's cover that next.

Sending Data to the Server

Using our previous code example, we can easily pass data to the server with the following javascript code:

<script>
    window.livewire.emit('say-hello', { name : 'John' });
</script>

And we can access that data from the first argument in our function:

protected $listeners = ['say-hello' => 'sayHello'];

public function sayHello($payload)
{
    $name = $payload['name'];
    // your code here
}

Pretty cool, right? Next, we'll also need a way to pass data from our server to our client.

Sending Data to the Client

We can easily send data from our PHP code to our front-end by sending it in the array of our dispatchBrowserEvent function:

public function sayGoodbye()
{
    $this->dispatchBrowserEvent('say-goodbye', ['name' => 'John']);
}

And we can capture that data in javascript by fetching the event.detail variable.

<script>
window.addEventListener('say-goodbye', event => {
    alert( event.detail.name );
});
</script>

Couldn't be easier 👌

Simple Debugging

Remember, if you ever need to debug your code, you can always call the dd function from your PHP code:

public function sayHello($payload)
{
    dd($payload);
    // your code here
}

This will display a nice client-side popup that outputs your data.

Conclusion

Livewire can make building out real-time applications easier than ever before. By utilizing events, we can easily pass data back and forth between our client and our server.

Be sure to check out the Livewire Documentation to learn more about Livewire. Additionally, you can check out more articles written about Livewire on the DevDojo 🤙