WEBVTT

1
00:00.720 --> 00:05.320
Okay, now let's build the chat application.

2
00:05.800 --> 00:08.120
Firstly, I will remove everything.

3
00:08.760 --> 00:11.440
I will clean up a little bit over here.

4
00:12.720 --> 00:13.240
Okay.

5
00:14.560 --> 00:23.280
What we need to do right here when we send something and click on send button.

6
00:26.760 --> 00:36.920
I want it will somehow send the data from the client into the WebSocket server.

7
00:37.760 --> 00:38.320
Okay.

8
00:41.480 --> 00:47.960
And from the server we already got the message right.

9
00:49.000 --> 00:51.680
We will send a message into the server.

10
00:52.320 --> 00:52.840
Okay.

11
00:56.320 --> 00:58.520
So the server will have a message.

12
00:58.840 --> 01:04.310
And with the server, we will send back into multiple clients also.

13
01:04.830 --> 01:05.350
Okay.

14
01:05.910 --> 01:08.950
And one and two and three.

15
01:09.310 --> 01:11.190
And for that reason it is okay.

16
01:12.390 --> 01:15.350
It will automatically happen real time.

17
01:16.150 --> 01:16.670
Okay.

18
01:16.790 --> 01:18.430
Let me show you what I mean.

19
01:20.190 --> 01:26.430
Firstly, from the client right here I will send the socket.

20
01:26.430 --> 01:27.870
For example Iike send.

21
01:30.110 --> 01:31.310
In this case.

22
01:33.430 --> 01:41.830
Now you can see in previous video, when we send the something it will automatically convert back into

23
01:41.830 --> 01:43.510
the buffer, right.

24
01:44.430 --> 01:49.150
So for that reason in this case what we need to do.

25
01:49.350 --> 01:54.350
Firstly I want to send the object okay with the type.

26
01:57.590 --> 02:08.190
Maybe I will type new message or send message, it doesn't really matter.

27
02:10.750 --> 02:13.470
And the data. What's is a data?

28
02:15.670 --> 02:22.870
Right now I will create the data will be the.

29
02:25.070 --> 02:29.070
Name user element dot value.

30
02:32.430 --> 02:33.550
And message.

31
02:38.710 --> 02:45.710
Will be the text element dot value okay.

32
02:46.110 --> 02:49.350
And I will send back the data over here okay.

33
02:49.710 --> 03:01.780
From now from the specific client we will send the data into the server and the server will listen in

34
03:01.820 --> 03:03.180
on the data over here.

35
03:05.900 --> 03:10.980
In here we will interact using the websockets.

36
03:13.220 --> 03:14.100
dot on

37
03:16.020 --> 03:22.580
And when we use the same method it will automatically trigger the message event.

38
03:25.500 --> 03:28.060
Right here we will have a data.

39
03:28.460 --> 03:32.700
And let me console.log over here to see.

40
03:36.300 --> 03:37.900
Firstly, I will type

41
03:41.660 --> 03:45.260
Send and go back to the server.

42
03:45.300 --> 03:48.060
We don't see anything.

43
03:49.260 --> 03:52.780
Let me see oh sorry.

44
03:53.380 --> 04:05.100
The reason because I completely forgot the event inside the send message, we need to create a function send message.

45
04:09.300 --> 04:12.740
And in here we can move.

46
04:12.780 --> 04:13.900
Move that over here.

47
04:16.180 --> 04:16.740
Okay.

48
04:20.260 --> 04:29.620
Right now we don't  need to wrap it inside a WebSocket dot on open because this is an event okay.

49
04:29.620 --> 04:31.660
It's only execute when I click.

50
04:31.700 --> 04:37.340
So for that reason in this case the socket is already established.

51
04:43.380 --> 04:44.060
Send.

52
04:44.660 --> 04:47.460
And you can see, we got a buffer.

53
04:49.180 --> 04:58.530
And actually in this case when we send the object we should convert it into the string.

54
05:00.810 --> 05:02.010
And inside the server.

55
05:02.490 --> 05:03.650
What we need to do.

56
05:05.690 --> 05:14.530
I will restructuring the type and  data equal JSON.parse data over here.

57
05:14.930 --> 05:15.450
Okay.

58
05:17.490 --> 05:17.850
Um.

59
05:22.370 --> 05:28.690
Let's, right here, I think I will change into the message.

60
05:32.090 --> 05:32.530
Okay.

61
05:32.570 --> 05:36.730
Right now, because we a type and data for that reason.

