Well, too bad for you.

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.

We could go down here.

We can send a message.

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.

So let's do that.

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.

That's how the HTML we need.

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.

We want to be a deaf dependency.

So you make sure you put save Dev.

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.

And what, you gonna call this?

A Deb start.

And all we want to do is run.

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?

That Out of the way.

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

And now if we run in P m.

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

And as you can see, that work just fine.

Now to create our server using socket.

I was actually really easy.

We could just include our soccer die.

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.

This is going to be the event name.

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.

And now you notice we have an error.

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.

They're completely separate entities.

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 could just say constant socket.

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.

This is our event name.

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.

We actually to require these scripts.

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

So we can just say script here.

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

Backslash backslash again.

Local host 3000.

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.

This Iot function.

Next.

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.

Close that off.

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.

We could even just log inside of here.

Whoops, counsel dot Log.

We just want to say new user.

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.

So essentially, every time we send a message, we want to send that to the server instead of sending it through the form here.

So let's get a variable, which is going to be our form.

We're gonna call this message form.

This is going to be equal to document hopes document get element by i.

D.

And we gave that a d here of send container.

So this right here message form is going to be our form and then we want to add an event listener to that so well said message form not add event listener and it's just going to be whenever we submit our form.

What we want to do is we want to stop our form some of submitting.

So to do that, we can just say ee dot prevent default is going to stop our page from actually posting to our server, which is also going to stop it from refreshing over here.

And if we say that in click send, you'll see our page does not actually refresh, which is perfect.

If we didn't do this, we would lose all of our chat messages, which we do not want next.

After that, we want to actually get our message.

So we want our message is going to be equal to hear.

First, we need to get our message element.

So we're just going to say up here, we're gonna get our message input, which is equal to document hopes Document that get element by I.

D.

Is going to have an I d.

Of message input.

Now that we have that message element, we could take that message element.

Sorry.

Input on what we want to do is just get the value from there and then we actually want to send that value to the server so we could just say socket close value, socket dot admit and admit is going to just send information from the client to the server and I'm going to do is given an event name.

So we're gonna call this send chat message, and then what we want to do is send it that message, which is just the value here.

And then the last thing we want to do is just take our message input, and we want to set the value of that message input equal to a blank string just so it empties out the message every time we send it.

Now, if we types underling here click send, it's going to clear it out and send it to our server.

But our servers actually not handling this yet, So we need to set up our handling for that event in order to do that.

It's really straightforward.

All we have to do inside of here is we just say socket dot on just like we did on the client.

And we say the event, which in our case is send chat message and then it's going to get that data that we sent with it, which in our case, is just the message itself.

And now inside of here.

What we want to do is whatever we want.

So we'll just logged this for now to show that it's actually working.

We're gonna log the message, remove this other long, and if we save that and we send a message of Hello, click send.

You'll see that shows up in a consul down here because we're actually receiving that on our server.

But what if we want to send that down to the other client?

Well, that's really easy to do.

Always say is socket dot admit.

I'm sorry dot broadcast dot Aim it.

And this is going to send that message toe every single other person connected to the server except for the person that sent the message So it won't send it back to our original user, but it'll send it to all the other users, which is ideally what we want.

And inside of here, we could just send chat message on Beacon.

Send down that message, must remove this initial innit?

And instead of here, we're going to inspect this council.

So we have our consul right here.

And if we typing a message here, for example Hello and we hit send.

You'll see that gets sent down to our client over here, But it does not get sent to this client, which is perfect.

We only want to get to sent to all the other clients and not the person that originally sent that message.

And now that we have that hooked up, let's actually start a pending these messages to our actual index file.

Now, we go back into our script here, and this is going to be really easy.

We're gonna create a function for doing this, which is just going to be called upend message, and it's going to take a message.

And in here we're just going to create an element.

We're just gonna call message element, and you could just do documents dot create elements and we want to just create a diff.

So just type Devyn here is the element that we want to create, and then we want to set the value for this.

So relations, same message element dot in her text is going to be equal to our message, and then we just want to upend that toward container.

So again appear we can get our message container.

And this message container has the idea of message container.