WEBVTT

1
00:00.480 --> 00:02.040
Hi everyone.

2
00:02.080 --> 00:10.760
In this video I want to build one more feature which is the list of user online over here.

3
00:11.360 --> 00:15.640
Okay, so let me do that.

4
00:17.720 --> 00:31.360
Inside the index dot HTML right here I will create the another UI element with the user online.

5
00:34.840 --> 00:35.440
Okay.

6
00:35.960 --> 00:39.200
And maybe in later will have the li element.

7
00:42.760 --> 00:44.200
Click refresh okay.

8
00:48.080 --> 00:55.600
And before I try to do that let me refactor the code a little bit.

9
00:58.200 --> 01:01.870
Let me remove the user element over here.

10
01:03.830 --> 01:06.390
Okay, I will remove the the name.

11
01:07.270 --> 01:10.870
I need to create a prompt to enter the name.

12
01:10.910 --> 01:11.350
Okay.

13
01:11.350 --> 01:12.470
Let me remove that.

14
01:12.950 --> 01:17.390
And in here I will create a user name with prompt.

15
01:18.670 --> 01:22.430
Enter your name okay.

16
01:23.350 --> 01:25.990
And let me find the user element.

17
01:28.070 --> 01:30.150
And remove that.

18
01:33.790 --> 01:39.070
With username over here and username here okay.

19
01:40.870 --> 01:41.870
Let me refresh.

20
01:42.510 --> 01:44.630
Now you can see we have a prompt.

21
01:50.750 --> 01:52.230
Okay this work.

22
01:54.030 --> 01:55.190
And you will see.

23
02:03.130 --> 02:03.730
Okay.

24
02:03.770 --> 02:04.850
It's already work.

25
02:05.810 --> 02:09.410
And right now, let's build the user online feature

26
02:09.650 --> 02:10.050
Okay.

27
02:10.090 --> 02:11.010
How to do that.

28
02:11.210 --> 02:12.290
Let's think a little bit.

29
02:14.690 --> 02:15.210
Well.

30
02:17.450 --> 02:26.210
After we enter the name I want it will emit the event to the WebSocket servers.

31
02:26.250 --> 02:26.770
Okay.

32
02:28.250 --> 02:34.770
Well, in order to do that, you just need to emit the event right here.

33
02:34.810 --> 02:39.210
I will ignore the admin socket.

34
02:42.650 --> 02:43.450
From a socket.

35
02:43.490 --> 02:46.330
I will emit event with new user event.

36
02:46.810 --> 02:48.770
And I will put a username over here.

37
02:49.530 --> 02:50.090
Okay.

38
02:50.850 --> 02:54.090
With the socket emit new user with a name.

39
02:54.410 --> 02:57.250
And inside the servers what we need to do.

40
02:57.970 --> 02:59.650
We need to listen on that.

41
03:00.480 --> 03:06.160
socket.on with a new user.

42
03:07.560 --> 03:08.080
Okay.

43
03:08.560 --> 03:13.440
And we will have a user name and what we need to do.

44
03:14.440 --> 03:15.320
Very easy

45
03:16.000 --> 03:20.160
We just need to create another user.

46
03:20.480 --> 03:21.040
array

47
03:21.560 --> 03:30.400
And after we listen in on this event we will push that users.push username

48
03:35.840 --> 03:36.360
Okay.

49
03:37.280 --> 03:45.240
And after we push the username into that array we need to emit the event to all the users.

50
03:45.360 --> 03:45.880
Okay.

51
03:51.640 --> 03:59.640
So in order to emit to all users what we need to do, we need to use IO.emit maybe the user's

52
04:00.390 --> 04:01.150
Online.

53
04:03.510 --> 04:05.870
With the users array over here.

54
04:08.190 --> 04:11.750
After we already emit the event, we will listen in on that.

55
04:23.990 --> 04:25.550
Let me console.log user.

56
04:26.510 --> 04:27.030
Okay.

57
04:28.070 --> 04:37.950
Like that and let's see I will inspect and check console.log and I will refresh and I will typo.

58
04:38.830 --> 04:48.070
John now you can see, we already emit the John and console.log over here and right here.

59
04:48.070 --> 04:51.990
Let me type Maria and check.

60
04:52.270 --> 04:52.710
Okay.

61
04:52.750 --> 04:54.990
You can see we already got Maria.

62
04:55.470 --> 04:57.470
But what happened if I close?

63
04:58.270 --> 04:59.990
What about if I close?

64
05:00.580 --> 05:03.220
To disconnect the user.

65
05:03.220 --> 05:07.620
I will remove the array with the maria.

66
05:07.660 --> 05:10.220
Okay, I will remove the Maria.

67
05:10.780 --> 05:12.460
But right now it's not work.

68
05:12.620 --> 05:13.140
Okay.

69
05:13.740 --> 05:17.620
So in order to do that, let me show you.

70
05:20.980 --> 05:21.900
Enter to run.

71
05:22.340 --> 05:23.180
Let me show you.

72
05:24.700 --> 05:25.660
We just need to.

73
05:28.540 --> 05:32.180
right here you can see inside server

74
05:32.180 --> 05:32.620
ts

75
05:33.260 --> 05:37.660
We need to listen in on the disconnect event

76
05:40.540 --> 05:41.020
Okay.