62
05:36.730 --> 05:39.370
In this case, we will restructuring the time like that.

63
05:39.770 --> 05:42.170
And let me try to console.log.

64
05:49.570 --> 05:50.890
Now I will click send.

65
05:55.170 --> 05:55.530
Okay.

66
05:58.560 --> 05:59.840
We need to refresh.

67
06:03.040 --> 06:06.520
Click, now you can see in this case.

68
06:07.480 --> 06:11.840
We already got the type and the data.

69
06:12.440 --> 06:12.920
Okay.

70
06:14.560 --> 06:15.080
Why?

71
06:15.080 --> 06:16.960
I need the type over here.

72
06:17.640 --> 06:19.440
Because in later.

73
06:19.480 --> 06:23.080
Maybe we will have a multiple send event.

74
06:23.480 --> 06:27.600
For example, like send post.

75
06:27.880 --> 06:28.400
Okay.

76
06:28.440 --> 06:28.760
Or.

77
06:29.720 --> 06:30.920
Create post

78
06:30.960 --> 06:31.440
Okay.

79
06:31.800 --> 06:34.200
Send notification.

80
06:34.240 --> 06:34.560
Okay.

81
06:34.600 --> 06:38.680
For that reason, we need the way to identify that.

82
06:38.920 --> 06:39.440
Okay.

83
06:39.680 --> 06:46.880
So for that reason, we will send the type over here and inside the server what we need to do.

84
06:46.920 --> 06:59.640
Firstly I will check if type equal new send messages, we will write logic over here.

85
07:00.840 --> 07:01.880
In here.

86
07:03.840 --> 07:09.880
We will send the message into the client.

87
07:10.080 --> 07:10.640
Okay.

88
07:11.800 --> 07:12.400
Right here.

89
07:12.400 --> 07:13.640
This is the bad way.

90
07:16.720 --> 07:18.600
Let me show you the bad way first.

91
07:19.920 --> 07:24.040
I will send with the data.

92
07:24.720 --> 07:25.320
Okay.

93
07:26.720 --> 07:27.440
Right here.

94
07:27.440 --> 07:32.920
I also send the same data type over here.

95
07:32.960 --> 07:33.400
Okay.

96
07:37.440 --> 07:42.000
I message and we will send data to the client.

97
07:42.880 --> 07:45.160
And make sure we need to stringify.

98
07:45.200 --> 07:45.600
So.

99
07:48.840 --> 07:51.200
Now, firstly.

100
07:51.920 --> 08:05.310
From the client we send a message to the server and from server we send back that into the client.

101
08:06.670 --> 08:09.310
Okay, that's what we do right now.

102
08:10.550 --> 08:19.070
But I don't want it simple like that. I want it also send into the another client.

103
08:21.830 --> 08:22.390
Okay.

104
08:22.710 --> 08:23.870
How to do that.

105
08:24.310 --> 08:30.550
Right now if we use the ws.send.

106
08:30.830 --> 08:37.950
Only send back to the specific connection over here.

107
08:38.470 --> 08:38.990
Okay.

108
08:41.350 --> 08:44.190
Now let me show you what I mean.

109
08:44.670 --> 08:48.630
Let me go back and code that, inside here.

110
08:49.870 --> 08:55.350
We also got a socket dot on message.

111
08:58.380 --> 08:58.900
Okay.

112
08:59.980 --> 09:01.060
And right here.

113
09:06.500 --> 09:08.780
I will use it later.

114
09:09.340 --> 09:20.420
JSON.parse event.data and let me console.log client data.

115
09:20.860 --> 09:22.580
Okay, I will check that out.

116
09:30.940 --> 09:34.820
So let's say let me refresh.

117
09:39.140 --> 09:44.580
Now you can see, we already got the data right here right.

118
09:45.740 --> 09:51.300
And when we listen in on the message we will append that into the chat box over here.

119
09:53.660 --> 09:56.060
So I will create a p element.

120
09:59.980 --> 10:04.060
p element dot text content

121
10:04.060 --> 10:04.900
Content.

122
10:06.980 --> 10:08.020
To the data.

123
10:10.540 --> 10:10.940
Dot.

124
10:10.980 --> 10:11.620
Data.

125
10:13.300 --> 10:13.820
Dot.

126
10:16.180 --> 10:16.700
Name.

127
10:20.140 --> 10:21.020
data.data

128
10:21.060 --> 10:22.100
.message

129
10:24.580 --> 10:25.300
Okay.

