Hi everyone.
In previous video we already understand how to send and receive the data in Socket.io, right?
In this video let's build the chat application.
Okay.
Right here, let me remove everything.
Okay.
And inside the script I will remove also.
When I click into the button I will create the send message function okay.
Inside the send function.
Firstly, we need to query the some stuff over here.
In here I will use the socket.
I will emit the event okay.
When I click into the button I will emit.
The event will send message is okay.
And in here I will send with the object.
Firstly the username will be user element dot value.
And message will be text element dot value also.
And inside the server we will listen on that event inside here right.
I will listen on the socket.
Because I only listening on particular connection.
I will send the message.
I will listen on the event.
Then message over here.
And.
In here, we will have a message callback.
And let me console.log.
I will click send and let check here.
We doesn't have anything.
Let me see why.
Let me refresh.
Over here.
We already got the data.
After we have a message, I will use destructuring that
Or actually, I will not.
Right now.
I will send back the
Message into particular client
Okay.
And now I will show you the bad way.
Okay.
The bad way.
We will use
The socket right here.
And we will emit the event to send back to the client.
Maybe you can.
You can use exactly the same emit right here.
Okay.
It's totally different because this event on the server and this is the event on the client, you can
send with the same event name.
It's totally okay in this case.
And I will send back entirely message over here.
Right.
After we already send the data into the client we will listening on that.
I will console.log a message from the client.
I will send.
Now
You can see we already got the message.
Okay.
And right now, what we will do, we will apeend into the chat box.
Right.
Right here I will append that, chat box element dot append ,before append that
We need to create the p element.
And append that over here.
Right now you can see when I click here and I send, now you can see it already have, let me open another
client and send, now you can see right here in another client we don't have any message.
Why?
Because in the server we use bad way, we directly send event for particular socket.
It means we only send back into that socket connection over here.
Okay.
We not send the data into that socket right here.
Right.
So for that reason, in order to send back for all sockets has connect to the server.
We need to directly manipulate the io over here.
Okay, we will send back that into the io, this is a the good way.
Okay, let me show you how it works.
I will refresh.
I will send a message and now you can see in the another client we already got the new message.
Okay.
I will send, now you can see, it's already work.
And.
Make sure right here we can use a text.
Value will be empty for reset
Okay, it's already work.
That's it, that's how we can build a chat application using the Socket.io.
And you can see with this way we don't need the if else block.
Instead of.
We will use the event based API, right?
We will register the event and many that
And make sure you understand what different between the socket and IO.
Let me summarize, the socket.
is just the one single socket for a particular connection.
And io right here is for all the sockets has connect to the.
Server.
Okay that's it. I hope you understand this video.
I will see you in the next one.