WEBVTT

1
00:01.080 --> 00:02.920
Hi everyone!

2
00:03.240 --> 00:11.840
In this video let's build a simple chat application using the http.

3
00:13.000 --> 00:17.760
Firstly, I will prepare for you the file over here.

4
00:18.880 --> 00:24.120
Your job is download it and coding with me.

5
00:27.440 --> 00:30.120
Now here I will open the Visual Studio.

6
00:39.520 --> 00:45.680
And firstly, we need to install the some dependency.

7
00:53.480 --> 00:56.160
You can see inside a package dot JSON.

8
00:56.960 --> 00:59.470
We already have the cors.

9
01:00.190 --> 01:02.470
And express

10
01:03.190 --> 01:03.750
Okay.

11
01:04.390 --> 01:05.990
It's simple like that.

12
01:06.590 --> 01:11.870
And inside here, we already provide for you the server.js.

13
01:13.430 --> 01:14.190
You can see.

14
01:14.550 --> 01:15.030
Right.

15
01:16.990 --> 01:23.150
And right now, let me run the application inside a package.json.

16
01:23.150 --> 01:26.030
We already have a command start.

17
01:27.150 --> 01:31.230
Let me run that and npm start.

18
01:34.310 --> 01:43.750
After we run right here, we will go to the public and click on the index dot HTML.

19
01:44.390 --> 01:49.950
And you can see inside index dot HTML I already provide for you.

20
01:49.950 --> 01:54.070
The very simple okay will be div.

21
01:54.310 --> 01:56.510
And I will have some input.

22
01:57.030 --> 01:58.310
And we have a button.

23
01:58.950 --> 02:03.870
to send a message and we also have a script.js.

24
02:04.470 --> 02:07.430
Inside a Script.js is totally empty.

25
02:07.910 --> 02:12.430
We will write the code for that, right here.

26
02:12.470 --> 02:16.030
Let's click into the go live.

27
02:22.230 --> 02:29.270
Now you can see right here I already have a simple UI like this.

28
02:31.030 --> 02:32.630
Let me zoom in a little bit.

29
02:34.870 --> 02:39.750
Now what about for example I want it will send a message.

30
02:42.430 --> 02:42.830
Okay.

31
02:42.830 --> 02:49.870
When I click send it will somehow call the API and store that over here.

32
02:49.990 --> 02:50.430
Right.

33
02:51.830 --> 02:56.510
So let me show you how it works.

34
02:56.750 --> 02:58.380
Firstly, go back to the API.

35
02:58.420 --> 03:06.180
We need to write API for get all messages and send a message.

36
03:06.180 --> 03:06.620
Right.

37
03:11.100 --> 03:15.900
Firstly, we don't have any database right now for that reason.

38
03:15.900 --> 03:20.660
In this case we will define the some data.

39
03:21.260 --> 03:31.740
Okay I will define the object sorry the array like this.

40
03:32.700 --> 03:42.660
And in order to send the message what we need to do right here, we have a name and message right.

41
03:44.780 --> 03:56.340
So I will tag it from the Request.body we will destruct string the name and Message.

42
04:01.020 --> 04:05.900
After we got this thing, we will start us.

43
04:08.140 --> 04:10.420
Okay, I will put us with the object.

44
04:10.940 --> 04:16.180
Name and message will be simple like us.

45
04:16.660 --> 04:19.020
And I will respond.

46
04:19.020 --> 04:19.420
But.

47
04:22.220 --> 04:27.580
First dot state .201. JSON.

48
04:29.860 --> 04:37.620
With a message will be send message successfully.

49
04:38.420 --> 04:38.940
Okay.

50
04:39.260 --> 04:40.500
Very very simple.

51
04:41.340 --> 04:48.620
And in order to get all the message we just need to return request master dot.

52
04:51.380 --> 04:52.380
With JSON.

53
04:55.410 --> 04:57.130
Read all messages.

54
04:58.050 --> 05:00.970
Put a data message.

55
05:00.970 --> 05:01.570
All right.

56
05:02.170 --> 05:02.650
Okay.

57
05:04.770 --> 05:06.250
Like this thing.

58
05:09.730 --> 05:10.170
And.

59
05:14.010 --> 05:17.530
Right now I will go to the index.html.

60
05:17.570 --> 05:26.090
When the button clicked I will create an event called send message function.

61
05:26.850 --> 05:27.370
Okay.

62
05:28.850 --> 05:32.370
So here I will copy the send message and go to the script.

63
05:33.130 --> 05:37.490
And we will create a function called send message.

64
05:45.290 --> 05:50.730
And right here let me call it we just need to console.log.

