Playing
03. Scaffolding chat rooms
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 go ahead and scaffold out some basic rooms that we can visit in the browser and see a slightly different layout to the one that we've got here.
00:07
Then we'll build up each of the components as we go. OK, so if we head over to our editor, the first thing we want to do is make out a model for these rooms. So let's create out a room with a migration,
00:19
potentially a factory if we want to auto generate that. Now that we've done that, let's go over to the create rooms table and just keep this really simple. So I'm going to go ahead and add in a name for this or a title.
00:32
Go ahead and call it title. And let's add in a slug as well and make this unique that we can use in the roots. That's pretty much it for now. But obviously, feel free to add more if you need to.
00:44
OK, let's go ahead and migrate our changes. And now we're going to create our route, which pretty much matches our dashboard. So let's head over to our web routes and find our dashboard route here. We're going to go ahead and create a controller for this
00:57
so we can copy everything down here. Let's go ahead and provide out the URL here. That's going to be room and room, which we use root model binding, but we'll put in our slug as well.
01:09
And then we're going to go ahead and swap this out for a controller. So let's create that controller out really quickly. We'll say make controller and let's say room show controller. OK, great.
01:20
So let's swap out this for room show controller and we'll go ahead and apply the same middleware here and we can give this a name. So let's just say room show. We probably won't reference that unless we build an index.
01:33
OK, so over in our room show controller, let's bring in an invoke magic method and let's pull in our room directly into here that we'll get with root model binding. We'll just give that a die dump just to make sure we see it. OK, so we're going to create out a room called inertia, first of all.
01:49
So let's head over to there and let's swap around the URL really quickly to say rooms. There we go. And yeah, of course, we got a 404 not found because this isn't created out in the database. So let's just manually do that.
02:04
So let's create out an inertia room. We'll give inertia as the slug and let's just prefill created and updated at date. And there we go. OK, when we head over now, great.
02:16
We've got our room. OK, so we are going to once again do pretty much the same thing here, but we're going to render out a view for our rooms. So let's go.
02:27
And I prefer to use the inertia helper here, render out a room template. Now, if you're fairly new to inertia, these live under resources, JS and pages. I'm not going to bother categorizing these, but you can put them inside of directories if you want. So let's just create out a view component here called room.
02:45
And we're actually going to go ahead and copy over the dashboard. And I'll talk to you a little bit about this as well if you are new. So let's grab all of this code here, paste it directly over to room. It's exactly the same thing, but this contains an authenticated layout.
03:01
This is just wrapped here with a slot for the header and the body just goes down here. So let's go over to our room show controller, make sure we're actually returning this. And once we head over to the browser, we should see exactly the same layout. Great.
03:16
OK, so let's pass the room down and then just start to output some details about this. And what we're not going to do is just pass the entire model down. Instead, we're going to use an API resource for this so we can structure the data in a much better way. This is going to be really useful when we work with real time,
03:32
because when we send data through our real time server later, we don't want to send too much. So we'll be creating API resources for the benefit of inertia pages, but also for our real time stuff. So let's start out with making out a resource and we're going to call this room resource. Now to use this, all we need to do is specify the room resource in here,
03:56
make it out and pass in the model that we want to transform. If we head over to our room resource, we just want to return an array here with all of the data that we need. So typically we'd always output an ID. So let's reference this, which is now referencing that model and ID.
04:12
Let's output the title in here. This title. We're also going to need the slug as well, because any subsequent requests we make, we're going to need the slug. And to be honest, that's pretty much it for now.
04:23
So now that we've passed this down, what we can do over in our room is accept this in as a prop. Let's go ahead and use define props in view and let's accept that room in, which is now going to be an object. And I'm just going to dump this on the page somewhere. So let's just dump this inside of here so we can see what the data looks like.
04:43
Okay, there we go. We've got all of that data. Now, when we work with API resources, by default, these are wrapped in this data property. We want to change this over.
04:51
So if we head over to our app service provider under our providers, under the boot method, let's use the JSON resource class to say without wrapping. What that will do is it will get rid of that data and it just makes it a little bit more convenient to work with. Okay, next goal is just to replace out this dashboard title.
05:08
So if we come over to our room here, over in dashboard, we can just output room.title now, and that's going to change this over depending on the room that we're in. Okay, so we're getting the data path down to here. What we're now going to do is just scaffold out a basic layout here for all of our stuff. So I'm going to grab all of this template here and move it over.
05:30
This is going to be the users online section. This is going to be our messages section where we also have our text area. Now, this doesn't look great at the moment. So what we can do is we can apply a grid to this and we can say grid cols 12, for example.
05:46
What we can then do is go ahead and set the colspan to three for the users online. And let's set the colspan to nine to make up 12 for the other section. And that will give us something like this. And we want this spaced out a little bit with a gap.
06:01
So let's set a gap of six. And that's just going to space these out nicely. And now we have two sections here. Obviously, this one for the messages and this one for the users online.
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!