Intro and Project Setup0:00
Laravel Echo gives us the ability to very, very easily subscribe to events that have been broadcast to your server. So this gives you a nice and easy way to communicate in real time between your server and the client side. And this way, you can respond to events that have taken place behind the scenes without requiring the user to refresh the page. So why don't we take a look at this. I'm going to create a new project, laravel new echo-series. We'll cd in there. And to begin, I will install my NPM dependencies.
Enable Broadcasting Provider0:26
We'll cd in there. And to begin, I will install my NPM dependencies. All right. So let's switch over and get started. Now right off the bat, I'll go to config/app.php, and we're going to scroll down to where we register all of Laravel's providers. So if we scroll down, you'll see BroadcastServiceProvider is commented out. Let's uncomment that. And now if we visit that, here we go. So by activating this service provider, we will, of course, trigger the boot method.
And now if we visit that, here we go. So by activating this service provider, we will, of course, trigger the boot method. And among other things, it will register a number of routes and then load your routes/channels page. So if you've ever come across that and you didn't know what it does, you'll learn in this series. But the important thing to understand is unless you uncomment that line, any changes you make in this file will not be reflected because it's not being loaded anywhere. Anyways, let's take a look at this. php artisan route:list.
Broadcast Auth Route Overview1:16
Anyways, let's take a look at this. php artisan route:list. Have a look right here. So we have one new route, and just to prove it to you, that's what's loading it. So bring that back. So what is this doing? It's making a POST request to broadcasting/auth, and this is what handles all of the authorization for private channels. And trust me, we'll learn all about that. So for now, just accept.
And trust me, we'll learn all about that. So for now, just accept. We're going to register some routes that Laravel needs and Laravel Echo will need. And then we are loading this broadcast/channels file. You can almost think of this as authorization. This determines if the current user is authorized to listen to this channel. And again, think of channels as, okay, we're going to communicate between the server and the client. So we're going to turn the radio dial a little bit to a certain channel that we want to communicate on.
Choose Broadcast Driver2:33
And for the driver, you can choose between pusher, which will be the easiest possible option. It's a service. There's a free option. You can upgrade if you need to, or you can use Redis. That will require a little bit more work on your part. Of course, we could do a standard logging, and we can have a null driver. So why don't we start, let's take baby steps here. We're going to stick with log just for a few minutes so that we can inspect how this works. That means whenever we broadcast an event, well, we're just going to broadcast it to
Create Broadcastable Event2:55
We're going to stick with log just for a few minutes so that we can inspect how this works. That means whenever we broadcast an event, well, we're just going to broadcast it to a log file. So we should see that show up within our storage/logs/laravel.log file. Okay, let's give this a shot. So why don't we just fire some kind of generic event? So we'll say, php artisan make:event OrderStatusUpdated. I don't know, maybe you've purchased an item from Amazon, and this event will be fired whenever the status of the order. Maybe has it been shipped?
whenever the status of the order. Maybe has it been shipped? Is it impending? Is it being prepared? Whenever that status changes, we'll fire an event. All right. So if we take a look at this, orderStatusUpdated, by default, this will just be a standard server side event where we can register any number of listeners. But I also want to broadcast to the client. So you'll see this interface here called shouldBroadcast.
But I also want to broadcast to the client. So you'll see this interface here called ShouldBroadcast. Well, yes, we can implement that contract, but also behind the scenes, Laravel is going to check to see, all right, does this event implement the ShouldBroadcast contract? And if so, well, we need to broadcast it. Now, once again, if we go back, you'll see there's one method on this contract, broadcastOn. So you'll see by default, it's assuming that we're going to broadcast on a private channel. Think of that as like a one-to-one channel that only you and one other, well, really any number of users, but to start, just imagine it as like walkie talkies.
So why don't we start with that and then we'll work our way up to private channel. So I'm going to return a new, actually to start, let's go to private channel, and then I'm going to open up my sidebar and here's all the various channels we have. So there's a private channel, a presence channel, pending channel, and then of course a default channel here. That's what we're going to start with, a default public channel. Okay. So let's return a new channel and do note, we are now importing this at the top. So what is the channel name? Anything, anything we want.
So what is the channel name? Anything, anything we want. Maybe orders. Yeah. So remember again, in this particular case, if we're, if we want to broadcast that a specific user's order has updated, that should be a private channel. We're just keeping it public here so that we can work our way up in complexity. So now what are we saying here? Well, when I fire or dispatch this event, among other things, I want to broadcast it to the client side on the channel called orders.
Dispatch Event and Inspect Logs5:28
Well, when I fire or dispatch this event, among other things, I want to broadcast it to the client side on the channel called orders. So let's give it a shot and let's say orderStatusUpdated and we will dispatch that. If you're not familiar with this, it's identical to if you were to say event new OrderStatusUpdate, exact same thing. And in fact, if you want to take a look, it's just doing the same thing behind the scenes. So it's whatever, whatever feels most comfortable to you is what you should do. All right. So let's go to EchoSeries.test. That should dispatch the event.
So let's go to EchoSeries.test. That should dispatch the event. So if I go back to code, we should now find a storage/logs/Laravel.log file. And here we go. So we can see that we are broadcasting this event on the channel called orders with the given payload. And in this case, we don't have any payload at all. So as with any event, anything that you define as a public property will be accessible. So if I were to say public $foo = 'bar', and let's give that another run. Well, if I come back, now we are passing that through.
So if I were to say public foo is bar, and let's give that another run. Well, if I come back, now we are passing that through. So again, in your head, think of it as we are broadcasting a server side event that contains this payload. And of course, remember, that can be whatever you pass in here through the constructor. But we're going to take that payload, broadcast an event using the name of the class, and that's going to be sent to wherever you send it. In this case, we're just logging it. But in real life, we want to broadcast it all the way to the client side. So in the next episode, let's switch from the log driver over to using pusher.
But in real life, we want to broadcast it all the way to the client side. So in the next episode, let's switch from the log driver over to using Pusher.