65
05:51.450 --> 05:52.570
Let me inspect.

66
05:59.690 --> 06:00.290
Let's say.

67
06:00.330 --> 06:03.370
Okay, it's already worked right now.

68
06:04.210 --> 06:07.930
And what about in this send message function?

69
06:08.130 --> 06:13.810
Firstly we need to query into the user and test.

70
06:14.250 --> 06:14.810
Okay.

71
06:15.130 --> 06:19.490
In order to do that inside the JavaScript we will call.

72
06:22.330 --> 06:23.610
User element.

73
06:24.330 --> 06:25.730
Take our document dot.

74
06:28.010 --> 06:31.130
Get element by id user.

75
06:33.290 --> 06:36.010
And test element.

76
06:40.450 --> 06:41.290
Whereby is.

77
06:43.610 --> 06:48.930
Now test and up call.

78
06:48.970 --> 06:54.680
Right now we we will prevent us If we don't have.

79
06:57.640 --> 06:58.920
We will return.

80
06:58.960 --> 06:59.360
Okay.

81
06:59.400 --> 07:01.200
Make sure you console.log.

82
07:11.360 --> 07:12.040
Make sure.

83
07:16.000 --> 07:18.800
Element is this.

84
07:18.840 --> 07:21.480
Okay I will just need to do that.

85
07:23.560 --> 07:34.160
And after we lost this thing we will plot the user equal user element dot value.

86
07:36.960 --> 07:46.440
Uh, actually right here we have the input uh value test equal.

87
07:49.680 --> 07:50.240
Value.

88
07:51.320 --> 07:55.040
Now let me try to console, log the user and test.

89
08:03.200 --> 08:11.000
Okay, we already got the user and test after we got the user and test.

90
08:11.960 --> 08:16.400
What we need to do right now we need to send.

91
08:19.320 --> 08:22.320
In order to send the message.

92
08:22.800 --> 08:27.800
We will use the fetch from the browser.

93
08:30.360 --> 08:31.240
What we need to do.

94
08:31.280 --> 08:34.120
We need to boost the new URL.

95
08:36.280 --> 08:37.000
Message.

96
08:37.280 --> 08:37.720
Right.

97
08:43.240 --> 08:52.030
And we need to boost the method whereby bus Us and with the header.

98
08:55.270 --> 08:55.990
Content.

99
09:00.110 --> 09:02.950
Will be application JSON.

100
09:03.550 --> 09:04.150
Okay.

101
09:04.910 --> 09:13.950
And we need the body in order to send the parties inside the patch function, we should convert it into

102
09:13.950 --> 09:14.510
JSON.

103
09:15.310 --> 09:15.870
Okay.

104
09:17.030 --> 09:18.230
Region right here.

105
09:19.990 --> 09:28.270
Right here I will put the name and message right with the name will be user.

106
09:30.750 --> 09:34.470
Message test okay.

107
09:34.990 --> 09:36.550
Symbol like that.

108
09:38.590 --> 09:44.350
And right here I think we can apply that.

109
09:44.630 --> 09:48.070
Make sure we use the assign function.

110
09:52.590 --> 09:54.110
And I will console.log.

111
09:55.030 --> 09:56.230
Check this one.

112
09:58.590 --> 10:01.390
Go to the browser refresh.

113
10:09.390 --> 10:09.990
Right here.

114
10:10.390 --> 10:11.470
Let me say.

115
10:15.190 --> 10:16.230
Right here.

116
10:16.230 --> 10:21.990
We already seen methods not allowed.

117
10:25.230 --> 10:30.710
Or I know the reason because I use the wrong.

118
10:31.550 --> 10:32.030
Okay.

119
10:32.350 --> 10:33.550
Much more right now.

120
10:33.550 --> 10:37.310
We should use the 3000.

121
10:37.870 --> 10:38.870
It will be the same.

122
10:38.910 --> 10:39.390
Okay.

123
10:39.630 --> 10:44.590
Because we already configured us inside this thing.

124
10:47.380 --> 10:53.100
Okay, so for a reason, make sure you run it in the car.

125
11:01.780 --> 11:10.060
Now right here you can see we already send a message successfully and we already got the result right.

126
11:14.220 --> 11:14.620
And.

127
11:17.100 --> 11:17.660
Okay.

128
11:18.620 --> 11:25.380
After we already have a response, what we need to do, we will fetch.

129
11:27.380 --> 11:34.340
Fetch the own message and append us into the lift block right here.

130
11:34.340 --> 11:35.780
For example, I have a b.

131
11:36.860 --> 11:38.340
Let me show you how it works.

