Realtime with Laravel Reverb
Playing
04. Joining channels and listening to events

Episodes

0%
Your progress
  • Total: 1h 19m
  • Played: 0m
  • Remaining: 1h 19m
Join or sign in to track your progress

Transcript

00:00
So over in our dashboard, this is where we are going to listen for this event. Of course, you can listen to events from anywhere in your application. You can do this with pure JavaScript, you can do it with Alpine, which we're going to do here, or you can even do it with Livewire, which we'll cover in other courses.
00:16
OK, so we're going to bring up our console because we're going to be pretty much just dumping the result of the event that we're broadcasting over in this tab. So let's keep that open and let's figure this out. OK, so if we head over to our dashboard template, let's use Echo, which is now
00:34
globally available on our window object to connect to this channel and listen to a message. So I'm going to pull this down. If you're not familiar with Alpine, don't worry too much. We're just writing pure JavaScript here.
00:46
We're just using Alpine to initialize a piece of JavaScript that we can then go ahead and run. So onto any of the elements on this page, it doesn't really matter. We're going to go ahead and use X in it. And anything that we run in here is just going to run as JavaScript.
01:02
So let's just write test in here. If we head back over to here, you can see that test is being logged. So we'll just write all of our JavaScript in here. And then you can go ahead and move this over to any of the applications that you build,
01:15
whether you're using Inertia, Livewire or just pure JavaScript. OK, so let's go ahead and use Echo to connect to a channel. Just as a really quick reminder, before we do do this, remember over in Echo JS, when we set Echo up,
01:29
it's listening on this particular server that we have defined, and it's bound to our window object. That's why we can access this anywhere we need. OK, so what do we call our channel?
01:40
Well, we called it chat. So let's go ahead and connect up to that channel, first of all. Now, I'm not going to do anything else in here just yet. We're going to take a look in our console and see what's happened within our server.
01:51
So let's go ahead and open this up. And you can see already we have a subscribe event to this channel. Auth is empty because, remember, it's a public channel. We don't need to authorize this.
02:04
And we get a couple of pings here as well. But we know that we have now successfully, for this particular user, subscribed to that channel. Now what we want to do is listen to any events that are broadcast to our WebSocket server.
02:18
For that, we use listen. Now, there's a couple of ways that you can do this, depending on how you have your app structured. A little bit later, we're going to look at namespaced events.
02:29
But we know that our event is called example. So we're just going to provide that in there as a normal string. And what happens now? Well, when Echo receives an event called example on here,
02:43
then we run a closure with any of the event data passed in. For now, we're just going to go ahead and console log out all of the event data that we get. So connect to the channel that we're pushing to, listen for this particular event, and just dump out the contents of the event.
03:01
Let's see what happens when we do this. OK, so let's go over to our real-time broadcast route here, hit Enter, come back over, and there we go. As you can see, this has given us an empty array.
03:15
We're not adding any event data to that event class at the moment. But if we did, we would see that appear here. So now is probably a good time to go over and start to add some data to this event and see what happens.

Episode summary

In this episode, we're diving into how to join channels and listen to real-time events using Laravel Echo and Alpine.js. We'll be working in our dashboard and show you how you can listen for events from anywhere in your app. Whether you're using pure JavaScript, Alpine, or Livewire (which we'll cover more in other courses), the ideas are similar.

We start by bringing up the browser console to see the events we're broadcasting. Then, we jump into the dashboard template and use the globally available Echo instance to connect to our chat channel. Don't worry if you're not too familiar with Alpine.js! We're really just using it as a way to run some simple JavaScript when the component initializes.

Once connected, we confirm in the console that we've subscribed to the channel. Since it's a public channel, we don't need to worry about authentication here. Next up, we listen for the example event on this channel, and whenever it comes through, we just log out the event data for now.

Finally, we trigger the broadcast from our real-time route to see it all in action. You’ll see the event data appear in the console (currently empty because the event doesn't have any payload yet). So, up next, we'll start adding actual data to our events to make things more interesting!

Episode discussion

No comments, yet. Be the first!