Caleb Porzio

[Video] Real-time Livewire w/ Laravel Echo & Pusher

Apr 2019

In this series of screencasts, I'll walk you through a powerful new feature in Livewire: Events. Events allow components to communicate with each other and also allow other tools like Laravel Echo to trigger changes in your Livewire component.

Big shout-out to David Piesse for helping me with this feature!

Let's jump in!

Note: This is OLD content. Some of what I demo may no longer be available in the framework. The docs are the source of truth for the project:

Wiring Up Livewire

Before we get into the event stuff, let's convert ordinary blade partials to Livewire components. This video is a helpful refresher on pulling Livewire into your app.

Using Events For Component Communication

Now, we need to update the "Cart Counter" by firing events from the "Cart Product" components. This is our first encounter with the new event functionality.

Installing Laravel Echo

I decided to record the process of pulling Laravel Echo into any Laravel app because it's a bit confusing at first. Feel free to skip this video if you are already familiar with Echo.

Wiring Up Livewire & Echo Together!

In this video, we'll get Livewire and Echo talking to each other so we can experience real-time updates across browser sessions. Pretty powerful stuff here.

Wrapping Up

After lot's of user-testing, I'm really starting to focus in on the core feature-set of Livewire for its launch. Component communication was a tough problem to solve because of the nature of Livewire. There were a few different strategies I toyed around with but ultimately landed on this as the most simple and flexible.

If you are liking what you are seeing, sign up for the email newsletter below. I send all Livewire updates (sometimes exclusively) to that newsletter.

Thanks for following along!

Cheers, Caleb

My Newsletter

I send out an email every so often about cool stuff I'm working on or launching. If you dig, go ahead and sign up!