132
11:38.620 --> 11:38.980
Hi.

133
11:45.660 --> 11:46.140
Okay.

134
11:46.180 --> 11:47.140
Simple like that.

135
11:47.620 --> 11:54.100
Now, in order to do that, let me say right here we already have a scene function.

136
11:55.460 --> 12:04.940
Might be on top of that I will create another async function will be fetch message okay.

137
12:07.180 --> 12:08.860
Is that affects my state.

138
12:09.660 --> 12:11.420
My entire thing.

139
12:15.780 --> 12:22.900
Is to read okay and remove the body right here I will console.log check.

140
12:26.660 --> 12:31.140
And I will go back message over here.

141
12:31.140 --> 12:33.060
Let's say right here.

142
12:33.060 --> 12:35.580
We already got the.

143
12:38.100 --> 12:49.770
Network with the message with own data right now When we send a message successfully, we will call

144
12:49.770 --> 12:51.410
the message over here.

145
12:51.570 --> 12:53.130
Let's say we want.

146
13:00.330 --> 13:00.970
To send.

147
13:01.130 --> 13:06.570
Now you can say for now it will send a message successfully using the box.

148
13:06.570 --> 13:12.810
And after that we will retrieve a new message right here.

149
13:13.930 --> 13:15.450
And you can see.

150
13:18.090 --> 13:19.610
Inside here.

151
13:25.490 --> 13:26.810
We got a message.

152
13:30.210 --> 13:31.130
This blog.

153
13:36.650 --> 13:37.610
We need to.

154
13:41.130 --> 13:42.410
Respond to JSON.

155
13:43.290 --> 13:45.650
And right here I will console.log data.

156
13:46.210 --> 13:48.810
Okay, let's refresh again.

157
13:56.010 --> 13:56.570
Sir.

158
13:58.250 --> 13:59.210
Check data.

159
14:00.450 --> 14:00.970
Data.

160
14:06.490 --> 14:08.170
Right here you can see we already got.

161
14:08.210 --> 14:10.250
The data will be empty right now.

162
14:10.690 --> 14:11.250
Okay.

163
14:14.650 --> 14:17.610
Data will be the message, right?

164
14:18.170 --> 14:23.170
So right now I will create a message will be data.

165
14:23.210 --> 14:23.930
Dot data.

166
14:25.450 --> 14:26.570
This is the array.

167
14:27.010 --> 14:27.490
Right.

168
14:38.210 --> 14:42.490
Let's say now you can say we already got the message.

169
14:42.490 --> 14:44.400
side and my job.

170
14:44.640 --> 14:46.440
Amanda's into the team.

171
14:47.000 --> 14:49.160
So for that reason, it is okay.

172
14:49.720 --> 14:53.960
We will find the chat box.

173
14:56.320 --> 14:57.640
The box element.

174
14:58.840 --> 15:03.000
Get element by array with the array.

175
15:09.880 --> 15:13.720
And now we can check a little bit over here.

176
15:19.120 --> 15:31.040
So after last what we need to do we need to look into the message.

177
15:31.200 --> 15:31.800
Right.

178
15:39.680 --> 15:45.760
And for it Muscles from the butt end.

179
15:46.160 --> 15:48.640
We will create a base element.

180
15:50.200 --> 15:50.720
Right?

181
15:52.440 --> 15:54.760
Uh, actually right here.

182
15:55.600 --> 16:08.520
We can do create element new base document dot create element with the play tag and with a base element.

183
16:11.320 --> 16:18.200
I can use the text content with the message.

184
16:18.800 --> 16:21.400
The message right here is an object.

185
16:22.080 --> 16:22.640
Okay.

186
16:23.440 --> 16:26.760
So right now I will call the message dot.

187
16:29.360 --> 16:31.000
Dot name right.

188
16:31.960 --> 16:37.920
And message that message okay.

189
16:37.960 --> 16:45.750
The name is pretty bad, but, uh, I mean, you got the idea.

190
16:45.790 --> 16:57.550
Okay, so after that, we will look at us and we will create a better one, and we will append that

191
16:57.550 --> 16:58.670
into the chat box.

192
16:58.870 --> 16:59.310
Right.

193
17:00.150 --> 17:02.870
And then try with a B element.

194
17:03.630 --> 17:07.230
So we checked how normal JavaScript work.

195
17:07.910 --> 17:12.350
I think you already got that right.

196
17:14.470 --> 17:16.830
So now let me see fully.

197
17:16.830 --> 17:21.430
I will run and try and click on save.

198
17:21.870 --> 17:27.630
Now you can see we already have right.

199
17:28.670 --> 17:30.510
We already got that.

