Name: Build a Real Time Chat App With Node.js And Socket.io
Uploaded: 2020-03-28T16:47:40.000Z
Duration: 17 min 12 s
Description: Thousands of YouTube videos with English-Chinese subtitles! Now you can learn to understand native speakers, expand your vocabulary, and improve your pronunciation...

Adverbs of frequency

Don't you just hate people that are always on their phone all the time?

To-infinitive

We're creating a chat up in this video, and it's going to be absolutely amazing before we get started.

Here's the final product that we're going to be creating.

Let's say, for example, high on our screen.

It will say you said hi and on anyone else's screen is going to say that person's name and then the message.

Hi, We can send a message back and again you'll see it says You said high on the screen that sent it and everyone else's screen is going to say that person's name and then the message that they sent.

And to do this we're using a really amazing library called socket dot io, which allows you to use Web socket, which allow real time communication from the browser to the server as well as everybody else's browsers better connected to that server.

So let's get started creating this now to get started.

I just have a really basic index dot html page with a few really basic styles that give us the styles we see over here on the right.

I'm not gonna cover these styles directly because they're really basic.

And you should style this better than this application.

And the first night we want to do is set apart html because it's going to be the easiest part of the application.

As you can see, we want a container to put all of our messages as well as an input box and ascend button for information.

We're gonna credit if which is going to have an I d here, which is going to just be message container.

We'll build a reference this later in our JavaScript, and all of our messages that gets sent are going to be added inside this div using JavaScript.

Next, we're going to have the form that submits to our server.

We're going to give this here and I d of send container and then inside of that word is going to have an input which is going to be our text field.

So we'll give it a type here equal to text.

And then after that, we're going to give this an I D.

Of message input and this is just so we can again access this in our JavaScript and actually get the value from the input that we type in here.

And then finally, we need to submit button.

So we're gonna have a button which is going to the have the type of submit, and we're also going to give it here an I d of send button and lastly, inside of here, we're gonna put the text send, and there we go.

And if we refresh these pages over here after we clear the goat life button, we should see that we just have a blank html page here with our container as well as our input on both of these pages that we can use.

And when we click, send obvious little cement information.

Now, in order to make this a real time chat app, we need to install a few dependencies, so get started.

We want to just do n p m in it, and this is going to set up our file our project to be using and PM There we go and then we want to do is we want to install some dependencies so we're going to first install socket, not Io.

This is going to be our real time Web socket communication.

And then we're going to install node mon so we can do N p m I and this one.

Spell that quickly and we type out note money and Newman is going to allow our server to automatically refresh itself every time we make a change.

So we don't have to cancel our server and restart our surgery now instead of our package dot Jason, As soon as that finishes up, we can actually create a script here that we're going to use to start our server.

No Goodman and we want to run it on our server file.

So called server dot Js is going to be our server file name Now what?

Let's actually create that server dot Js And there we go.

Run, Dev start, that's gonna run node mont honor service Js file.

Oh, so we're gonna say constant Io is going to be equal to require socket dot io and in order to actually credits over, all we do is pass the port that we want to serve it to run on to this socket I will require as a function.

And this is going to create a server for us on that port 3000.

Then what we can do is we can just use our io.

We can say I owe dawn connection on what this is going to do is every time a user loads up our website, it's going to call this function, and it's going to give each one of these users their own socket.

And what we can do with this socket is send a message down to the user so we can just say socket dot Aim it and we can put whatever we want inside of this.

We're just going to call this chat message and then we passed the parameters or data that we want And this data could be whatever you want it to be on our case, we're just gonna make it a string Hold Hello, world.

So now every time someone connects to our server, we're sending a message down to the client with this event chat message, and it's going to say hello world inside of it.

We need to have this function inside of here.

So just move that princey around their correct voice.

Save it and everything will be deep green down here.

And now let's create a separate file here, which is going to be script dot Js.

This is going to be where all of our client's side javascript is going to go.

And the nice thing about using socket Io in this way where we set it up on Port 3000 and we have our server being run on Port 5500 for our client is that our client and server are completely separated from each other, and we don't have to worry about them being inner mingled together.

You could host them to different places if you really wanted to, and they would still be able to communicate just fine.

So what we need to do inside of this script dot Js is we need to get the socket variable and do that.

We want to set that equal to Io and the location of where we're hosting our socket.

And this is just going to be at http colon Backslash backslash loco host 3000.

And this is where our server is hosting our soccer Js application.

Next, What we want to do is we want to say socket dot on and remember used our message of chat message.

So whenever we receive an event, we want to call a function inside of here with the data that we sent down from the server.

And we're just gonna for now, Consul, about long that information as data and again, this is going to be hello world because that's what we have instead of our service Js here next inside of her index at h T mo.

So first we're going to require a script for Socket I owe.

We wanted to for this, And the source is just going to be set to http.

Because this is where our socket io is working.

And with our library socket, I Oh, it's going to expose path called socket dot io, and it's going to have a file in there called socket dot io slash or sorry dot Js And this is going to be the Java script file that includes this right here.

We want to just include the script that we created so we can do another script tag.

Defer this and we're gonna set this source equal to script dot Js Just like that.

And now if we inspect one of these pages over here, you'll see we get that hello world message showing up in our council.

And that's because when we connected, our server went inside of the socket here.

Save that and now you can see as soon as we connect, we get this new user message and then it's sending hello World down to our client.

We're receiving that inside of our socket dot on and then logging, not in the council.

And the reason we're getting to New Year's or messages just cause we have two windows up.

And so both of these users are connecting in the same exact time.

Now it's closed out of that and actually work on making this a chat application where the users can communicate back and forth now on the client.

What we want to do is we want to get our message form.

Subtitles ListPlay Video

Build a Real Time Chat App With Node.js And Socket.io

constant

script

admit

function