How everyone.
In this video I will show you how to create a room in Socket.io.
Okay, in any chat application it also has a concept of rooms.
Let me show you what it means.
For example, inside a websockets server we have a mutiple client.
Okay.
We want to group this thing into the room and this thing will be another room.
Okay.
And we can chat within that room.
Okay.
Any other connection outside this room cannot see this chat okay.
I want to build this application.
So let's see how we can build that.
Firstly in the UI.
Right here I will create the one.
More input will be room.
Over here.
I will go to the index.js and above the user I will create a div.
And right here I will create input.
I will create id will be room
Okay.
Maybe room
Name.
And placeholder.
Enter Your room.
That's it.
We have enter your room and I will create one more button.
We will join a room
And the event.
I will create a room over here inside the script.js.
I will create another function.
What we will do with this function.
Firstly, when I type something and I click join room I want, it will emit the event into the server.
Okay.
And the server right here will be create the room for a particular connection.
Let me show you what it means right here.
I will use the socket.
Emit and emit a new event.
We may join room.
Maybe join room request.
Okay.
With the name of room right here.
I will create the constant with the room name element.
Okay.
Over here.
And I will put directly value.
Okay.
We will emit the event to join a room.
Let me copy the name inside the server in here I will create a socket.on.
Request.
We will listen in on that event for a particular socket.
Okay.
And right here we have a room name.
In order to join the room.
socket.join
Okay.
And room name.
Okay.
That is.
And after we join the room successfully, we will emit the event to notify the user.
Right here already.
Connect.
Room.
Success.
Okay.
Right here.
We will emit the event on particulars socket.
Okay.
Will not emit into the io
Okay.
Because only the client right here connect to the.
Ah okay.
We will not do similar.
That
And right here.
We will put some argument, right in this case.
Maybe I will put.
You has been.
Join a
room
Room name
Okay.
And inside the script over here, we will listen in on that.
And right here I will create a element.
Okay with the message over here and append that okay.
Let's see right now, I will refresh the application.
I will join, for example, like friend.
Click on join a room.
Now you can see, you have been joined room friend in the chat application.
Right.
And uh.
In the chat application
Maybe in here.
In here I will create the the room.
The room name, inside the index dot HTML below that.
Chat app.
I will create h2.
Okay.
And I will name it will be room.
And inside the script.
room over here.
And when we join successfully, we will append that also.
To we have a room right.
I want the room name.
So for that reason inside the server right here maybe I will put.
Another thing will be directly room name okay.
Because later I want to use the something like this.
Room.
Right here will be room element.
Room element.
Dot.
Text content will be the room name.
Okay.
You already notice about that, because we can send many message if you want.
Okay, so for this case, we will create another argument to hold the result from the server.
Right.
So that's it, refresh.
Click now you can see we already have a friend chat app
So and right here you already join to that room.
And we need one more thing will be send the message into that room.
Right.
So I will see you in the next video to show you how we can send a message into this room.