Name: 用Node.js和Socket.io構建實時聊天室。 (Build Real Time Chat Rooms With Node.js And Socket.io)
Uploaded: 2021-01-14T10:25:00.000Z
Duration: 24 min 25 s
Description: 【看影片學英語】數萬部 YouTube 影片，搭配英漢字典即點即查，輕鬆掌握單字發音與用法，長久累積看電影不必再看字幕。

現在進行式

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

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.

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.

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.

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

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.

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.

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.

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.

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.

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.

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.

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

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.

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.

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.

字幕列表影片播放

用Node.js和Socket.io構建實時聊天室。 (Build Real Time Chat Rooms With Node.js And Socket.io)

specific

essentially

access

properly