Playing
13. Setting up rooms

Transcript

00:00
Presence channels work in exactly the same way as private channels, but they have an additional benefit. They allow you to expose who is currently in that channel and any details about them.
00:11
Now, of course, we're going to go with the classic example of having a chat room where we can see who is currently online. We won't be building out the full chat because we have other courses that cover that, but we'll see how to do this now.
00:25
OK, before we get started, let's go ahead and do a little bit of setup in our application to get the interface working. So we're going to go and make out a model and we will call this room. So we'll have multiple rooms that we can join and we'll be able to see who is in what room.
00:42
Now that we've done that, let's go ahead and just create out a really quick migration in here. And to be honest, we don't really need much data in here at all. We could just give this a room name. So let's say string name and we should be good.
00:57
Before we migrate this, let's head over to the room factory and let's just randomly generate our name inside of this factory. So let's say fake and we'll say unique and finish that off with generating our fake word. OK, let's go and run our migrations and let's go ahead and get some data into the database.
01:17
So we'll run PHP artisan and tinker and let's use that room model app models and room. Grab the factory and let's create out two different rooms that we can experiment with. OK, so now that we've done that, let's build up a really simple interface. So over to our web routes, let's go and create out a route for these rooms.
01:42
So let's say room slash and then we'll grab the room by its ID. We'll, of course, get the room through into here, which will pass down to a room view. And let's pass that down into there. And we also want this to be authenticated.
01:59
So let's just grab the middleware and everything else from here. And we'll just give this a name of room. OK, so let's do exactly the same thing as we did in the last section. We'll grab our dashboard template.
02:10
We'll head over to the room view, which we haven't created just yet. So let's make out a view in here called room. Let's open that room template up and paste this in. And then here we want to output the room name.
02:26
And then down here, we'll show a list of connected users. OK, let's go over and have a look. So we don't really need to be on our dashboard. Let's go to room one.
02:36
There it is. And room two. There it is. Great.
02:40
So everything is set up now and we can start to look at within this, having users connect to this channel and then look at all of the events that we need to push to the list of users who are currently on this page. Let's get started.

Episode summary

In this episode, we're starting to set up the concept of rooms in our app—think something like channels in a chat application. We introduce presence channels, which are like private channels but with the extra feature of showing you who else is currently connected.

We don't go all the way into building a chat here (that would be a whole different course!), but we do set up the structure so we can see people come and go in different rooms. The walkthrough includes creating a simple Room model and database migration, giving each room just a name for now. Then, we quickly generate a couple of rooms using the factory and pop them into the database.

Next, we whip up some routes and views, so you can head to /room/1 or /room/2 and actually see each room in the browser—super simple for now. In the views, we get ready to show the room name and a list of connected users, which will come to life in the next steps.

By the end of this episode, we have all the basic groundwork and templates ready to start tracking who is in each room. From here, we're all set to start adding the real-time user presence features!

Episode discussion

No comments, yet. Be the first!