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
07. Creating the messages endpoint
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
Okay. So let's go ahead and create our controller, which is going to work as an endpoint to show us all of our messages. Let's go ahead and call this message index controller.
00:09
And let's register this as a route first of all. So if we come over again, we can grab all of this stuff here. We're not going to specifically add this as an API endpoint because it's working without routes, but we're going to go and say messages for that
00:23
room and let's swap that over to the message index controller, and again, we'll make sure that we're authenticated and verified to do that. And we can just change the name of this, although we're not going to be referencing it by name.
00:36
Okay. So over in our message index controller, let's create out an invoke method here and into here, we'll get our room. So we can start to extract out all of our messages.
00:46
We don't have a relationship on our room just yet. So let's head over to the model and create out a really simple has many relationship here to grab the messages. So let's return.
00:55
This has many, and of course we're going to choose our message model. Okay. So now once again, we're going to create out an API resource for each of our messages so we can see these.
01:07
So let's go and create that out now and get some data rendered and returned. So we'll make a resource here. Let's call that message resource. And we will head over to that message resource and start to figure out
01:19
the kind of data we want to return. So let's just keep this really simple for now. And then we'll add the user in here as well. So again, we're going to output an ID because we're going to need to provide
01:29
some unique thing in view when we're rendering through let's out, put the body of this as well, so let's just say this body and let's just leave it at that for now and then we'll come back to it. So in here, we're going to return a message resource, and this is now
01:44
going to be a collection because we're going to have multiple messages for this room. So let's access from the room, the messages. We want to grab the latest messages and we want to paginate these by 100. Remember what we're going to do is show the first 100 and then access this
02:01
endpoint again to push any previous messages that we have. Okay. Let's go and just see this in the browser. So let's go over to slash messages and get rid of the page there.
02:12
And there we go. We've got a bunch of messages in here. Okay. So let's add the user to this.
02:17
So we don't have a relationship for that just yet. So let's go over to our message model and create our, a user relationship in here. And we know that this belongs to a user. So again, a really simple relationship, and then we can just start
02:34
to add this to our message resource. So for our user, again, we want an API resource for this. We don't want to just dump the user details out or it's going to show us too much about this.
02:44
So let's create out a user resource or a public user resource. Cause we know that this is going to be public data and let's create that out now. So public user resource. And in here we can just say public user resource make, and we can pass the
03:00
entire model back from that relationship. The public user resource, at least for now, just going to return the ID of the user, although we don't necessarily need that and their name as well. And we'll add an avatar in just a second.
03:15
So let's grab their name and there we go. Great. So with this, let's output a created update as well. And we should have all of the data that we need, and then we'll
03:26
make sure we egoload this as well. Okay. Let's go ahead and pretty print this. And there we go.
03:31
We've pretty much got everything we need. The body of the message, the user who posted it and when it was posted, which we're going to be updating a little bit later now at the moment, I'm not going to go ahead and install PHP debug bar because we know that for each of these
03:43
messages, we want to egoload the user. So let's go over to our message index controller and just make sure we are pulling in with user. And that's going to go ahead and egoload them and be much faster and
03:56
not to create an N plus one problem. One other thing that you can do over your resource here is you can say this when loaded, so we can say when loaded user, and that will prevent you from showing this data if you haven't egoloaded this.
04:11
If we head back over, you can see that this works and shows us how user, but within an API resource, as soon as we don't load this in, it's just going to completely ignore that value. So if we give that a refresh now, you can see it doesn't exist
04:23
until we go ahead and egoload it. It's a really handy trick to do if you really want to make sure you're egoloading. Okay. We've got all of our data.
04:32
Let's just really quickly add in an avatar. So if we head over to our user model, let's create out an avatar helper in here to just return a really simple avatar, and then we'll be good to go. I'll go ahead and pull this over from my notes here.
04:45
It's just using the UI avatars API to grab the user's name and then show something in there. We don't really need to worry too much about this, but let's go ahead and add it to our public user resource.
04:57
So let's output the avatar using that new method we've created. And let's head over one last time. And there we go. We've got all of the data we need to start rendering out 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!