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

Source code

Episodes

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.

21 episodes•1 hr 41 mins•9 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!