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
05. Seeding fake messages in order
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
If you cast your mind back to the introduction
00:01
where we looked at scrolling up and loading all previous messages, so we didn't push too much to the page at once, we're going to need to be able to generate a bunch of messages
00:11
out so we can test this functionality. So we're going to go ahead and get our model set up, but then create a seeder to do this. But we need to do this in a very specific order,
00:20
so all of our messages are, say, an hour or a minute apart. Let's start out with the model. So we'll go ahead and make out a model for our message. We'll create a migration and definitely create a factory
00:33
alongside of this as well. Now, let's fill in the details about the messages. We need these to be associated with a room, and we need these to be associated with a user.
00:43
So let's add in a foreign ID here for both. So the room ID here, which we'll constrain, and we'll just do the same thing here for the user ID as well.
00:53
The only thing that we're going to be adding here is a body. So we just want some text here with a body, and that's pretty much it. So let's go ahead and migrate our changes, and we are good.
01:04
Okay, so the factory itself, if we open this up, message factory, we're not actually going to touch. We've got a factory enabled for this model now.
01:13
You can fill in data here if you want to, but I'm going to go ahead and do this manually within a seeder for a very good reason. So we need to create out a seeder for this.
01:22
We could have done that on the command line at the same time, but let's make a seeder called message seeder. Okay, so that lives within our seeders directory.
01:30
Let's open the message seeder up, and let's just start to generate out a bunch of messages. The basics for this is just grabbing the model, grabbing the factory,
01:40
and then choosing how many times we want this to run. So I'm just going to choose 5,000 here, and then we go ahead and create this out. Let's go ahead and actually implement this entire thing.
01:51
So when we create this, we can pass in a bunch of data that we want to fill in. So I'm just going to choose the user ID of one and the room ID of one.
02:03
That will work now when we see this, as long as we set a body. But what I want to do is go ahead and add in a sequence. What this will mean is for every single run
02:13
of this message that's being created, so for every single message we create, we can slightly modify the data. So into this, we pass in a closure,
02:23
and then into this closure, we get a sequence model. So let's go ahead and grab that sequence. And then in here, we just overwrite any of the data that we want.
02:34
We can use the sequence index to do that. So for example, for the body, we could say message, and then we can concatenate on the sequence index, and we can add one to that
02:49
if we want it to be a little bit more realistic. But at least now we know what each of the messages is. So when we do implement that functionality later, it's going to work nicely.
02:59
We also want to change around the created at date because otherwise all of these are just going to be created with the same date and time. So what I'm going to do is grab the current carbon timestamp
03:08
with now, the now helper. I'm going to sub a year because we don't want when we increment the time for it to run over into the future.
03:17
So we're going to sub out a year. And then we're just going to add an hour based on that sequence. So we'll just grab the sequence index.
03:26
And that's the first message that gets created is not going to add an hour on because the sequence index will just be zero. But then as this increments,
03:34
we'll add one hour, two hours, so on and so forth. Okay, so now that we've done this, let's go ahead and run our Cedar and see what happens. And we shouldn't see that issue we saw before.
03:44
Okay, great. So that's going to take a little while, but now when we head over to the database, let's check out what we have in our messages.
03:51
You can see that for each of these messages, the hour increments, and we could have done this by minute as well. It doesn't really matter.
03:57
And we get a fresh one every hour, which is great. So now when we list these, we know that we can order them because we have a sequential incrementing date and time.
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!