1
00:00:01,600 --> 00:00:02,160
Okay.

2
00:00:02,160 --> 00:00:03,920
So welcome back to this section.

3
00:00:03,960 --> 00:00:07,360
The very first thing we would like to do is just build the UI, right.

4
00:00:07,360 --> 00:00:12,200
So we would like to build some HTML and CSS so that we can get this output.

5
00:00:12,680 --> 00:00:17,720
So let's go ahead and first create a div which is going to be our chat container.

6
00:00:17,760 --> 00:00:23,400
So we're going to give this class so that we can really select this later and give it some styles.

7
00:00:23,440 --> 00:00:26,400
And then we would like to have our chat header right.

8
00:00:26,400 --> 00:00:32,840
Which is going to be this thing that you see which has some border radiuses which stands for really

9
00:00:32,840 --> 00:00:38,520
uh, rounded corners and some different, uh, background colors, things like that.

10
00:00:38,800 --> 00:00:46,120
And we're going to have our username container which is going to hold the username, the input to be

11
00:00:46,120 --> 00:00:48,280
able to update it and then a button.

12
00:00:48,280 --> 00:00:49,840
So let's create all of them.

13
00:00:49,840 --> 00:00:54,880
So we put an ID so that we can really select it with the JavaScript.

14
00:00:54,880 --> 00:00:55,400
Right.

15
00:00:55,440 --> 00:00:56,760
You can also put the class.

16
00:00:56,760 --> 00:00:58,560
But here I'm going with the ID.

17
00:00:58,840 --> 00:01:05,420
Then we have an input with the type being text id, being user input, and then the placeholder.

18
00:01:05,460 --> 00:01:07,500
Here it says new username.

19
00:01:07,500 --> 00:01:11,220
And let's go ahead and get a button that says update username.

20
00:01:15,100 --> 00:01:18,860
And then we just got a button that says update your username.

21
00:01:19,180 --> 00:01:23,620
Then below to it we would like to have the chat messages container.

22
00:01:23,780 --> 00:01:30,180
So basically this will contain all the messages and these system messages that we have right.

23
00:01:30,500 --> 00:01:36,620
And below to this we would like to have the chat input with an input as well as a button.

24
00:01:36,700 --> 00:01:39,860
So here it is going to be this section.

25
00:01:39,860 --> 00:01:42,420
So that's going to be it for the markup right.

26
00:01:42,460 --> 00:01:44,100
This is going to be our HTML.

27
00:01:44,340 --> 00:01:50,020
Now what do we want to do is just add some styling which is going to be under the head tag.

28
00:01:50,260 --> 00:01:52,020
So go above this title.

29
00:01:52,420 --> 00:01:58,820
We would like to create a styles or maybe just style up element right.

30
00:01:58,860 --> 00:01:59,780
Style tag.

31
00:01:59,900 --> 00:02:02,400
And since this is not a CSS CS course.

32
00:02:02,440 --> 00:02:05,080
Basically I will copy it and paste it.

33
00:02:05,080 --> 00:02:06,640
You can do the exact same thing.

34
00:02:06,680 --> 00:02:13,560
Just go into the GitHub repo that you can find from the description of this video and find this index.html

35
00:02:13,560 --> 00:02:14,080
file.

36
00:02:14,440 --> 00:02:20,760
Grab the styling, which is about 150 lines of code, and you can really just see what we are doing

37
00:02:20,760 --> 00:02:21,240
here.

38
00:02:21,480 --> 00:02:23,960
I'll just zoom out so that you can see it clearly.

39
00:02:25,040 --> 00:02:27,080
We are defining our colors.

40
00:02:27,080 --> 00:02:33,280
So if you just change this to be like these colors, to be green, pink, yellow, the entire view is

41
00:02:33,280 --> 00:02:34,600
going to change, right?

42
00:02:34,640 --> 00:02:36,000
The theme is going to change.

