In today's video, we're going to be going back the real time chat application and adding in chat rooms.

Support to it.

So let's get started now.

First, let's do a quick demo vote we're going to create.

As you can see, we have the ability to create a new room in our case, what is?

Call it new, and when we create that, you see it pops up over on the other screen immediately without having to refresh, which was typing a user name here and now we can join that room, type in another name, and you can see that we can send messages back and forth between each other in that room.

But if we, for example, when I created a new room and we typed in the name and tried to send a message, you'll see that doesn't get sent to the other room.

And all of our rooms are distinctly unique from each other, and they don't get messages from the other rooms to get started.

I have our project from the previous video, which, if you haven't already seen, make sure to check out the cards and the description for a link to that.

But essentially what we've done in this video is we can open up our project using live server and we can run a command and PM run Dev start and we're gonna start up our server as well as the start of our application, and we can send some messages back and forth.

We could say what our name is, for example, and send messages back and forth that way, but we need to do in order to set up a room.

Support is we actually need to convert our entire application to using express and everything will run to the console when we started our server and we have no need for a life server.

So to do that, what's close out of our consul here and we need to run a command and P m i in order to install our dependencies.

And we need to insult Express as well as E J s, which will be the temple waiting language that we use.

Express is going to allow us to make our server set up really easy, and e j s will allow us to embed service side code into our templates.

Now that's done being installed.

What's open up our server dot Js file and configure this to use express.

The first thing we need to do is we actually to require express, so we'll just come appear Credit variable called Express.

We could just type in, require express.

And what we want to do is we actually want to get our server set up from that.

So we first created very bold words we're gonna call APP and we're gonna set that equal to express just as a function.

And that's going to be the app for our server.

And then to get our server, which we need to pass into here, we need to create a variable called server to pass to our soccer IO connection.

We'll just create that variable server and we'll just require http which is the basic library from Know Js for doing http, we can call the server function on it for the class and passage in our application here from Express.

This will give us a server that can communicate with socket io and allow us to do all these io dot on connection things down here.

The next thing we need to do is actually set up our express server.

So we want to come in here and type in ap dot set and we want to set where our views were going to be coming from and our views were just going to come from a folder which is just going to be called views.

And we can create that folder now, so type interviews, and we want to move our index dot html into here.

But instead of it being an HTML file, we actually need this to be in e Js file.

So what's just changed the extension here, T.

J.

S because we're using E.

J s as our template language.

Now, let's go back to our server, and we actually need to tell it to use E.

J s.

So we'll say apt upset again.

We want to set our view engine, and this will tell it what to use.

Two parts are views, and in our case, that's going to be E.

J s, which we installed within PM.

Lastly, we need to set up a few more things, so we need to set up a public folder, which is where our job script is gonna go.

So we can say express dot static and we just type in the name of where Public Folder is going to be.

In our case, it's just going to be called public, so we could just type that in, and this is going to be where all of our JavaScript goes.

So let's create that folder now call public and we'll drag in our script.

Ah, jazz, which is our JavaScript for the client side.

And then lastly, we want to build to accept your rope parameters.

So what was going to do here again?

App that use, We want typing express euro encoded on.

We need to pass it in here and options object which is going to have extended set to true.

And this is going to allow our application to use euro encoded parameters instead of a body for a form.

Now, with the very basics of our server set up, let's create the routes that we're going to use first.

We're just going to have a simple route here, which is a get route on the index path is going to take a function here with a request as well as a response.

This is going to very simply, just render index page.

So we'll just say reds, which is our response that render we want to render our index page.

And in here we're going to pass it all the different rooms we have.

So we'll just say rooms is going to be equal to rooms.

This is going to pass down to our view, to be able to be used there.

So it's actually created variable, or they're gonna call it rooms and initialize it to an empty object.

Since at the beginning, we want our application to have zero rooms to find and then we need to create another out.

This is again we're going to be a get route and this is going to be forgetting a room.

So we wanna have slash here and then room.

And this is going to be a parameter that gets passed in the euro.

As you can see here we have the room name in our bureau, and that's what this is defined as.

Everything that is a room name will be passed here in any route that is a slash, followed by any name will go to this route and again, this is going to take a response and a request variable inside of our You are over out here and what we want to do in here is we just want to render another index page.

But this time, instead of index, it's going to be called Room.

So we're going to render a page called Room and in here we want to pass our room name, which is going to be inside of an object.

So we'll say room name.

And this is going to be equal to our request dot programs dot room.

And this corresponds to our room variable that we defined in our route here.

Now it's actually create that file.

We're just gonna call it room dot t j s and we're not gonna touch that for now.

So now if we save her application and actually run it using MPM Run, Deb, start.

Let's start over here.

Close that bet.

And we just want to make sure this is Port 3000 and we run.

