Playing
14. How presence channels work

Transcript

00:00
Inside of our channel's root file, we're pretty used to just returning a true or a false value to see who can access a certain channel. What we want to do within a presence channel is return false if for any reason a user can't access a channel, but then what we want to do is rather
00:17
than return true, we want to return all the data that we want the WebSocket server to hold about that user. So let's get rid of the default root inside of here and change everything up and create out a channel specifically for each of these rooms.
00:34
Again, let's call this room ID so it's a little bit easier to see and we'll go ahead and pass that in there as well. Now, we're not going to authorize this just yet, but the concept is exactly the same as a private channel.
00:45
Remember, presence channels work in exactly the same way as a private channel. So feel free to add any conditions in here to stop a user accessing a particular room. Now, rather than return true or just return nothing, we can actually just return an array of any
01:01
of the data that we want to hold about the current user who is accessing this. So again, let's go ahead and type in this user with the user model and let's return some data. So, for example, we might want the user ID, particularly if we're iterating through
01:17
on the front end and need some sort of unique key. And let's also do the same thing for the name as well. Now, there's a much easier way to do this. It's completely irrelevant to how presence channels work.
01:28
But if you have a model within Laravel, you could do something like user only and then just pluck out the fields that you want to see. Either way, it doesn't really matter. OK, so now that we've defined this channel,
01:40
let's go ahead and connect to this inside of our template. So we'll go over to our room template here and once again, just using pure JavaScript with the help of Alpine, we'll do an X in it on here and use Echo to connect. So now we're going to say Echo join,
01:58
and then we're going to pass in the room that we want to join. So we're going to say room, obviously, because we're working within this template and it has the room, we can just very easily output the room ID directly in here.
02:13
OK, so the first thing we want to do is make sure that we're actually authorized to access this. So let's go over to room two and over in our network tab, you can see it works in exactly the same way.
02:22
We're authorizing access to this. But the difference now is our WebSocket server has knowledge of all of the details of our user. Let's head back over to the terminal and have a look here.
02:33
So you can see that we are now added to this particular channel. We get this member added event. And as you can see under the data, we've got user info. We've got all of the information that we
02:48
pass back from that channel that we defined. So all of this data is now held within our WebSocket server and is being pushed. If we leave the room, we'll get an event that we've left. And we also get an overall event as well
03:02
that tells us who is currently in the room. Our job is now to hook in to this and update a list of users who are currently here, who have joined and who have left. Let's go over and do that now.

Episode summary

In this episode, we dive into how presence channels work in Laravel. Instead of just returning true or false when authorizing access to a channel (which you'd typically do with private channels), presence channels require you to return data about the user. This data is what the WebSocket server holds onto to track who is actually present in the channel.

We walk through the process of setting up a presence channel for a "room"—giving each channel a unique name using the room's ID. Rather than just a simple authorization, we return an array of user details (like the user's ID and name), which makes it easier to manage the list of users in the frontend. We also mention a shortcut Laravel offers for selecting only certain fields from your models.

Next, we connect to our presence channel using JavaScript (specifically with Alpine.js and Laravel Echo) and see this in action by tracking join/leaving events. The server returns various member events, updating us with who enters or exits the room. The final goal here is to use these events to maintain and update a live list of active users in the frontend—including marking who just arrived and who just left.

In the next part, we'll actually implement that frontend user list so you can see your presence channel data updating in real-time!

Episode discussion

No comments, yet. Be the first!