43
00:02:36,240 --> 00:02:44,880
And here we have setting some font, uh, font uh family here, margin paddings background colors or

44
00:02:44,920 --> 00:02:50,200
even just colors giving some border Radiuses box shadows, things like that.

45
00:02:50,200 --> 00:02:56,560
Here you can see like we are selecting all of them with the class names and even sometimes with IDs.

46
00:02:57,960 --> 00:03:00,000
Okay, so these are going to be for the styling.

47
00:03:00,040 --> 00:03:02,860
As I said this is not the focus of this tutorial.

48
00:03:03,180 --> 00:03:06,340
Um, so I will skip to explaining this.

49
00:03:06,660 --> 00:03:13,020
And the other thing we would like to do is import the scikit I o into this, uh, UI.

50
00:03:13,100 --> 00:03:13,700
Right?

51
00:03:13,740 --> 00:03:18,740
What do we want to do is just go into cdnjs and just say scikit io.

52
00:03:19,300 --> 00:03:19,500
Here.

53
00:03:19,500 --> 00:03:21,700
We can go ahead and grab the script.

54
00:03:21,740 --> 00:03:26,740
So here I'll just say copy the script tag and paste it below the title.

55
00:03:27,980 --> 00:03:28,300
Okay.

56
00:03:28,340 --> 00:03:34,100
So this will allow us to use scikit io in the, uh, JavaScript script that we're going to have.

57
00:03:34,380 --> 00:03:40,100
So just above the body, go ahead and create a script, uh, tag.

58
00:03:40,140 --> 00:03:43,740
And we'll be able to put our JavaScript code into here.

59
00:03:44,060 --> 00:03:47,340
So the first thing we would like to do is just get the scikit.

60
00:03:47,380 --> 00:03:50,780
And here we can, uh, how we can get this right.

61
00:03:50,820 --> 00:03:58,340
Let me just zoom in, just get our scikit, uh, instance so that we can really send events to our backend.

62
00:03:58,380 --> 00:03:58,940
Right.

63
00:03:58,980 --> 00:04:03,440
And here I'd like to just grab a couple of different, uh, elements.

64
00:04:03,560 --> 00:04:06,560
So here we would like to get the chat messages.

65
00:04:06,560 --> 00:04:10,920
We say document get element by ID chat messages.

66
00:04:10,960 --> 00:04:13,360
This is the ID we have given to it.

67
00:04:13,600 --> 00:04:15,840
Then we would like to get the message input.

68
00:04:15,880 --> 00:04:21,160
We would like to get the send button current username user input.

69
00:04:22,760 --> 00:04:26,200
And we would like to get the update username button.

70
00:04:26,200 --> 00:04:30,480
And we'll be calling all of them uh just in a second in the video.

71
00:04:30,960 --> 00:04:34,760
Now let's say we would like to get the current username.

72
00:04:35,040 --> 00:04:37,280
Let's say this is going to be a variable.

73
00:04:38,000 --> 00:04:43,920
And by default this is going to be an empty string because we can uh, will be updating this basically.

74
00:04:44,240 --> 00:04:48,880
And what we can do is just listen for new events as well.

75
00:04:48,880 --> 00:04:54,440
So here again we'll be using scikit on just like in the Python file.

76
00:04:54,480 --> 00:04:58,240
Whenever you are listening for something you'll be using this method.

77
00:04:58,720 --> 00:05:02,720
So here we say listen for the set username.

78
00:05:02,720 --> 00:05:07,100
Name event and we're going to get a data back.

79
00:05:07,100 --> 00:05:07,580
Right.

80
00:05:07,620 --> 00:05:10,860
So let's just wrap this into our function.

81
00:05:10,900 --> 00:05:12,460
This is going to be our argument.

82
00:05:12,500 --> 00:05:14,980
Now what is going to be this data.

83
00:05:15,020 --> 00:05:22,020
Well basically whatever you return from here it is this object right here you have the username.

84
00:05:22,020 --> 00:05:29,220
So that's why we can say something like data dot user name, which is going to be equal to our current

