Build a Realtime Chat with Laravel, Vue and Pinia

Sign in Get started

This episode is for members only

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

Already a member? Sign in to continue

Playing

18. Keeping online users in sync

Episodes

0%

Your progress

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

Join or sign in to track your progress

Transcript

00:00

So the issue we've got at the moment is we're grabbing a list of all online users,

00:03

which is great, but what happens if a user leaves or rejoins? Well, this list isn't going to be kept up to date. There are a couple of other things that we can listen to on our presence channel to detect when a user leaves and joins, and then we can keep this list up to date.

00:19

So if we head over to our room where we're listening for these events, let's go ahead and just start to tidy this up, first of all, because we're going to add a couple more in here. So I'm just going to get rid of this closure and just do this as a short

00:32

closure and let's look at some of the other events that we've got. So we have a joining event which will give us a single user who has just joined. Let's just go ahead and console log that user. And we also have a leaving event as well, which will do exactly the same thing.

00:48

When a user leaves, it will dump them out. So let's head over to our console over this side. Let's give this page a refresh and you can see that Maple left. So this will be the leaving event and this is the join event.

01:00

So we can use this data to either push or get rid of these from our state. So back over to our user store, let's create out two more actions and that will be to add a user and remove a user. So let's define our add user action in here.

01:17

And of course, we're going to get a single user in for that. So let's define that out. And we're also going to have a remove user event in here as well. And we'll get the same thing, just a single user.

01:28

So let's hook these up over in our room. So we'll do exactly the same thing, access our user store and add a user when they're joining, pass that user in. And we'll do the same thing for leaving.

01:39

So user store and remove user when they leave. OK, so now we need to do is just implement the functionality to add a user if they don't already exist and then remove them when they leave. So the first thing that we want to do here is check if they don't

01:53

already exist within the list, because otherwise we don't want to push them. There are a couple of other ways that we could do this. But let's just search for that user in the list and then just return if this is undefined.

02:05

So we're just going to say this user's find. Let's find them, give that a name of you, compare their user ID to the user ID that we get in. And this will either return the user

02:17

that's been found by their ID or it will return undefined. So if this doesn't equal undefined, it means they are already in that list and we can just return. Otherwise, down here, we can just take our user state and push that user to the list

02:37

to remove a user. We basically just want to filter this list of users out. So let's reassign users to this user's filter. And we'll just define the condition in which we want to remove them.

02:50

So this will be when the ID doesn't equal. The user ID that's being passed in that will return to us or set a new array with the user who is left filtered out of that list. OK, let's go over and try this out.

03:06

So this isn't actually going to work. And I'll show you why in just a second. But let's go and hit dashboard and you can see that doesn't work. But when I refresh the page, Mabel does leave this room.

03:18

Let's rejoin this room and see what happens. So when I rejoin, sure enough, she's added to the list. Now, when we're working with an inertia application, remember that every all the state by default is kept.

03:33

So things that we define out when we create out our page component, like joining a channel, doesn't get refreshed. We don't have a page refresh here. So when we hit back to dashboard,

03:43

technically, Mabel is still connected to that channel. Now, in some circumstances, you might want that to happen if it's global across your application. But of course, what we're doing is just doing this per room.

03:54

So the way that we get around this is over in our room, we want to detect when this component gets unmounted with a view lifecycle hook. And when this component is unmounted, we then want to leave, physically leave this room.

04:10

So let's take a look at how we do that now. So we can do this anywhere. We'll do it up here. We're going to pull in the on unmounted

04:18

lifecycle hook with view, and this will be invoked whenever we unmount this page. So let's just say unmounted. And we're going to make sure we pull this in from view at the top as well. Let's go over and pull up our console here and let's head back to the dashboard.

04:35

So let's hit dashboard unmounted. So that means that the page that we're currently on has been unmounted within view. And this is the perfect opportunity to go ahead and leave that room.

04:46

There are circumstances where this might hang around depending on what the user does. But you always know that your channel list is going to be kept up to date because you're checking if a user already exists, if they try and rejoin.

04:59

OK, let's look at leaving a channel. Very, very simple to do. We want to say echo leave and then we just want to pass the channel name in. So that is exactly what we have here.

05:09

So now that we are leaving physically, when we navigate somewhere within Inertia, let's go over and see the difference. So I'm going to go and head back over to the room that we were in, give both of these a refresh, navigate to the dashboard.

05:26

You can see Mabel has been removed. Go back again and Mabel is back there. And it's going to work in exactly the same way. Whether we refresh and go back over, everything is now going to be kept up to date.

05:37

So because of the nature of Inertia pages, where they're effectively just view components, we need to make sure that we're hooking into these lifecycle to physically remove ourselves from a room when we navigate somewhere.

Episode summary

In this episode, we tackle the challenge of keeping our online users list up-to-date in real time. Initially, we were only grabbing a list of online users once, which doesn't react to people joining or leaving—so it quickly got out of sync. We start off by hooking into the user presence events on our channel, specifically listening for when users join or leave.

We clean up our code a bit and add listeners for the join and leave events. Next, we jump into our user store to add two actions: one for adding a user and another for removing a user. We make sure that when a new user joins, we only add them if they don’t already exist in our list, to avoid duplicates. When someone leaves, we filter them out of our users array.

Then, we test things out, but run into a subtle problem—because we’re using Inertia, the user can stay in the channel even after “navigating away,” so our users list doesn’t update as it should. To fix this, we use the Vue onUnmounted lifecycle hook to properly leave the channel when our room component unmounts. This totally solves the syncing problem!

By the end, we’ve got a system that reliably adds and removes users from the online list in real time, even as people navigate around the app. This makes the user presence feature much more robust and, most importantly, always in sync with reality.

Episode discussion

No comments, yet. Be the first!