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.

21 episodes•1 hr 41 mins•11 months ago

Overview

Using the power of Reverb, let’s build a realtime multi-room chat with Laravel and Vue with Inertia, pulling in Pinia for state management.

We’ll cover:

Using the Intersection Observer API to automatically load previous chat messages
State management with Pinia
Using presence channels to show online users for each room
Client-to client communication to show who’s typing
Using flexbox tricks to keep messages scrolled into view as they roll in

Alex Garrett-Smith

Hey, I'm the founder of Codecourse!

Episode discussion

No comments, yet. Be the first!