85
00:05:29,220 --> 00:05:30,620
username variable.

86
00:05:31,180 --> 00:05:36,900
So that's how you can really get the data out of the event right from the socket.

87
00:05:36,900 --> 00:05:45,020
And now that we got the current username we can update our uh like current username span, which is

88
00:05:45,020 --> 00:05:49,500
going to be this thing whenever you update your.

89
00:05:50,460 --> 00:05:51,820
Let me just change the color.

90
00:05:53,140 --> 00:05:53,420
Okay.

91
00:05:53,420 --> 00:05:58,580
So let's say you put your username, once you click to it it's going to go ahead and update this uh

92
00:05:58,820 --> 00:06:09,230
span let's say current username name span, the text content is going to be equal to, let's say, your

93
00:06:09,470 --> 00:06:12,670
user name and the dynamic value.

94
00:06:12,910 --> 00:06:14,310
So current username.

95
00:06:14,750 --> 00:06:15,070
Okay.

96
00:06:15,110 --> 00:06:18,390
So this is going to be our first event that we are listening to.

97
00:06:18,590 --> 00:06:24,270
Then the other one is going to be whenever someone joins right let's say socket dot on.

98
00:06:24,270 --> 00:06:30,110
And we can shrink the left hand side we'll say user underscore join.

99
00:06:30,430 --> 00:06:33,310
In this case again we're going to get some data back.

100
00:06:33,550 --> 00:06:37,510
And we would like to say uh add new message.

101
00:06:37,750 --> 00:06:39,270
I'll just say add message.

102
00:06:39,510 --> 00:06:43,190
And we would like to say the name of the user name.

103
00:06:43,190 --> 00:06:43,550
Right.

104
00:06:43,590 --> 00:06:44,910
Who has joined.

105
00:06:45,030 --> 00:06:55,590
So I'll put back text and I will say uh data dot username joined the chat.

106
00:06:55,590 --> 00:06:58,550
And this message is coming from the system right.

107
00:06:58,590 --> 00:07:00,230
This is a system message.

108
00:07:00,430 --> 00:07:03,910
And this is the method that we're going to create just in a second.

109
00:07:04,010 --> 00:07:07,410
and it's going to give this kind of an output right here.

110
00:07:07,410 --> 00:07:08,930
It'll say username.

111
00:07:09,290 --> 00:07:10,610
Uh, join the chat.

112
00:07:10,610 --> 00:07:11,930
This is what we are building.

113
00:07:11,930 --> 00:07:16,970
Let's do the same thing for the left chat I will duplicate this here.

114
00:07:16,970 --> 00:07:23,850
We'll say if the event is user left we can just change the text.

115
00:07:23,890 --> 00:07:27,010
We'll just say this user left the chat.

116
00:07:27,090 --> 00:07:30,490
And again this is a message coming from the system.

117
00:07:30,490 --> 00:07:33,290
So if it is system we're going to see this kind of message.

118
00:07:33,290 --> 00:07:39,370
But if it is user we will see this kind of a message element okay.

119
00:07:39,410 --> 00:07:43,490
So the other event let's just listen for the new message.

120
00:07:43,650 --> 00:07:48,890
I think we can again duplicate this give a little bit of space.

121
00:07:49,210 --> 00:07:57,290
We will say if the event name is equal to new message we're going to get the data which is the new message

122
00:07:57,290 --> 00:07:57,690
data.

123
00:07:57,730 --> 00:07:58,210
Right.

124
00:07:58,250 --> 00:08:04,210
And here we would like to just send uh, let's just say the message itself.

125
00:08:04,630 --> 00:08:07,230
we'll say data dot message.

126
00:08:08,430 --> 00:08:10,950
This is a user message, right?

127
00:08:10,990 --> 00:08:12,550
It is not a system message.

128
00:08:12,710 --> 00:08:22,870
And the username let's say data dot username as well as the avatar so that we can show the.

