Switching to Pusher0:00
Okay, so in the last episode, we learned how to dispatch a regular Laravel event, but as part of that event, we implemented this ShouldBroadcast interface. And as part of that, it's our way of telling Laravel, hey, we actually intend to dispatch or broadcast this event to the client side. And to start, we're just doing it as a regular, naive, public channel called orders. Okay, but now, rather than just logging in, which isn't much help, other than for maybe local development or testing, I'd actually like to send this to Pusher so that we can see something on the screen without requiring the user to reload the page. So we're going to sign up here, I'll just use Google. Okay, so let's set up a quick app.
Configuring Pusher Credentials0:39
So we're going to sign up here, I'll just use Google. Okay, so let's set up a quick app. For my cluster, let's use US East Coast. Now to begin, if we visit the app keys, of course we need to tell our project about this. So if we come back to code, if we go to config/broadcasting, yes, we're going to use Pusher. So you'll see right here, we have to specify the key, the secret, and the app ID. Also, we need to update our default driver to be Pusher. So let's go to our .env file, BROADCAST_DRIVER is now going to be Pusher, and if we scroll down further, we can paste in these settings.
So let's go to our .env file, broadcast driver is now going to be Pusher, and if we scroll down further, we can paste in these settings. So here's my app ID, the app key, the secret, and that should do it. So now, think about it, when we fire that orderStatusUpdated event, we're now saying, okay, we're going to broadcast this event using Pusher and using these specific credentials that reference our Pusher account. So let's give this a shot. I'm going to go to my debug console, which is useful to see all of the events that are coming in in real time. We're going to go back to Chrome, reload the page, but instantly it fails.
Installing Pusher SDK1:49
coming in in real time. We're going to go back to Chrome, reload the page, but instantly it fails. Class Pusher, Pusher not found. And this is because if we're going to use the Pusher SDK behind the scenes, well, we of course have to pull that in through Composer. Now of course, you can find the link in the Laravel documentation, or you could just say composer search Pusher. And what we want is this one right here, Pusher PHP Server. And you'll see I'm pulling in version 3.0. Okay, so let's come back and give that a reload.
Verifying Broadcast in Console2:18
And you'll see I'm pulling in version 3.0. Okay, so let's come back and give that a reload. And if we now switch to Safari, there it is, as easy as that. So we can see right here, from our server, we dispatched an event called orderStatusUpdated with this generic payload here. And so just by changing that driver, that data was sent over the wire to Pusher. Let's give it another shot, reload. Now we should have a second one. Now if we go back to code, into our routes/web.php file, yes, remember, maybe here you're giving the order that happens to exist.
Broadcasting Order Payload2:48
Now if we go back to code, into our routes/web.php file, yes, remember, maybe here you're giving the Order that happens to exist. So why don't we have a class Order here that has, I don't know, an ID, we're just being very quick here. Of course, in real life, this would be likely an Eloquent model or something like that. Anyways, we're going to dispatch a new Order with an ID of one. And now within our event class, we just have to accept that. So this would be order, and then we would assign it here. All right, so back to Chrome, give that a refresh. And here we go.
