Build a Multi-room Realtime Chat with Livewire and Reverb
Playing
03. Creating chat rooms

Episodes

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

Transcript

00:00
Let's go ahead and create out our room functionality so we can access any of the chat rooms that we're going to have. So, of course, we'll go ahead and start out with a model. Let's create a model called Room and create a migration alongside of this. Let's go ahead and open up this and we'll just keep this really simple for now and choose a string for the name of the room.
00:22
Let's duplicate that down and also provide in a slug and make that unique. So we have something a little bit nicer for URLs. OK, so before we go ahead and register the route, let's create out a full page live by a component for this page. So we'll go ahead and use live wire make and let's create out a room show component.
00:44
We'll put this inside of a chat directory, but also put this in a pages directory. So we know it's a page and we keep things nice and neat and tidy. OK, so we've got our component. Let's register this route out.
00:55
We'll head over to our web routes and just create this anywhere within our routes file. So we want to go over to chat and then use route model binding to pull this room out by its slug. And we can reference that room show component directly to render out that component. Let's also add some middleware in here because we know that we need to be authenticated to access this.
01:20
And of course, you can also add verified if you want. OK, let's run our migration. So we actually get that table in there and let's head over to the database and create out an example room. So let's just call this Laravel.
01:33
It doesn't really matter what we choose here and we'll go over to the browser and see this. OK, so let's go over to chat slash and Laravel. Now, at the moment, of course, it's not going to work because our full page live by a component needs a layout. So let's get to work on that component.
01:52
So if we go over to room show, let's go down here under the render method and we'll add in an attribute to point to the layout that we want to use. Now, we already have an app layout within the Breeze starter kit. So let's just choose that for now. OK, if we head back over and give that refresh, sure enough, we are now inside of this page and it's working nicely.
02:16
Now, what we're going to do is take the dashboard template that we've already seen and pretty much just copy it over to the room show blade file within our component. Now, we don't want to do this with the app layout, otherwise we're going to end up with a duplicate here. So really what we just want to do is get rid of this main layout here. We can keep the header, but we can just change around the content.
02:39
So now you can see we pretty much just have a duplication of our dashboard. So let's change the title of this to the actual room name. So over in room show, we want to make sure we pull out that room. And that will be automatically assigned with root model binding, and then we have it available in our template.
03:01
So in here we can just output room name and we should see that up here. Great. OK, let's figure out some of the layout stuff around this, because we want to use a section on the left. Hand side. And then we want to have the main section on the right hand side. That's not going to quite work at the moment.
03:21
So let's just add in some styles to get this working. Let's make this overall container a grid and we'll set the grid columns to 12 and we'll set a gap of six. What that means is for the individual things inside of here. So this is going to be the user section.
03:39
And why don't we just put users? And chat in there so we know which one's which, we can just set the call span. So let's set this to three and then for this one, let's set the call span to make up 12. Obviously, that's going to be nine.
03:55
So now when we come over, you can see that we've got a nice chat area on the right hand side and the user section on the left hand side. OK, we're not going to build out an index for all of our rooms, but that's just a case of grabbing all of the rooms, listing through them and linking through to them if you want to. We can now access a room. Let's move on to talk about the text area and how we're going to make this work nicely for a chat experience.

Episode summary

In this episode, we're setting up the foundation for chat rooms! We start by creating a simple Room model and migration, giving each room a name and a unique slug for cleaner URLs. Next, we generate a Livewire page component (RoomShow) to display individual chat rooms, organizing it within a chat/pages directory to keep things tidy.

We wire up a route in web.php that uses Laravel's route model binding so we can access rooms via their slug (like /chat/laravel). We secure this route with authentication middleware, and you can throw in email verification, too, if you’d like.

After running the migration and adding an example room in the database, we connect the page component to the layout provided by Breeze. We then copy over the dashboard template so we don't have to reinvent the wheel, tweak a few things like the room title, and hook up everything so the correct room data displays.

To finish up, we start fleshing out the layout: a grid with a left section reserved for users and the main right section for the chat. We use Tailwind utilities to set their sizes. Finally, while we’re not diving into displaying a list of all chat rooms just yet, that’s easily doable if you want to experiment. By the end, we’ve got access to individual chat rooms, and in the next part, we’ll tackle the chat text area to make the messaging experience smoother.

Episode discussion

No comments, yet. Be the first!