Sign up to access "Build a Realtime Chat with Laravel, Vue and Pinia" right now.

Get started

Already a member? Sign in to continue

Playing

16. Fetching online users

Source code

Episodes

Your progress

Total: 1h 41m
Played: 0m
Remaining: 1h 41m

Join or sign in to track your progress

Transcript

00:00

Let's talk about presence channels and see how these are going to be useful. So we can see which users are online. We know that when we created our message created event, we went ahead and broadcast this on a presence channel.

00:13

Now the channels that we've defined out need to have an authenticated user associated with them. This user gets passed in when a channel gets connected to. Now we didn't see this earlier, but if we just head over to the

00:26

browser and open up our network tab, if we just look at our FetchXHR request, you can see that we're making this request to auth. This happens automatically within Laravel Echo to authenticate us on that channel.

00:39

So it passes down all the data about that user, that user gets put into here and we can decide whether or not we want to authorize them on this channel. For example, if I return false here, before I return true, you can see that this request now fails with a 403 forbidden.

00:57

That's a good opportunity to go ahead. And like I said earlier, check if that user is allowed to access that room or not. And then you can combine this with authorization on the page itself to stop the user accessing that channel.

01:10

Now we're letting all of our rooms open to all users, but when we work with the presence channel, what we can do is return an array of data in here that we want to be pushed to our reverb server. So for example, I might want to return the user's ID so we could grab that here.

01:27

And we also might want to grab the user's name as well. So we can show who's online. If we go back and just connect up to this channel, get rid of this and we open up our reverb server.

01:38

What you'll notice is this pusher member added event. So this gives us now the user ID, which we can use, but this now gives us all of this user info. And that is the array that we returned from that channel

01:52

now represented as an object. So in here, you can return any data about your users that you want to show them on the client side. And we'll see how we pick these up in just a second.

02:04

Now I'm going to use a slightly different variation of this and say user only ID and name. That does exactly the same thing. It's just a little bit shorter than if you need to add any other details

02:14

like the user's avatar URL, you can add them in there as well. So now that we have this presence channel data, how do we pick this up? Let's take a look at that now. So let's go over to our room where we are creating out our channel

02:27

and we're listening for a message. What we're now going to do is chain on the here method. What this will do is it will give us all of the users who are currently in this room.

02:38

Let's console log on them users and see what we get. So if we head over and open up our console, let's take a look. There we go. So now this is dumping out all of that data for every single user that

02:52

we're returning from that channel. We can use this data to push to a store of all of the users who are currently online, and then of course we can go and list them out down here. Let's look at that in the next episode.

Episode summary

In this episode, we dive into presence channels and see how they're used to show which users are currently online in a chat room. We start by looking at how presence channels require an authenticated user and how Laravel automatically handles the authentication requests under the hood.

You'll see how you can decide who gets access to your channels by returning true or false in your authorization callbacks, and even send back extra data about the user (like ID, name, or even avatar URLs) so that info is available client-side.

Once that's set up, we switch over to the frontend, where we use the .here() method to grab the list of users currently present in the room. We console log out this data to see exactly what's coming back, and talk about how you can use this to keep your own list of online users. In the next episode, we'll actually display that list in the UI!

Episode discussion

No comments, yet. Be the first!