129
00:08:22,910 --> 00:08:26,510
Avatar of the user as well as the username.

130
00:08:27,070 --> 00:08:30,030
And if you are wondering how can we grab those.

131
00:08:30,070 --> 00:08:34,950
Well basically this is what we are returning the username avatar.

132
00:08:34,950 --> 00:08:35,990
And then the message.

133
00:08:36,230 --> 00:08:38,510
Which is our data object.

134
00:08:39,230 --> 00:08:41,710
Okay, I hope this makes sense at this point.

135
00:08:42,910 --> 00:08:46,390
Now the I think very last one that we're going to be listening.

136
00:08:46,430 --> 00:08:49,190
To is going to be the username updated.

137
00:08:49,910 --> 00:08:53,110
So I will just go ahead maybe type this out or.

138
00:08:53,150 --> 00:08:57,830
Maybe let's just duplicate it and we can update it on top of it.

139
00:08:58,190 --> 00:09:00,270
So scikit dot on let's say.

140
00:09:00,310 --> 00:09:02,870
Username underscore updated.

141
00:09:03,190 --> 00:09:05,450
We're going to get some data back obviously.

142
00:09:05,690 --> 00:09:10,010
And you can like wrap this with a parentheses.

143
00:09:10,010 --> 00:09:13,770
Or you can just don't wrap it because it is only one argument.

144
00:09:13,770 --> 00:09:15,090
That's completely fine.

145
00:09:15,290 --> 00:09:18,170
Um, here how we can just leave it like this.

146
00:09:18,210 --> 00:09:25,490
And again, we will add a message to the user interface where it's going to say something like this

147
00:09:25,490 --> 00:09:29,570
user changed their name to this new user name.

148
00:09:29,610 --> 00:09:30,090
Right.

149
00:09:31,130 --> 00:09:34,930
So we will say if and first let's just update this.

150
00:09:34,930 --> 00:09:38,650
By the way I'll just make this to be backtick.

151
00:09:38,850 --> 00:09:50,890
And I will say data dot old username changed their name to this new username.

152
00:09:53,130 --> 00:09:57,650
And let's say data dot new underscore user name.

153
00:09:57,650 --> 00:10:03,650
And this is a system message so that we can really see it in this tiny gray text.

154
00:10:04,530 --> 00:10:07,990
And now here there is an edge case that we need to keep track of.

155
00:10:08,030 --> 00:10:12,990
So if we are changing our name so we'll just say data dot old username.

156
00:10:12,990 --> 00:10:19,150
If it is equal to the current username then that means we are just updating our name so that we.

157
00:10:19,190 --> 00:10:22,110
Now we need to update the UI as well depending on this.

158
00:10:22,150 --> 00:10:31,550
So we will say current username is going to be equal to let's say data dot new username.

159
00:10:31,670 --> 00:10:34,430
And we would like to update the span with it.

160
00:10:34,430 --> 00:10:41,990
Let's say current username dot uh current username span dot text content is going to be equal to your

161
00:10:41,990 --> 00:10:42,910
username.

162
00:10:42,910 --> 00:10:45,990
And then whatever the new username is right.

163
00:10:46,030 --> 00:10:49,950
So this is going to happen when user types their name in here.

164
00:10:49,950 --> 00:10:51,390
And click to this button.

165
00:10:51,390 --> 00:10:53,870
It will update this with the new name.

166
00:10:53,910 --> 00:11:01,110
And I think I have explained it wrong in the previously where here I said this is going to be the case

167
00:11:01,110 --> 00:11:06,450
when we got this event, but this is not really whenever you join into the into the application.

168
00:11:06,450 --> 00:11:07,530
This is going to run.

169
00:11:07,570 --> 00:11:08,050
Okay.

170
00:11:08,090 --> 00:11:13,370
So when you click to the update username button this will actually run.

171
00:11:13,530 --> 00:11:20,690
And when you just join to the application this will run automatically and update the uh update the span.

