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
09. Ordering messages with flexbox
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
Heading over to our chat messages component, where we are fetching our state here,
00:04
let's go ahead and just create our really basic wrapper for all these messages. And then we're going to see a problem with this. Remember, this is a chat interface where we want the latest message at the bottom, but we also want this to always stay at the bottom.
00:16
So as new messages roll in, it automatically scrolls. And we can handle all of this using Flexbox. OK, let's go ahead and create out a basic wrapper for this. First of all, I'm going to set a preset height to this,
00:28
which is pretty important because we need this scroll to happen. And let's just go ahead and add some other visual things in here as well. So set a back border of grey 200. We'll make this rounded large.
00:39
And we'll give this some padding on the x-axis of 4 and padding on the y-axis of 3. And that's just about it for now. We could also now set an overflow on the y-axis to auto, so it scrolls. OK, so in here is going to be each of our messages.
00:54
Let's go and iterate over these. So let's say v for message in. And remember, this is coming from our store. So messages store dot messages or all messages.
01:06
And let's go ahead and give this a key. So we know each of our messages has an ID. Let's use that. OK, so let's add some styles to this.
01:14
We'll set this to flex with space x of 3 and a margin bottom of 3. And then inside of here, we need the user's avatar. Let's go ahead and output that now by binding into the source the message user avatar.
01:28
We'll get rid of the alt for now, but probably a good idea to add that in as well. And then down here will be the actual message body. So let's again make this flex with items baseline. And we'll space this out with 2.
01:41
And then down here is going to be the body of the message. So let's just output message body. And this is going to be the user and the date and time. So let's make the user's name a font of bold.
01:55
We'll output message and user name. And then down here, we will create our span with the created at date. So message created at. And let's go ahead and make this a little bit smaller.
02:10
So let's set this to extra small. And we'll grade this out with text gray 600. OK, let's just wrap this so that sits nicely. And we should have these two things now next to each other.
02:25
Great. OK, let's just change up the avatar really quickly with a size of 12 and a rounded of large. And there we go. OK, so remember earlier when we created out all of our messages,
02:38
we set these to increment the message by the basically the index. So this is the last message that was inserted into the database. But this is at the top at the moment, which is a problem. If we scroll down, first of all, this isn't the latest message.
02:54
But also when we refresh the page, we aren't at the bottom of the text area. We want to be at the very bottom all the time. And we want the order of these to be flipped. What we can do with this is on the outer container, we can set this to flex.
03:09
But we can reverse the columns so we can say flex call reverse. Column is just going to position these rather than next to each other on a row. It's going to position them underneath each other. So by doing this, that's going to flip the order.
03:22
If we give this a refresh, you can see that a couple of things have happened. The order has been flipped, which is great. Now we get the latest message at the bottom. But also because of this, because we have this scrolling element,
03:36
it's going to go ahead and always push us to the bottom because that's the latest thing that we're seeing. So give that a refresh. We're already at the bottom.
03:44
We will always be at the bottom even as new messages roll in. But now they're in the correct order as well. And we can introduce a intersection observer just up here to push more messages in when we hit top of the scrollable div.
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!