130
10:26.100 --> 10:30.500
And we will append child.

131
10:36.940 --> 10:40.020
And make sure we

132
10:42.460 --> 10:42.780
Uh.

133
10:43.340 --> 10:45.980
Now let me see it work or not first

134
10:53.100 --> 10:57.850
Now you can see it will send into here.

135
10:58.850 --> 11:00.970
Let me create another client.

136
11:02.690 --> 11:03.810
I will refresh.

137
11:09.250 --> 11:12.730
I will send I will go back to the client.

138
11:12.770 --> 11:16.050
Now let me see it doesn't see the message over here.

139
11:16.090 --> 11:16.570
Right.

140
11:18.810 --> 11:25.770
So that's because in this case we're using the fs.

141
11:26.330 --> 11:28.530
Sorry the WS okay.

142
11:29.250 --> 11:34.050
WS is for single collection okay.

143
11:34.410 --> 11:47.890
So the good way is we need to send the data for all the client okay.

144
11:48.930 --> 11:56.690
So in order to do that we will be using the WebSockets server over here dot clients.

145
11:57.130 --> 11:57.650
Okay.

146
11:58.290 --> 12:02.730
And from this clients, this is the array of all the clients.

147
12:04.010 --> 12:11.170
We can loop that, and we will send back over here.

148
12:12.050 --> 12:12.570
Okay.

149
12:14.930 --> 12:16.690
And how do I know that?

150
12:17.170 --> 12:19.930
Let me show that into the documentation.

151
12:20.650 --> 12:33.290
Inside the github over here, you can see right here in order to broadcast to all the connections on the

152
12:33.290 --> 12:35.450
client, we will use that.

153
12:35.490 --> 12:35.970
Okay.

154
12:37.650 --> 12:39.290
And now let me show you.

155
12:39.330 --> 12:40.610
Let me refresh.

156
12:44.730 --> 12:47.730
Let's send now you can seee in other.

157
12:47.730 --> 12:48.210
Client.

158
12:48.250 --> 12:50.930
We already got the new one.

159
12:51.290 --> 12:51.770
Okay.

160
12:59.120 --> 12:59.640
Send

161
13:00.480 --> 13:02.920
And this already work.

162
13:05.720 --> 13:10.400
After we send, make sure we will reset the.

163
13:10.960 --> 13:12.840
text dot

164
13:16.000 --> 13:17.040
text content

165
13:18.640 --> 13:19.240
Oh, sorry.

166
13:19.720 --> 13:20.360
The value.

167
13:22.880 --> 13:24.440
We test that again.

168
13:28.960 --> 13:29.560
Send.

169
13:31.360 --> 13:32.320
And right here.

170
13:36.520 --> 13:37.040
Okay.

171
13:37.080 --> 13:39.400
It's already work for now.

172
13:39.400 --> 13:45.160
If I connect into the another application and.

173
13:48.440 --> 13:50.360
Send a message you can see right here.

174
13:50.360 --> 13:53.480
We also see the message over here.

175
13:53.550 --> 13:53.910
right?

176
13:54.950 --> 13:55.470
Okay.

177
13:55.510 --> 13:56.550
Very, very cool.

178
13:58.070 --> 14:01.150
And that's it.

179
14:04.270 --> 14:04.790
Now.

180
14:06.910 --> 14:09.670
I hope you already understand.

181
14:09.830 --> 14:14.510
Let me summarize what you learned in this video.

182
14:15.310 --> 14:20.830
Firstly we will create a function for send event.

183
14:21.590 --> 14:22.110
Okay.

184
14:22.710 --> 14:24.590
Inside here we need to use the socket.send.

185
14:24.590 --> 14:32.230
This line right here it means from the client send data.

186
14:35.270 --> 14:38.350
Into the server okay.

187
14:39.070 --> 14:49.430
And from the server we will broadcast in on client and include itself okay.

188
14:49.430 --> 14:52.670
Firstly we will broadcast into this client also.

189
14:53.310 --> 15:00.350
and into the another client and one and two and three.

190
15:00.750 --> 15:01.350
Okay.

191
15:02.350 --> 15:13.350
With this approach we will send back the data in every client connect to that server and in the script

192
15:13.350 --> 15:23.150
right here, every time we retrieve the message we will create the element and append that okay.

193
15:28.470 --> 15:33.510
So let me try to disconnect.

194
15:37.350 --> 15:40.110
So okay this work.

195
15:49.150 --> 15:52.350
So that's for the video.