172
00:11:20,730 --> 00:11:26,650
I hope this makes sense in this case because if you remember, this is going to be called whenever you

173
00:11:26,650 --> 00:11:31,250
join right in the connection, uh, event.

174
00:11:31,290 --> 00:11:38,850
Whenever you connect, it's going to create a username by default and just set it to your username.

175
00:11:39,530 --> 00:11:40,010
Okay.

176
00:11:40,330 --> 00:11:43,330
So these are going to be all the events that we're going to be listening to.

177
00:11:43,370 --> 00:11:50,130
And whenever we got those events we would like to update the UI and even maybe update some different

178
00:11:50,130 --> 00:11:51,610
parts of the UI as well.

179
00:11:52,010 --> 00:11:56,330
So now we have listened for multiple different events from the client.

180
00:11:56,570 --> 00:12:00,410
Now it is time to send some events to our backend, right?

181
00:12:00,690 --> 00:12:02,770
So let's try to do it.

182
00:12:02,770 --> 00:12:09,070
Basically, I will just go ahead create a function that is going to be called as send message.

183
00:12:09,630 --> 00:12:15,950
And for now, let's just leave it empty, and then we'll have one more function that says add message,

184
00:12:15,950 --> 00:12:18,150
which is something that we have created already.

185
00:12:18,190 --> 00:12:18,670
Right?

186
00:12:18,910 --> 00:12:23,870
And let's just try to see how we can send and send a message.

187
00:12:23,910 --> 00:12:24,470
Right.

188
00:12:24,510 --> 00:12:29,630
We will say if send button, let's just first add an event listener to it.

189
00:12:29,790 --> 00:12:37,310
Let's say if we got a click event, we would like to call the send message function okay.

190
00:12:37,550 --> 00:12:41,750
And whenever we type something in into the message input.

191
00:12:41,750 --> 00:12:50,030
So here I'll just say um message input dot add event listener where it is key press or key down.

192
00:12:50,430 --> 00:12:52,670
We would like to run this function.

193
00:12:53,870 --> 00:12:55,310
We're going to get the event.

194
00:12:55,510 --> 00:13:05,190
And here we'll just go ahead and say if E dot key is equal to the enter key we would like to basically

195
00:13:05,190 --> 00:13:09,530
call the send message function okay.

196
00:13:09,810 --> 00:13:13,210
And when we say update the username.

197
00:13:13,450 --> 00:13:15,770
So let's say update username button.

198
00:13:16,010 --> 00:13:17,330
Add event listener.

199
00:13:17,370 --> 00:13:20,690
When we click to it we would like to run this function.

200
00:13:20,690 --> 00:13:25,290
Let's just say this is going to be update user name.

201
00:13:25,690 --> 00:13:27,770
And let's create that function as well.

202
00:13:34,770 --> 00:13:35,130
Okay.

203
00:13:35,130 --> 00:13:38,810
So let's just save and we will build these functions.

204
00:13:39,290 --> 00:13:42,490
So let's first build the send message function.

205
00:13:42,890 --> 00:13:51,010
What do we want to do is first get the message here we'll say message input dot value dot.

206
00:13:51,250 --> 00:13:54,050
Um wait why don't we get the value.

207
00:13:54,250 --> 00:13:54,650
Um.

208
00:13:57,290 --> 00:14:01,170
Like I think we should get the auto suggestion, but let's just go with it.

209
00:14:01,210 --> 00:14:03,450
We'll say call the trim method.

210
00:14:04,210 --> 00:14:06,650
So we got the message that user typed in.

211
00:14:06,750 --> 00:14:10,670
We'll say if there is a new message, we'd like to say.

212
00:14:10,710 --> 00:14:17,110
Scikit image, where we send an event which is going to be called as send message and we will send the

213
00:14:17,110 --> 00:14:19,270
message to the backend.

214
00:14:19,270 --> 00:14:23,870
And now that we have sent the message, let's clear the input to be an empty string.

