Build a Realtime Chat with Laravel, Vue and Pinia
This episode is for members only

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
17. Storing online user state

Episodes

0%
Your progress
  • Total: 1h 41m
  • Played: 0m
  • Remaining: 1h 41m
Join or sign in to track your progress

Transcript

00:00
OK, so we're going to go through the process of creating another Pinya store that is going to hold the users that are currently online. We could reuse this store, but it makes sense to move this over to a different store to keep things nice and tidy.
00:11
OK, let's follow the same pattern as before. So over in our store section here, let's create our a new JavaScript file and let's call this use users store. And we'll go ahead and define this out.
00:23
So once again, we're going to import the define store function from Pina and we'll go ahead and export this out and we'll call this use users store. Let's use define store to create our user store. And now we can just start to add any of our state.
00:38
So let's start with our state. First of all, we know that in here we are going to output a bunch of users or store a bunch of users. And while we're here, let's go ahead and create out our getter for all users,
00:52
which we know is just going to return from our state. And users, and that's it. OK, so now what we can do is when we get this event pushed in through echo just here, we can go ahead and access that store and push to it.
01:08
So let's do exactly the same thing as we did before with our messages store. But we'll just change this over to our users store and we'll use our users store here, which for me gets imported automatically just here. But go ahead and pull that in if it doesn't.
01:23
And now with our users store, when we get this event through, we can go ahead and maybe set all users to the users that we get through from this event. We don't have that at the moment. So let's go back over to our store and let's create out an action to do this.
01:39
So set users. And we know that in here, we're going to get all of them users passed in. And in this case, it's really simple. We're just going to set the state to them users.
01:50
Okay. Now that we've done that and we have invoked that from here, we should get all of them users out. Let's create out a component.
01:58
So we can at least just dump these out on the page. So let's create a view component in here called chat users. And again, because we're using a store now, it's super simple to go ahead and just import this up here and work with it.
02:12
So we want to pull in use user store. We then want to create that out and invoke use user store. And now down here, let's just dump out user store and all users. Great.
02:26
So back over to our room, let's pull this in where we are outputting our users. So we'll just put this in here. That is chat users and we should be good. Okay.
02:36
Let's head over to the browser, give this a refresh. And there we go. So now when we hit this and join that channel, it's going to automatically give us back all the users who are currently within that channel.
02:48
Okay. Let's go ahead and style this up really quickly. And then we will look at keeping these in sync. So let's create out a header here and say users online.
02:58
We'll add an X in there, but we will change that over to actually show the count of users, which we can do in a couple of ways. We'll create out an unordered list in here of the list item for each user. And let's go ahead and add some classes to this.
03:11
So we'll say a space Y of one, a margin top of three. And just while we're here, let's make this text large and font semi bold. Okay. So for each of these list items, that's going to be a user.
03:23
We'll set a background of gray 100 to this, make this rounded large and set some padding on the X and the Y axis. And then let's start to iterate over each of these users. So V4 user in and access our users store and grab all users.
03:41
We'll key this. So we are passing in a user ID. And then down here, let's just output the user's name. Okay.
03:50
That should be enough. And there we go. Great. So let's just adjust this padding slightly.
03:55
Just bump that down and there we go. Great. So we get a nice list of all of the users who are currently online. Let's quickly update the users online count.
04:04
We can do that in a couple of ways. You could say user store all users length, and that would give you the count of that array, or you could add a getter for this if you wanted to. So we could say user store count, and then we could head over to our users
04:19
store and we could implement another getter. It's entirely up to you. So let's create that count getter out here, say state, and it's return state users and length like so.
04:33
And if we head over, we get exactly the same thing. This is more useful for when things get more complex. Like if you want to filter out certain users, for example, but we'll go ahead and add it in there as an example anyway.

Episode summary

In this episode, we focus on storing and displaying the online users in our chat application. We start by creating a new Pinia store dedicated to handling the currently online users. Instead of cluttering our existing store, we keep things organized by having a separate store for user state.

We follow familiar patterns: creating the store file, defining its state (an array for users), adding a getter for getting all users, and then wiring up an action to set the list of online users whenever we receive them from an event (like a push from Echo). Once that's sorted, we move over to our components and set up a simple Vue component (ChatUsers.vue) that just dumps out the user list from our store onto the page.

After getting the bare functionality, we quickly style up the component to look a bit nicer: adding a header, displaying the count of online users, and showing each username in a styled list. We also show two approaches to count the online users: either by checking the array's length directly or by adding a computed getter in the store. This sets us up nicely for more advanced filtering later if needed.

By the end of this episode, we've got a clean, reactive display of who is online, complete with some polish and options for future expansion!

Episode discussion

No comments, yet. Be the first!