That will see that we are getting an error saying that a page cannot be reached, and that is because we actually need to tell our server toe.

Listen on the correct port So we have our server variable here.

So all the way down here, Pushers say hopes server dot Listen, we wanna listen on Port 3000.

Now, we can save that.

Refresh our page over here, and you see, our application loads up justice before and if we type in a name, everything works is before, you know, before we get diving too far into our actual server code, let's work on creating the index page of our application because we want this to render our rooms and not our actual application here.

So we can actually change this file here.

To be our room file on our new room file is going to be our index file.

So let's do that real quick.

Will rename our Index Don t.

J s to be room dot you Jess and will create a new file, which is going to be index dot e.

J s.

And this is going to be all over index code.

We can copy over most of this document code, so it's copy that over, Take our head, which is going to be closing out her head and then we want to open up the body which is the actual content of her application.

Make sure remember to close that out and remember to close out our HTML tag and were mostly copying this over so that we get the same scripts of being brought over into our application Now, inside of the body is going to be really straightforward.

We first, they're gonna have the diff here, which we're gonna call an I D.

Of room container.

And this is where the list of all of our different rooms air gonna go.

And if you remember inside of our survey here, we passed in this room's variable to our application, which is an object.

And the key of this object is going to be the name of our rooms.

So, for example, we're going to have a name here which should be the name.

And then we're gonna have an object here for each one of them.

So we'll have, like, room name.

And if we had another room name, name to it would look like this.

So we just need to get the keys of our different objects are going to be the different rooms we want to display.

So what's actually leave a room in there so we can actually test what this will look like when we render our page.

Now back in our index here, we want to look through those.

So to get the keys of an object, all we needed to do is called object dot keys method and we're gonna pass it in that variable, which in our case, is rooms.

Then we looked through them using it for each.

We're going to get a single room for each one of these, and inside of that for each one of our rooms.

We just want to render a diff which is going to be having the text of our room in here so we can say a room, close that off and make sure to close off the actual div.

And then we need a link that's going to allow us to enter that room.

In our case, we're just gonna use an anchor tag has an eight ref here, which is going to be slash followed by our room.

So in our case again, we're just gonna have room being deployed here just like that.

And we want the text for this to say join so close off that anchor tag, and we got to make sure that we close off her actual function here, too.

So just like this, we're going to add in that bracket.

There we go.

That's actually closing off our loop.

Now that's all the code to rent our rooms.

But save that refresher application.

And as you can see right here, we're getting the name of the room as well as the joint button, which redirects us to the route with name in it.

We're getting an error here.

That's just because we haven't properly implemented this route yet, which is perfectly fine.

Now we can go back on.

What we want to do is we want to create a form here which is going to allow us to create new rooms.

So let's do that really quick.

We want to use a form tag.

We need the action, which is going to be where our form is going to round two.

And our case is just going to be a slash room and we also need a method because this is going to be a post method since we want to create something and post is the way to create things with http, Close off that form.

Inside of this form, it's gonna be really simple.

We're just gonna have a single input which is going to have a name of room and we're gonna be able to access this input variable on our form are on our server.

By using this name here of room, you'll see that it's a little bit and we also want to make sure the type of this is equal the text since it's just a text input and lastly, we're gonna make it required so that it's required by the actual HTML to be submitted before we can submit our form.

Now it's created button here where you're going to have a type of submit so we can submit our form and we're just gonna get the text of new room and lastly, close off that button.

And now when we save that and refresh over here, you can see that we get that section and we'll free type in here and hit new room.

It's going to bring us to our new room route, which we haven't created yet.

So inside of our server was due that we want to do an app dot post senses the post route, and it's gonna be posted a slash room.

As you can see here and again, this is going to take the same parameters request and response as a function.

And inside here, all we need to do is actually at our room to this room's variable.

In order to do that is really straightforward.

We just access our room is variable and we just say request dot body dot room and this dot room is the name of this variable.

As you can see here, we set the name to room.

So we access that with request stop body and in the name room, that was we just want to set that equal here to a new object.

And our case, our object is just going to have a user's variable, which we're going to default, to know users to being with so just an empty object of users And what the thing that we want to do as we want to redirect the user to that new room.

So we're just going to say response dot redirect and we want to redirect into that room name, which in our case, is response.

Stop body in that room again.

And lastly, we're going to eventually not right now, but we're eventually going to want to submit this down to our socket.

So we're gonna just say, send message that new room was created and this is going to be so that our page on the other person's browser, for example, this user here, it'll automatically add that room to their page whenever a new broom is created.

But we'll do that later when we work on handling our room integration.

And one other thing we want to do as you want to check to make sure this room doesn't already exist because otherwise will override a room if it has the same name.

So let's do a simple check here and just say rooms of request that body dot room.