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
10. Using the intersection observer API
Episodes
01. Introduction
2m 53s
0%
02. Setting up
1m 38s
0%
03. Scaffolding chat rooms
6m 11s
0%
04. Building a chat textarea
8m 38s
0%
05. Seeding fake messages in order
4m 8s
0%
06. Creating a Pinia store
3m 48s
0%
07. Creating the messages endpoint
5m 9s
0%
08. Fetching messages into our store
4m 18s
0%
09. Ordering messages with flexbox
3m 59s
0%
10. Using the intersection observer API
5m 5s
0%
11. Fetching and pushing previous messages
3m 15s
0%
12. Storing and appending messages
6m 18s
0%
13. Setting up Reverb
3m
0%
14. Broadcasting new messages
9m 49s
0%
15. Handling broadcasted messages in our store
4m 54s
0%
16. Fetching online users
3m 6s
0%
17. Storing online user state
4m 46s
0%
18. Keeping online users in sync
5m 50s
0%
19. Detecting typing events
3m 56s
0%
20. Showing when a user is typing
8m 3s
0%
21. Better formatted dates
2m 44s
0%
Transcript
00:00
We need to detect when we're at the very top of this list. So we know when to start pushing messages, previous messages to the stack.
00:07
For that, we're going to use the intersection observer API, but we're going to use the view use composable for this, which makes it a lot easier. Okay. Let's go over and just figure out how to place this element that we want when it
00:21
is visible to then start loading more in. And then in the next episode, we'll actually start to push these to the stack. Just while we're building this, I'm going to go over to the message index controller, and I'm just going to reduce the amount of messages that we're
00:34
initially showing, just so we don't need to keep scrolling too much. Okay. So when we hit this point here, we want an element in here that when it becomes visible, we want to load more in.
00:44
Let's go ahead and add that element and then see what we get. Okay. So let's add this at the top of here. So we're going to say intersect up here and let's see where this positions.
00:57
This, I'm going to give this a refresh and it's at the bottom. Remember we're using flex call, but we're reversing that. So what we actually need to do is add this at the very bottom underneath the last iteration.
01:10
So this actually goes to the top. So when this element, which we're not going to end up having text in is visible, we then want to start to load. Okay.
01:19
So I'm going to keep this element text in here. But we're going to get rid of it once we're done. Okay. So we need a ref to this.
01:26
So let's add in a ref of say target. It doesn't really matter what we call this. And up here, let's go ahead and create out that target variable with a ref. All this means is now we have an, a reference to this within our script that
01:40
we can use for that HTML element. Next up, we're going to go ahead and pull in Vue. Use. So let's install that.
01:46
First of all, let's say NPM install and it's Vue. Use slash core. Once that's finished, we have access to all of the composables that this gives us. So we're going to import the use intersection observer from Vue.
02:03
Core, and then we can start to attach it to this target. So let's do this just down here and let's start to create this out. So when we create this out, we get the ability to stop intersecting, which we're not going to do because we don't need to, but we're going to invoke that
02:22
composable and into here, the first thing that we pass in as the target. So this knows where it needs to look or what it needs to look for. Next up in here, we have a closure, which is going to give us whether this is intersecting or not.
02:36
So in here, we're going to get is intersecting. Let's pull that in. And we also have the observer element, which we're not going to use. Let's just pull that in anyway.
02:47
Call that observer element. And then when this runs, let's just console log out is intersecting. So basically now that we've done this, as soon as this target is visible within that scrollable viewport, it will console log out whether it's intersecting.
03:02
This will always console log out. So probably more appropriately, we could say if it is intersecting, then we want to console log something out. Okay.
03:12
Let's just try this out and see what happens. It looks like we have an error. So let's just head over and have a look here. And yeah, we just need to import ref.
03:20
Let's pull that in from view. And there we go. Okay, great. So keeping the console open, let's go and scroll up.
03:28
As soon as we see that element, we should get a console log of true. So it's at this point, we want to go ahead and make another request to our messages endpoint to pull in the next page, which because we're ordering by latest is going to be the previous page.
03:45
Okay. Let's finish up by just making this a little bit better. So I'm going to get rid of intersect because obviously we do not want to see any text here.
03:54
And what we can also do is we can add a class in this to translate this with CSS. So it pushes it down very slightly. That means that we're going to start to load before we hit the top of that scrollable element.
04:07
So we're going to say, we want to translate this on the Y axis by 20. And that's just going to pull that down very slightly. We can see this by adding a height to it and setting a background color, and you'll see what I mean.
04:19
So now when we go ahead and scroll up in here, you'll notice that this exists a little bit before we get to the very end of the text area. And it doesn't look like anything showing. So let's set this to, uh, it's probably just because we
04:35
don't have any text in there. Let's add that back just so I can show you what I mean. And there you go. So you can see it's not at the top.
04:41
It's been translated down. So when we hit that point, it will load before we get to the very top. Okay. Let's get rid of that background color, the height, and also
04:51
intercept, and there we go. So as we scroll up, just before we get to the end, we get true. Let's jump over to the next episode and actually start to load previous messages in.
21 episodes•1 hr 41 mins•10 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!