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

11. Fetching and pushing previous messages

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 change this up a little bit. So if we're not intersecting, we go ahead and return. And then otherwise, down here, we

00:06

want to access our store and load in any previous state. So let's just define out how we want this to look first, and then we'll add in the action. So let's say load previous state.

00:16

And we need to pass in the slug of the room. Now, we don't have that passed in as a prop at the moment. Let's just define it out, and then we'll pull everything together.

00:26

So let's say props room slug. OK, so the first thing is we want to accept into here the room as a prop, or just the slug. You can pass just the slug in as a string if you want,

00:38

and we'll set that out as props. And then over in our room, we want to make sure we pass down the room that we have inside of our overall room to that component.

00:48

And now, all we need to do is just add in this load previous state. So we didn't call that store. We called it messages store.

00:55

So let's head over to the messages store and create that out. OK, so we've got our fetch state action. Let's create out a load, or let's

01:04

call that fetch previous state. Kind of makes more sense. And let's create that out in here. We know that we want a room slug to be passed into here.

01:14

And let's just console log on that room slug so we know everything is working. All right, so let's change this over to fetch previous state. And this should work now.

01:24

So now, when we scroll up to the top, there we go. That's the room slug that we're dumping out over in fetch previous state. Now, to fetch our previous state,

01:34

all we need to do is call another action, fetch state, with an incremented page number. Remember, we're storing the page number up here when we grab this.

01:43

So every time we call fetch state, the page number will always increment, because we'll always be on that page. And it will load in more data and push this.

01:51

Remember, we pushed this to a new array, binding in the previous messages. So this is incredibly simple. We just need to call fetch state, pass the room slug in,

02:02

and then take the state of the current page and add one. Now, at the moment, we're not actually passing the page number in. So this is just going to load the same page

02:11

over and over again. Let's just make sure we've got this working, first of all, and then we'll go ahead and add that page number in. So let's scroll up and let's see what happens.

02:19

So when we get to just near the top, that should go ahead and load more in. But as you can see, it's just loading in the last batch of messages,

02:29

which is page one. So really simple change. We can just add in the page number directly in here that we want to load in.

02:36

Laravel's pagination will take care of this and it will push on the previous bunch of messages. So let's keep track of the message numbers, which is why we've outputted them in here.

02:44

And let's go all the way up to the top and check this out. So we've got nine, seven, five, four, three, two, one, 70, 69, and there we go. So every time we now bump to the top,

02:56

it's just going to keep loading those messages in from the previous page. And of course, what you can do here is now go over to the message index controller

03:06

and bump this value up a little bit. So you get more messages loaded in initially, but of course this is still going to work in exactly the same way.

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!