Build a Realtime Chat with Laravel, Vue and Pinia
Playing
03. Scaffolding chat rooms

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 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.

Episode summary

In this episode, we start building out the foundation for our chat rooms feature. We kick things off by scaffolding a basic Room model, along with a migration to set up the database table. We keep the room model simple for now, just adding a title and a slug, which makes it easy to reference specific rooms via URLs.

Next up, we create the routing and controller logic to allow visiting individual rooms in the browser. We leverage route model binding with slugs so each room gets its own unique URL. There's also a quick walkthrough on creating a controller to handle displaying a room, and how to set up endpoints so users can navigate between different rooms.

On the frontend, we set up an Inertia.js page for an individual chat room, initially by copying over the dashboard layout as a starting point. We start customizing it, passing the room data (transformed nicely using an API resource for neat and secure JSON output) to the frontend. There's a helpful tip for removing the default data wrapper from API resource responses to make things more convenient on the frontend side.

Finally, we lay out the room's main interface with two main sections: one for online users and another for chat messages. We make use of CSS grid to organize these into a nice, spaced layout. The result is a basic but solid structure to build more features on top of—ready for us to start adding chat functionality in the episodes to come!

Episode discussion

No comments, yet. Be the first!