[Video] Real-time Livewire w/ Laravel Echo & Pusher
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: https://livewire-framework.com/docs/quickstart/
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.
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!