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
12. Storing and appending messages

Episodes

0%
Your progress
  • Total: 1h 41m
  • Played: 0m
  • Remaining: 1h 41m
Join or sign in to track your progress

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.

Episode summary

In this episode, we roll up our sleeves and dig into actually storing chat messages! We start by wiring up our chat input so that when a user submits a message, we gather up the message body and send it to a new function. At first, we just console.log things to make sure our data looks good, then we move on to creating the API endpoint and controller that will actually save the message on the backend.

After setting up the backend route and controller, we validate the incoming message (think: making sure it's not empty and maybe limiting its length), and then persist it to the database—linking it to the current user and chat room. We also touch on best practices for fillable fields in our models. Once everything looks good on the backend, we tweak the frontend store action to post the new message and—when it comes back successfully—push it onto our messages array so it appears instantly in the chat.

Oh, and we cover why new messages might actually go at the beginning of the array, since our message list uses CSS flex-reverse. By the end of the episode, submitting a message will save it in the database and show it up right away in the chat window. Next stop: handling this in real time!

Episode discussion

No comments, yet. Be the first!