Hi everyone!
In this video let's build a simple chat application using the http.
Firstly, I will prepare for you the file over here.
Your job is download it and coding with me.
Now here I will open the Visual Studio.
And firstly, we need to install the some dependency.
You can see inside a package dot JSON.
We already have the cors.
And express
Okay.
It's simple like that.
And inside here, we already provide for you the server.js.
You can see.
Right.
And right now, let me run the application inside a package.json.
We already have a command start.
Let me run that and npm start.
After we run right here, we will go to the public and click on the index dot HTML.
And you can see inside index dot HTML I already provide for you.
The very simple okay will be div.
And I will have some input.
And we have a button.
to send a message and we also have a script.js.
Inside a Script.js is totally empty.
We will write the code for that, right here.
Let's click into the go live.
Now you can see right here I already have a simple UI like this.
Let me zoom in a little bit.
Now what about for example I want it will send a message.
Okay.
When I click send it will somehow call the API and store that over here.
Right.
So let me show you how it works.
Firstly, go back to the API.
We need to write API for get all messages and send a message.
Right.
Firstly, we don't have any database right now for that reason.
In this case we will define the some data.
Okay I will define the object sorry the array like this.
And in order to send the message what we need to do right here, we have a name and message right.
So I will tag it from the Request.body we will destruct string the name and Message.
After we got this thing, we will start us.
Okay, I will put us with the object.
Name and message will be simple like us.
And I will respond.
But.
First dot state .201. JSON.
With a message will be send message successfully.
Okay.
Very very simple.
And in order to get all the message we just need to return request master dot.
With JSON.
Read all messages.
Put a data message.
All right.
Okay.
Like this thing.
And.
Right now I will go to the index.html.
When the button clicked I will create an event called send message function.
Okay.
So here I will copy the send message and go to the script.
And we will create a function called send message.
And right here let me call it we just need to console.log.
Let me inspect.
Let's say.
Okay, it's already worked right now.
And what about in this send message function?
Firstly we need to query into the user and test.
Okay.
In order to do that inside the JavaScript we will call.
User element.
Take our document dot.
Get element by id user.
And test element.
Whereby is.
Now test and up call.
Right now we we will prevent us If we don't have.
We will return.
Okay.
Make sure you console.log.
Make sure.
Element is this.
Okay I will just need to do that.
And after we lost this thing we will plot the user equal user element dot value.
Uh, actually right here we have the input uh value test equal.
Value.
Now let me try to console, log the user and test.
Okay, we already got the user and test after we got the user and test.
What we need to do right now we need to send.
In order to send the message.
We will use the fetch from the browser.
What we need to do.
We need to boost the new URL.
Message.
Right.
And we need to boost the method whereby bus Us and with the header.
Content.
Will be application JSON.
Okay.
And we need the body in order to send the parties inside the patch function, we should convert it into
JSON.
Okay.
Region right here.
Right here I will put the name and message right with the name will be user.
Message test okay.
Symbol like that.
And right here I think we can apply that.
Make sure we use the assign function.
And I will console.log.
Check this one.
Go to the browser refresh.
Right here.
Let me say.
Right here.
We already seen methods not allowed.
Or I know the reason because I use the wrong.
Okay.
Much more right now.
We should use the 3000.
It will be the same.
Okay.
Because we already configured us inside this thing.
Okay, so for a reason, make sure you run it in the car.
Now right here you can see we already send a message successfully and we already got the result right.
And.
Okay.
After we already have a response, what we need to do, we will fetch.
Fetch the own message and append us into the lift block right here.
For example, I have a b.
Let me show you how it works.
Hi.
Okay.
Simple like that.
Now, in order to do that, let me say right here we already have a scene function.
Might be on top of that I will create another async function will be fetch message okay.
Is that affects my state.
My entire thing.
Is to read okay and remove the body right here I will console.log check.
And I will go back message over here.
Let's say right here.
We already got the.
Network with the message with own data right now When we send a message successfully, we will call
the message over here.
Let's say we want.
To send.
Now you can say for now it will send a message successfully using the box.
And after that we will retrieve a new message right here.
And you can see.
Inside here.
We got a message.
This blog.
We need to.
Respond to JSON.
And right here I will console.log data.
Okay, let's refresh again.
Sir.
Check data.
Data.
Right here you can see we already got.
The data will be empty right now.
Okay.
Data will be the message, right?
So right now I will create a message will be data.
Dot data.
This is the array.
Right.
Let's say now you can say we already got the message.
side and my job.
Amanda's into the team.
So for that reason, it is okay.
We will find the chat box.
The box element.
Get element by array with the array.
And now we can check a little bit over here.
So after last what we need to do we need to look into the message.
Right.
And for it Muscles from the butt end.
We will create a base element.
Right?
Uh, actually right here.
We can do create element new base document dot create element with the play tag and with a base element.
I can use the text content with the message.
The message right here is an object.
Okay.
So right now I will call the message dot.
Dot name right.
And message that message okay.
The name is pretty bad, but, uh, I mean, you got the idea.
Okay, so after that, we will look at us and we will create a better one, and we will append that
into the chat box.
Right.
And then try with a B element.
So we checked how normal JavaScript work.
I think you already got that right.
So now let me see fully.
I will run and try and click on save.
Now you can see we already have right.
We already got that.
And actually before that we should clean.
Okay.
So.
Colin.
I'm sorry.
Colin.
The chat box is still the same.
Okay.
So after that.
We will.
Let me move this thing outside function and move the chat box outside.
Okay.
And right here I will use the value equal.
To the next video the test element dot enter.
Okay.
Let me say Sean.
Hi.
Let's say okay this will empower you.
And it will show over here.
And let me, uh, open the another thing.
Let me remove the French message over here.
Click refresh navigation.
Okay.
Right now I will use the height set.
You can see right here we got.
But in the another client we don't see the message right.
How we can do that using the normal Adobe.
Well in order to do that with the normal Adobe.
We always need to send the request into the server.
Right.
We always need to send a request highly server.
And you get a data.
Okay.
We always need to set sail and sail to gather data.
So in order to do that inside the normal actually activity, we will be using the technique called calling.
Okay.
Let me show you right here I will give you the set interval.
I will pass the first question over here with five second okay.
It means after five second we will fetch the message and append us into the HTML.
Okay.
Only after five seconds.
We will ask the server for new data again and again and again.
Let me show you what I mean.
For example, right now I will refresh and I will.
Go to the network tab and right here will be also the network tab.
When I travel.
And I will click on save.
Now you can see right here it also works.
But let me travel very fast.
Now you can say it not real time right.
After five seconds we will send a request to retrieve a new data.
Right?
You can say every time after five seconds we will ask the server.
You will say.
And right now you can tell it's normal.
It's totally okay, but it's not good at all.
Because with this approach, we always fetch the data, even if the data doesn't change.
You will see right here the data is still there, but you can see right here up to five seconds with
an API.
And it will clearly increase the latency.
Okay.
And the cost of your server.
So it's not good at all right.
So for that reason, in order to achieve the goals by rational communication we should use something
called web sockets.