215
00:14:24,070 --> 00:14:27,990
And let's do the same thing for the update username.

216
00:14:28,030 --> 00:14:29,070
We'll just go into it.

217
00:14:29,070 --> 00:14:30,390
Let's scroll a little bit.

218
00:14:30,630 --> 00:14:35,510
Um, I will say first let's get the new username from the input.

219
00:14:36,630 --> 00:14:39,630
So username input value dot trim.

220
00:14:39,630 --> 00:14:47,790
And we'll say if there is a new username and we can just say if new username is not equal to the current

221
00:14:47,790 --> 00:14:48,510
username.

222
00:14:48,830 --> 00:14:56,430
In this case we would like to emit this event called update underscore username.

223
00:14:56,430 --> 00:15:00,910
And we can put the username to be new username right.

224
00:15:00,950 --> 00:15:06,150
And we'll say username input dot value is going to be an empty string.

225
00:15:06,150 --> 00:15:10,930
So that we can really just reset the state in the UI.

226
00:15:11,610 --> 00:15:11,930
Okay.

227
00:15:11,970 --> 00:15:15,370
So the very last function we will need is to update the UI.

228
00:15:16,610 --> 00:15:22,290
So this is going to be a little bit longer function because we would like to create HTML elements and

229
00:15:22,290 --> 00:15:23,330
put it in the UI.

230
00:15:23,570 --> 00:15:27,730
Um so to say like put it in the UI dynamically.

231
00:15:27,770 --> 00:15:28,210
Right.

232
00:15:28,490 --> 00:15:32,210
So this is going to be taking a couple of different arguments.

233
00:15:32,690 --> 00:15:34,490
First one is going to be the message.

234
00:15:34,530 --> 00:15:37,770
Then the type if it is system or user.

235
00:15:38,010 --> 00:15:44,050
And we'll get the username username as well as the avatar.

236
00:15:44,370 --> 00:15:48,730
Now this could be an empty string if it is not being passed right.

237
00:15:48,770 --> 00:15:55,370
And same for the avatar because if the system is sending the message, they are not going to have an

238
00:15:55,370 --> 00:15:57,970
avatar or username, right?

239
00:15:58,290 --> 00:16:03,370
So system send the message they don't have an avatar or username, they just have the message.

240
00:16:04,250 --> 00:16:04,610
Okay.

241
00:16:04,650 --> 00:16:06,650
So let's try to create this function.

242
00:16:06,810 --> 00:16:11,070
First we would like to like to create a message element which is going to be a div.

243
00:16:11,070 --> 00:16:13,910
So we say create an element that is div.

244
00:16:14,110 --> 00:16:21,670
And we would like to add the class name to be message so that we can really like uh have it looking

245
00:16:21,710 --> 00:16:26,390
a bit clean and we need to keep track of the type.

246
00:16:26,390 --> 00:16:36,350
So we'll say if type is equal to user and do we ever send the user in the add message function.

247
00:16:36,350 --> 00:16:37,670
Let's just check for it.

248
00:16:39,150 --> 00:16:41,030
So here this is type of system.

249
00:16:41,030 --> 00:16:43,230
This is user okay.

250
00:16:43,230 --> 00:16:47,670
So we'll just say if it is type is equal to user run this.

251
00:16:47,710 --> 00:16:51,030
And if it is not then this is the system case.

252
00:16:51,070 --> 00:16:53,630
Let's first handle the type being user.

253
00:16:53,870 --> 00:16:57,670
Now we'll just check if we are sending the message.

254
00:16:57,670 --> 00:17:04,310
So we'll just say if send message and we can say if the user name is equal to the current user name,

255
00:17:04,310 --> 00:17:11,200
that means we sent the message so we can add a class name to our message element, which is going to

256
00:17:11,200 --> 00:17:12,080
be sent.

257
00:17:12,520 --> 00:17:16,320
So if you have the send class, it is going to be on the right hand side.

