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
12. Storing and appending messages
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
Let's now look at storing a message.
00:02
So we know that when we created our chat text area earlier, we had this beyond valid, which means that the users entered some texts and hit enter less, they've pressed shift. What we can now do is go and call a function from here, update our store.
00:18
Once we have posted this down again with an Axios request. So let's go ahead and invoke a store message function in here and let's pass in a payload. So let's say the body, we don't need to pass in anything about the user
00:32
because they're already authenticated. And that's just going to be the event data we get back. So this is the payload we want to send out. So let's go ahead and create this store message function up here.
00:45
And that's going to take in a payload. And it's again, just console log this out just to make sure that looks good before we start sending that to an action. Okay.
00:56
Let's go and enter a message. Hello. And there we go. So that's the payload we want to send down to the backend.
01:03
Okay. So before we go ahead and call an action on our store, let's create out another endpoint to handle creating a message. So once again, let's create our controller for this and we'll
01:14
call this message store controller. Okay. So if we head over to message store controller, let's create out an invoke magic method in here.
01:23
We know that we're going to need a room in here. So let's add in our room. We're going to need to validate as well. So let's just make sure we add a note to do that.
01:32
And let's register a route out really quickly. So again, we'll, this is a little bit messy, but we'll just keep going with it. So let's add a post request through to messages within that room, swap that over to the message store controller.
01:44
And we will just get rid of the name. We don't really care about that just now. Okay. So let's go and post down to this.
01:53
So it's all good. And then we'll look at what we need to respond with inside of this message store controller. So once again, we're going to head over to our messages store and we
02:03
will create out another action in here. And this will be to store a message. And we know that into that, we're going to get the room ID or the room slug in this case, and we'll get the payload.
02:17
You could also keep the room slug or the entire room in your state, if you wanted to, and just reference it. Okay. Let's start to make a request, a post request down to that
02:26
end point that we've just created. So this will be rooms passing in the room slug and then messages. And then once this successfully works and we'll not forget to pass our payload in, then we'll get back a response, which will be the new message we've created,
02:44
which we can then push to our stack of messages for now, let's just console log on the response data and see what we get. Okay. So we can come back over to room now and now we can invoke this action.
02:56
So let's go to our messages store. Let's go to, what did we call that store message? And we want to pass down the room ID, props, room and slug. And we want to pass the payload in as well.
03:08
Okay. Let's go over and just try this out. Keeping up our network tab with FetchXHR filtered and let's see what happens. So let's say hello, hit enter.
03:18
And there we go. Great. We get this posted down. But of course we're not responding with anything just yet.
03:24
All right. So let's validate this really quickly. We can do this in line or as I tend to do create out a request for this. So we're going to create out a message store request.
03:34
We're going to switch over our request in here. It's a message store request that now becomes our extended request and over in our message store request. Let's authorize this because we're not working with any authorization rules.
03:48
And let's just update our rules here to say that the body is required and you can do anything else in here. So for example, you could set a max of a certain amount of characters. All right.
03:59
So that's validated. Now we just need to create the message. Super simple to do this because we've already got all of our relationships set up. So let's create out a message variable from the room.
04:10
Let's access the messages relationship and let's make this out and not persist it in the database using the data from our request, which is just going to be the body. Then we can go and take the message user and we can attach or associate the currently authenticated user with that message, and then we can persist it in the database.
04:32
Now let's just make sure we set our fillable stuff in here. So I'm actually going to set guarded to either false or just an array with the ID. And then here we can say message and save. Let's just check that this saves a message and then we'll look at the reactivity of this.
04:48
Okay. So once again, let's just get rid of this and let's say, hello, hit enter, and let's hop over to our database and make sure that got created and let's come all the way down. And yeah, it has been created.
04:59
Great. And of course, we're going to see that over here when we give that a refresh. Right. So the next thing that we need to return this message so we can actually show
05:08
it on the page as we go ahead and create it. So we've already got our message resource, so we can just use our message resource to make out the message that's just been saved and directly return it. So now over in our message store, we can take this and push it to our stack of messages.
05:29
Let's do that in here. And then we'll slightly adjust this when we look at real time so we can handle both. So we're going to override the messages once again with the new message first. Now this might seem a little bit weird because you'd think that we would put the
05:44
message on the end of the stack, but remember we're using flex to reverse this. So we need to push this in the correct order. So it's displayed correctly. And then we're just going to spread out the current messages that we have, and that
05:56
will now put that message inside of there. Now the message itself, which we just scaffolded is going to be the response and data, so we'll just push that in there. Okay.
06:06
Now that we've got this, we should see this roll in as we type something. So let's just type and hit enter. And there we go. Our new message is saved, returned, and pushed to our list of messages.
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!