Okay, now let's build the chat application.
Firstly, I will remove everything.
I will clean up a little bit over here.
Okay.
What we need to do right here when we send something and click on send button.
I want it will somehow send the data from the client into the WebSocket server.
Okay.
And from the server we already got the message right.
We will send a message into the server.
Okay.
So the server will have a message.
And with the server, we will send back into multiple clients also.
Okay.
And one and two and three.
And for that reason it is okay.
It will automatically happen real time.
Okay.
Let me show you what I mean.
Firstly, from the client right here I will send the socket.
For example Iike send.
In this case.
Now you can see in previous video, when we send the something it will automatically convert back into
the buffer, right.
So for that reason in this case what we need to do.
Firstly I want to send the object okay with the type.
Maybe I will type new message or send message, it doesn't really matter.
And the data. What's is a data?
Right now I will create the data will be the.
Name user element dot value.
And message.
Will be the text element dot value okay.
And I will send back the data over here okay.
From now from the specific client we will send the data into the server and the server will listen in
on the data over here.
In here we will interact using the websockets.
dot on
And when we use the same method it will automatically trigger the message event.
Right here we will have a data.
And let me console.log over here to see.
Firstly, I will type
Send and go back to the server.
We don't see anything.
Let me see oh sorry.
The reason because I completely forgot the event inside the send message, we need to create a function send message.
And in here we can move.
Move that over here.
Okay.
Right now we don't need to wrap it inside a WebSocket dot on open because this is an event okay.
It's only execute when I click.
So for that reason in this case the socket is already established.
Send.
And you can see, we got a buffer.
And actually in this case when we send the object we should convert it into the string.
And inside the server.
What we need to do.
I will restructuring the type and data equal JSON.parse data over here.
Okay.
Um.
Let's, right here, I think I will change into the message.
Okay.
Right now, because we a type and data for that reason.
In this case, we will restructuring the time like that.
And let me try to console.log.
Now I will click send.
Okay.
We need to refresh.
Click, now you can see in this case.
We already got the type and the data.
Okay.
Why?
I need the type over here.
Because in later.
Maybe we will have a multiple send event.
For example, like send post.
Okay.
Or.
Create post
Okay.
Send notification.
Okay.
For that reason, we need the way to identify that.
Okay.
So for that reason, we will send the type over here and inside the server what we need to do.
Firstly I will check if type equal new send messages, we will write logic over here.
In here.
We will send the message into the client.
Okay.
Right here.
This is the bad way.
Let me show you the bad way first.
I will send with the data.
Okay.
Right here.
I also send the same data type over here.
Okay.
I message and we will send data to the client.
And make sure we need to stringify.
So.
Now, firstly.
From the client we send a message to the server and from server we send back that into the client.
Okay, that's what we do right now.
But I don't want it simple like that. I want it also send into the another client.
Okay.
How to do that.
Right now if we use the ws.send.
Only send back to the specific connection over here.
Okay.
Now let me show you what I mean.
Let me go back and code that, inside here.
We also got a socket dot on message.
Okay.
And right here.
I will use it later.
JSON.parse event.data and let me console.log client data.
Okay, I will check that out.
So let's say let me refresh.
Now you can see, we already got the data right here right.
And when we listen in on the message we will append that into the chat box over here.
So I will create a p element.
p element dot text content
Content.
To the data.
Dot.
Data.
Dot.
Name.
data.data
.message
Okay.
And we will append child.
And make sure we
Uh.
Now let me see it work or not first
Now you can see it will send into here.
Let me create another client.
I will refresh.
I will send I will go back to the client.
Now let me see it doesn't see the message over here.
Right.
So that's because in this case we're using the fs.
Sorry the WS okay.
WS is for single collection okay.
So the good way is we need to send the data for all the client okay.
So in order to do that we will be using the WebSockets server over here dot clients.
Okay.
And from this clients, this is the array of all the clients.
We can loop that, and we will send back over here.
Okay.
And how do I know that?
Let me show that into the documentation.
Inside the github over here, you can see right here in order to broadcast to all the connections on the
client, we will use that.
Okay.
And now let me show you.
Let me refresh.
Let's send now you can seee in other.
Client.
We already got the new one.
Okay.
Send
And this already work.
After we send, make sure we will reset the.
text dot
text content
Oh, sorry.
The value.
We test that again.
Send.
And right here.
Okay.
It's already work for now.
If I connect into the another application and.
Send a message you can see right here.
We also see the message over here.
right?
Okay.
Very, very cool.
And that's it.
Now.
I hope you already understand.
Let me summarize what you learned in this video.
Firstly we will create a function for send event.
Okay.
Inside here we need to use the socket.send.
This line right here it means from the client send data.
Into the server okay.
And from the server we will broadcast in on client and include itself okay.
Firstly we will broadcast into this client also.
and into the another client and one and two and three.
Okay.
With this approach we will send back the data in every client connect to that server and in the script
right here, every time we retrieve the message we will create the element and append that okay.
So let me try to disconnect.
So okay this work.
So that's for the video.