258
00:17:16,320 --> 00:17:19,640
And if you don't have your it's going to be on the left hand side.

259
00:17:19,800 --> 00:17:23,440
And you can take a look at this class by going to the styles.

260
00:17:25,000 --> 00:17:27,560
Let's just search for dot send.

261
00:17:28,040 --> 00:17:28,360
Okay.

262
00:17:28,400 --> 00:17:31,600
Here you can see if we got the send class.

263
00:17:31,640 --> 00:17:37,800
The flex direction is going to be ro reverse which means it would be on the right hand side.

264
00:17:37,840 --> 00:17:38,320
Right.

265
00:17:38,760 --> 00:17:40,000
Okay, I hope this makes sense.

266
00:17:40,000 --> 00:17:43,080
Let's go ahead into here into the if check.

267
00:17:43,360 --> 00:17:46,240
We would like to now create an avatar image.

268
00:17:46,280 --> 00:17:46,720
Right.

269
00:17:47,880 --> 00:17:52,200
So here let's say create an element which is going to be an image.

270
00:17:52,200 --> 00:17:53,720
Let's give a little bit space.

271
00:17:53,720 --> 00:17:58,960
And we'll take to give the source to it which is going to be the avatar right.

272
00:17:59,000 --> 00:18:03,680
Then we would like to append this as a child to our message element.

273
00:18:04,040 --> 00:18:07,640
Then we would like to create the message content.

274
00:18:07,680 --> 00:18:10,540
Right now we'll say content dev.

275
00:18:10,580 --> 00:18:15,620
Again, we're creating a div with a class name being message content.

276
00:18:15,820 --> 00:18:18,460
Then we'd like to create the username div.

277
00:18:20,220 --> 00:18:20,500
Okay.

278
00:18:20,580 --> 00:18:24,300
So we're going to give the class name of being message username.

279
00:18:24,340 --> 00:18:28,740
And then the username content is going to be into it.

280
00:18:29,140 --> 00:18:34,380
Then content div will be updated with this uh username div.

281
00:18:34,740 --> 00:18:36,860
Then let's create the message text.

282
00:18:37,740 --> 00:18:39,780
So here I'm just copying and pasting.

283
00:18:39,780 --> 00:18:44,580
I hope you don't mind it because like I'll just walk you through it line by line, right?

284
00:18:45,180 --> 00:18:49,740
We don't really need, uh, we don't need to waste any time by typing all this.

285
00:18:50,060 --> 00:18:54,460
And we'll again update the text content with the new message.

286
00:18:54,620 --> 00:18:56,940
And let's just say append child.

287
00:18:56,940 --> 00:19:02,500
And finally into this message element we will append everything that we have created which is going

288
00:19:02,500 --> 00:19:03,980
to be the content div.

289
00:19:04,340 --> 00:19:09,160
And finally in the else case we will say Are.

290
00:19:09,160 --> 00:19:13,400
The class name is going to be system message so that it is looking like this.

291
00:19:13,440 --> 00:19:17,840
We have the styling for it and just put the text content.

292
00:19:18,120 --> 00:19:18,600
Okay.

293
00:19:18,640 --> 00:19:26,560
After this if and else we will go ahead say chat messages append child to this message element that

294
00:19:26,560 --> 00:19:27,800
we have created.

295
00:19:28,120 --> 00:19:29,800
So that is going to update the UI.

296
00:19:30,000 --> 00:19:35,080
And once you send the message you want this to scroll to the bottom right.

297
00:19:35,120 --> 00:19:37,320
So let's say you have a bunch of different messages.

298
00:19:37,320 --> 00:19:41,320
Whenever you send new one it should automatically scroll for you.

299
00:19:41,840 --> 00:19:46,240
And we can do it by writing a single line of code.

300
00:19:46,400 --> 00:19:54,200
Chat messages dot scroll top is going to be equal to chat messages dot scroll height.

301
00:19:54,760 --> 00:19:57,800
So that's going to be it for the entire file.

