Hi everyone.
In this video I want to build one more feature which is the list of user online over here.
Okay, so let me do that.
Inside the index dot HTML right here I will create the another UI element with the user online.
Okay.
And maybe in later will have the li element.
Click refresh okay.
And before I try to do that let me refactor the code a little bit.
Let me remove the user element over here.
Okay, I will remove the the name.
I need to create a prompt to enter the name.
Okay.
Let me remove that.
And in here I will create a user name with prompt.
Enter your name okay.
And let me find the user element.
And remove that.
With username over here and username here okay.
Let me refresh.
Now you can see we have a prompt.
Okay this work.
And you will see.
Okay.
It's already work.
And right now, let's build the user online feature
Okay.
How to do that.
Let's think a little bit.
Well.
After we enter the name I want it will emit the event to the WebSocket servers.
Okay.
Well, in order to do that, you just need to emit the event right here.
I will ignore the admin socket.
From a socket.
I will emit event with new user event.
And I will put a username over here.
Okay.
With the socket emit new user with a name.
And inside the servers what we need to do.
We need to listen on that.
socket.on with a new user.
Okay.
And we will have a user name and what we need to do.
Very easy
We just need to create another user.
array
And after we listen in on this event we will push that users.push username
Okay.
And after we push the username into that array we need to emit the event to all the users.
Okay.
So in order to emit to all users what we need to do, we need to use IO.emit maybe the user's
Online.
With the users array over here.
After we already emit the event, we will listen in on that.
Let me console.log user.
Okay.
Like that and let's see I will inspect and check console.log and I will refresh and I will typo.
John now you can see, we already emit the John and console.log over here and right here.
Let me type Maria and check.
Okay.
You can see we already got Maria.
But what happened if I close?
What about if I close?
To disconnect the user.
I will remove the array with the maria.
Okay, I will remove the Maria.
But right now it's not work.
Okay.
So in order to do that, let me show you.
Enter to run.
Let me show you.
We just need to.
right here you can see inside server
ts
We need to listen in on the disconnect event
Okay.
With this event, we need to remove the user from the array.
Right.
But how we can remove that, if you remember, inside the users.
We only have the user name.
Okay.
We only have a user name.
Username when we disconnect.
I want to remove the Maria.
How we can found the Maria to remove that.
Well, unfortunately, we cannot do that.
Okay.
Right now instead of put the username, I need to put the object.
Okay.
With the ID we will be the socket.id okay.
And right here we need to emit the event.
And I will map over here we will user.
Dot username.
Okay I will only return the username for the client.
But the whole point right now is are we already put with the ID okay.
And when we disconnect we just need to found this id here and remove from that array.
Right.
So we need to find the index
users.findIndex
Right.
=== socket.id
Okay.
If the index equal minus sorry index !== -1, it means if index found.
If we found a index what we need to do, we need to remove that right, users.splice.
Index and remove one element from index.
And right here we need to emit the event one more time.
Over here we will be user online
Let's do that.
I will refresh and I will do some now refresh and Maria.
Right.
And let me close the Maria.
Now you can see it already.
Have a John.
Okay.
Very cool.
Right.
Uh, but right now, sometime it not triggers the prompt.
Um, if it's not trigger prompt, we will see the null over here.
Okay.
It means right here.
We should refresh one more time.
And Maria.
Okay.
It's still work.
Okay, let's just ignore the error.
It doesn't really matter in this case.
But we already
Done right, after we already have the user.
What we need to do is to append that.
User online element okay with this ID.
After that we need to follow.
We need to clear okay.
And append that
I will create the li element.
No sorry we need to.
Create li element.
And li element text content = user
And after that let append that inside here.
Append child
Okay.
Now let's test this .
Now we already got the John over here.
And refresh Maria.
Okay.
We already got the user online over here.
Very very cool right.
And that's for the feature of the user online, from now I expect
You already learn a lot with the Socket.io.
And I'm sure right now you already understand what exactly about the socket and what exactly about IO
and how we can send and receive the event.
Right?
So that's for the video.
I will see you.