200
17:32.790 --> 17:38.430
And actually before that we should clean.

201
17:42.310 --> 17:42.750
Okay.

202
17:42.950 --> 17:43.230
So.

203
17:43.230 --> 17:43.710
Colin.

204
17:47.670 --> 17:48.230
I'm sorry.

205
17:50.350 --> 17:50.950
Colin.

206
17:51.310 --> 17:54.990
The chat box is still the same.

207
17:59.470 --> 17:59.910
Okay.

208
17:59.950 --> 18:01.070
So after that.

209
18:04.110 --> 18:05.070
We will.

210
18:07.350 --> 18:13.830
Let me move this thing outside function and move the chat box outside.

211
18:13.870 --> 18:14.270
Okay.

212
18:17.230 --> 18:21.350
And right here I will use the value equal.

213
18:26.910 --> 18:31.030
To the next video the test element dot enter.

214
18:31.230 --> 18:31.670
Okay.

215
18:32.030 --> 18:34.190
Let me say Sean.

216
18:34.990 --> 18:35.430
Hi.

217
18:36.190 --> 18:38.420
Let's say okay this will empower you.

218
18:38.420 --> 18:39.980
And it will show over here.

219
18:42.980 --> 18:46.020
And let me, uh, open the another thing.

220
18:51.140 --> 18:53.860
Let me remove the French message over here.

221
18:56.500 --> 18:58.180
Click refresh navigation.

222
18:59.020 --> 18:59.540
Okay.

223
19:02.500 --> 19:06.340
Right now I will use the height set.

224
19:06.940 --> 19:08.580
You can see right here we got.

225
19:09.380 --> 19:13.780
But in the another client we don't see the message right.

226
19:14.140 --> 19:17.340
How we can do that using the normal Adobe.

227
19:17.780 --> 19:22.020
Well in order to do that with the normal Adobe.

228
19:24.420 --> 19:30.020
We always need to send the request into the server.

229
19:30.220 --> 19:30.780
Right.

230
19:31.620 --> 19:35.420
We always need to send a request highly server.

231
19:36.060 --> 19:39.380
And you get a data.

232
19:41.860 --> 19:42.380
Okay.

233
19:42.380 --> 19:47.020
We always need to set sail and sail to gather data.

234
19:47.340 --> 20:01.020
So in order to do that inside the normal actually activity, we will be using the technique called calling.

235
20:01.820 --> 20:02.340
Okay.

236
20:02.700 --> 20:09.140
Let me show you right here I will give you the set interval.

237
20:10.020 --> 20:14.900
I will pass the first question over here with five second okay.

238
20:15.180 --> 20:32.420
It means after five second we will fetch the message and append us into the HTML.

239
20:34.020 --> 20:34.540
Okay.

240
20:34.580 --> 20:36.690
Only after five seconds.

241
20:37.650 --> 20:44.010
We will ask the server for new data again and again and again.

242
20:44.690 --> 20:46.250
Let me show you what I mean.

243
20:46.530 --> 20:49.930
For example, right now I will refresh and I will.

244
20:52.290 --> 20:57.250
Go to the network tab and right here will be also the network tab.

245
20:59.130 --> 21:00.610
When I travel.

246
21:03.770 --> 21:06.210
And I will click on save.

247
21:06.490 --> 21:10.130
Now you can see right here it also works.

248
21:10.170 --> 21:13.730
But let me travel very fast.

249
21:14.210 --> 21:16.330
Now you can say it not real time right.

250
21:17.170 --> 21:24.970
After five seconds we will send a request to retrieve a new data.

251
21:25.170 --> 21:25.650
Right?

252
21:25.690 --> 21:32.810
You can say every time after five seconds we will ask the server.

253
21:33.210 --> 21:33.890
You will say.

254
21:35.530 --> 21:39.650
And right now you can tell it's normal.

255
21:40.250 --> 21:45.650
It's totally okay, but it's not good at all.

256
21:46.170 --> 21:58.370
Because with this approach, we always fetch the data, even if the data doesn't change.

257
21:58.610 --> 22:05.570
You will see right here the data is still there, but you can see right here up to five seconds with

258
22:05.570 --> 22:06.930
an API.

259
22:07.450 --> 22:13.210
And it will clearly increase the latency.

260
22:14.050 --> 22:14.570
Okay.

261
22:15.010 --> 22:18.850
And the cost of your server.

262
22:19.490 --> 22:21.250
So it's not good at all right.

263
22:22.010 --> 22:30.610
So for that reason, in order to achieve the goals by rational communication we should use something

264
22:30.610 --> 22:33.490
called web sockets.