302
00:19:57,800 --> 00:19:59,880
And let's just try to test this out.

303
00:20:00,280 --> 00:20:05,840
Let's go ahead kill this and run this once again which is going to be our app.py file.

304
00:20:06,280 --> 00:20:07,160
Click to it.

305
00:20:07,440 --> 00:20:10,700
And here we can see Let's just delete this h1.

306
00:20:10,700 --> 00:20:12,020
I think we forgot.

307
00:20:14,060 --> 00:20:17,020
Just go above delete this save.

308
00:20:17,740 --> 00:20:18,460
Refresh.

309
00:20:18,980 --> 00:20:19,380
Okay.

310
00:20:19,420 --> 00:20:22,020
We need to kill the server and run this again.

311
00:20:24,300 --> 00:20:25,220
Let's refresh.

312
00:20:25,380 --> 00:20:29,500
And here we can see this is what we got since we just joined here.

313
00:20:29,500 --> 00:20:35,260
It says this user joined the chat and we can see our username span is being updated.

314
00:20:35,300 --> 00:20:36,580
Right I'll go ahead.

315
00:20:36,620 --> 00:20:37,580
Copy this.

316
00:20:37,660 --> 00:20:39,780
Save it into a different tab.

317
00:20:40,300 --> 00:20:43,420
And this is the username 7622.

318
00:20:43,460 --> 00:20:46,980
And this user can also see that user just joined the chat.

319
00:20:47,020 --> 00:20:51,020
And let me just put them side by side so that we can see it in real time.

320
00:20:51,020 --> 00:20:51,340
Okay.

321
00:20:51,380 --> 00:20:53,020
So here I'll just say hey.

322
00:20:53,580 --> 00:20:58,860
And since this message is sent from me, I can see it on the right hand side and this user can see it

323
00:20:58,860 --> 00:21:00,060
on the left hand side.

324
00:21:00,180 --> 00:21:01,340
So let's say hi.

325
00:21:02,140 --> 00:21:05,580
How is it going.

326
00:21:07,020 --> 00:21:07,420
Like here.

327
00:21:07,420 --> 00:21:10,920
You can see it is scrolling for us by default, right?

328
00:21:10,960 --> 00:21:15,480
And this is what we have done with that single line of code at the end.

329
00:21:17,120 --> 00:21:19,160
It is this one.

330
00:21:20,200 --> 00:21:20,680
Okay.

331
00:21:20,880 --> 00:21:23,880
Now let's try to update our username.

332
00:21:24,800 --> 00:21:30,720
Here I'll just go ahead and say my username is going to be John Doe and update it.

333
00:21:30,760 --> 00:21:34,040
Here we can see everyone is just being notified right.

334
00:21:34,080 --> 00:21:36,480
And let's just send a new message.

335
00:21:37,600 --> 00:21:41,080
It should have our new name in both cases.

336
00:21:41,200 --> 00:21:42,560
And we can do the same thing.

337
00:21:42,560 --> 00:21:43,160
Really?

338
00:21:43,400 --> 00:21:46,120
Um, let's just say Bob Doe.

339
00:21:47,720 --> 00:21:50,080
Hey, it just works as expected.

340
00:21:50,080 --> 00:21:54,600
And this can work even if you create multiple different tabs, right?

341
00:21:55,440 --> 00:21:57,760
Everyone can just see those messages.

342
00:21:57,920 --> 00:21:59,800
So that's going to be it for the application.

343
00:21:59,800 --> 00:22:02,080
In the next section we would like to deploy this.

344
00:22:02,120 --> 00:22:03,600
I'll see you in the next one.

345
00:22:03,600 --> 00:22:04,960
And I think I just forgot.

346
00:22:05,000 --> 00:22:09,360
But once you leave it you're going to get the left the chat message as well.

347
00:22:09,360 --> 00:22:10,280
So it is working.

348
00:22:10,280 --> 00:22:11,160
No worries.