77
05:41.740 --> 05:49.580
With this event, we need to remove the user from the array.

78
05:49.620 --> 05:50.180
Right.

79
05:50.740 --> 05:54.940
But how we can remove that, if you remember, inside the users.

80
05:54.940 --> 05:57.460
We only have the user name.

81
05:58.260 --> 05:58.780
Okay.

82
05:59.060 --> 06:00.540
We only have a user name.

83
06:00.540 --> 06:02.200
Username when we disconnect.

84
06:02.240 --> 06:05.680
I want to remove the Maria.

85
06:06.480 --> 06:09.920
How we can found the Maria to remove that.

86
06:10.320 --> 06:13.000
Well, unfortunately, we cannot do that.

87
06:13.760 --> 06:14.240
Okay.

88
06:15.120 --> 06:19.880
Right now instead of put the username, I need to put the object.

89
06:20.120 --> 06:20.640
Okay.

90
06:21.160 --> 06:26.320
With the ID we will be the socket.id okay.

91
06:26.920 --> 06:30.480
And right here we need to emit the event.

92
06:30.520 --> 06:34.920
And I will map over here we will user.

93
06:37.240 --> 06:39.240
Dot username.

94
06:39.400 --> 06:43.640
Okay I will only return the username for the client.

95
06:43.920 --> 06:51.320
But the whole point right now is are we already put with the ID okay.

96
06:51.360 --> 06:57.280
And when we disconnect we just need to found this id here and remove from that array.

97
06:57.400 --> 06:57.920
Right.

98
07:00.000 --> 07:02.390
So we need to find the index

99
07:02.390 --> 07:08.590
users.findIndex

100
07:08.630 --> 07:09.110
Right.

101
07:14.070 --> 07:15.190
=== socket.id

102
07:17.150 --> 07:17.670
Okay.

103
07:17.710 --> 07:31.030
If the index equal minus sorry index !== -1, it means if index found.

104
07:31.550 --> 07:37.750
If we found a index what we need to do, we need to remove that right, users.splice.

105
07:40.190 --> 07:45.230
Index and remove one element from index.

106
07:46.390 --> 07:49.830
And right here we need to emit the event one more time.

107
07:49.830 --> 07:53.670
Over here we will be user online

108
07:54.630 --> 07:55.830
Let's do that.

109
07:56.430 --> 08:04.780
I will refresh and I will do some now refresh and Maria.

110
08:06.180 --> 08:06.700
Right.

111
08:07.180 --> 08:09.060
And let me close the Maria.

112
08:09.100 --> 08:10.580
Now you can see it already.

113
08:11.380 --> 08:12.580
Have a John.

114
08:12.820 --> 08:13.380
Okay.

115
08:13.860 --> 08:14.540
Very cool.

116
08:14.540 --> 08:14.940
Right.

117
08:15.860 --> 08:22.540
Uh, but right now, sometime it not triggers the prompt.

118
08:23.940 --> 08:29.500
Um, if it's not trigger prompt, we will see the null over here.

119
08:30.900 --> 08:31.420
Okay.

120
08:31.460 --> 08:32.380
It means right here.

121
08:32.380 --> 08:34.180
We should refresh one more time.

122
08:34.220 --> 08:35.620
And Maria.

123
08:35.660 --> 08:36.060
Okay.

124
08:36.100 --> 08:36.940
It's still work.

125
08:37.460 --> 08:39.300
Okay, let's just ignore the error.

126
08:39.420 --> 08:41.660
It doesn't really matter in this case.

127
08:42.780 --> 08:44.460
But we already

128
08:44.620 --> 08:48.420
Done right, after we already have the user.

129
08:48.460 --> 08:51.820
What we need to do is to append that.

130
09:13.330 --> 09:18.130
User online element okay with this ID.

131
09:19.690 --> 09:22.290
After that we need to follow.

132
09:22.290 --> 09:25.250
We need to clear okay.

133
09:25.290 --> 09:26.450
And append that

134
09:30.970 --> 09:33.530
I will create the li element.

135
09:43.250 --> 09:46.730
No sorry we need to.

136
09:57.010 --> 09:58.490
Create li element.

137
09:59.970 --> 10:04.190
And li element text content = user

138
10:06.510 --> 10:10.830
And after that let append that inside here.

139
10:13.070 --> 10:16.310
Append child

140
10:16.750 --> 10:17.230
Okay.

141
10:17.630 --> 10:20.910
Now let's test this .

142
10:21.950 --> 10:23.990
Now we already got the John over here.

143
10:24.510 --> 10:26.590
And refresh Maria.

144
10:26.630 --> 10:27.070
Okay.

145
10:27.110 --> 10:29.750
We already got the user online over here.

146
10:30.510 --> 10:31.910
Very very cool right.

147
10:32.510 --> 10:38.990
And that's for the feature of the user online, from now I expect

148
10:38.990 --> 10:43.830
You already learn a lot with the Socket.io.

149
10:44.270 --> 10:52.070
And I'm sure right now you already understand what exactly about the socket and what exactly about IO

150
10:52.710 --> 10:57.470
and how we can send and receive the event.

151
10:57.630 --> 10:58.150
Right?

152
10:58.630 --> 11:00.550
So that's for the video.

153
11:00.590 --> 11:01.350
I will see you.