Playing
04. Joining channels and listening to events
Episodes
01. Broadcasting Basics
02. Private channels
03. Presence channels
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.
18 episodes•1 hr 19 mins•11 months ago
Overview
New to realtime broadcasting in Laravel? This course covers the essentials with plenty of examples along the way, leaving you ready to start adding realtime functionality to any of your Laravel applications.
Broken up into channel types, we’ll cover:
- The basics of installing, configuring and running a Reverb server
- Broadcasting events
- Private channels
- Presence channels
- Client-to-client broadcasting by whispering
Alex Garrett-Smith
Hey, I'm the founder of Codecourse!
Episode discussion
No comments, yet. Be the first!