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

08. Fetching messages into our store

Source code

Episodes

Your progress

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

Join or sign in to track your progress

Transcript

00:00

Now that we have our messages endpoint, let's create an action inside our Pina store to go ahead and pull this in. So let's define out the actions that we want inside of here. And these are just methods, basically, or functions.

00:12

So very, very straightforward. And let's go ahead and define our effect state function in here to go ahead and grab this for us. Now, we're going to need to know which room slug we're working with. So let's pass that in, first of all.

00:25

And we also want to know which page that we want to load in. We're going to be re-invoking this action when we want to load in a new page. So we're going to need to know how to pull this in. So let's just console log in here.

00:36

And we'll just say fetch state. And let's invoke this over from our room. We can invoke this from anywhere, but it kind of makes sense to do it directly from here. OK, so our props are down here.

00:46

Let's pull them up to the top, which is probably where they belong. And let's define these out as a variable so we can access the slug from the room object we're passing in. So in here, we're going to use our messages store to fetch our state, passing in the room slug.

01:04

And we set a default for the page, so we don't need to pass that in here. Let's go over to the browser, back over to our actual room. Let's bring up our console. And we should see that logged out.

01:14

Great. OK, time to actually fetch them. So let's go back over to our fetch state method. And we're going to use Axios to do this.

01:21

So let's make sure we import Axios at the top here. You can use fetch, but this just comes with Laravel by default. So it kind of makes sense. OK, so we're going to say Axios get.

01:32

And in here, we know that we want to go to rooms. We need to pass the room slug in. And then we want to access that messages endpoint. Then once that is successful, we want to go ahead and grab the response

01:47

and do something with the response. For now, let's just console log on the response data that we get back. And we should see all of the messages output in here. So we've got 100.

01:57

Now, this is paginated. So we've got data, links, and meta. We can use this to keep track of the current page. And we actually added that just up here.

02:06

So it's always assumed that we're on page one. Let's go ahead and update the state in here to reflect the current page. So let's set the page state in here to the response data, meta, and then the current page.

02:22

So that should now store the current page for us. And we can keep track of this within our store. Then we want to go ahead and set in the messages. So let's go and set our messages state.

02:33

Now, with this, what we want to do is whenever we invoke this, we don't just want to set this to the response data and data, which is the array of messages, because then that's going to override the entire state for us.

02:48

Instead, what we want to do is always push them on to the state. So to do this, we're going to create out a new array. We're going to spread out the current messages from our state. And we're going to create a new array with the spread out data that we get in.

03:03

So that's just basically going to create a new array with them combined items. So let's grab response data and data. And we should now have our messages. So now that we've done this, and we're fetching this,

03:15

and it's adding it to our state, let's create out a new component within our component section to dump this data. So I'm going to create a new view component called chat messages. And we'll be able to read our state from this component.

03:29

So we're going to do everything that we've already done. So at the top of this component, let's go ahead and import our use messages store. Let's go ahead and create this out again as messages store and invoke use messages store. And in the template, let's just dump from our messages store all of our messages.

03:47

And then that should unload within the room component, hydrate our store, and then we'll see all of that data. OK, so let's go over to our room again. And we'll pull this component in.

03:59

So let's go down to just up here. Let's output our chat messages component. And let's space these two things out. So let's space these on the y-axis by three.

04:10

OK, let's give the page a refresh. And there we go. So that loads in all of our state for us. And we can start to iterate through all of this data.

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!