1
00:00:08,420 --> 00:00:09,310
It's about everyone.

2
00:00:09,310 --> 00:00:12,200
JOHNNY B who with the slopes dot com Welcome back.

3
00:00:12,200 --> 00:00:18,520
And this lesson we're going to add one more cool feature which is how to know when other people are

4
00:00:18,520 --> 00:00:19,150
chatting.

5
00:00:19,210 --> 00:00:19,440
Right.

6
00:00:19,450 --> 00:00:22,580
So I mean that's a pretty pretty useful thing to know.

7
00:00:22,590 --> 00:00:27,500
We're going to do is we're going to start out here and our main story board here in our chat the sea.

8
00:00:27,520 --> 00:00:33,210
We are going to add a label right down here as well we've been reserving that space for.

9
00:00:33,430 --> 00:00:42,410
I'm going to search for a label here in Dragon in.

10
00:00:42,830 --> 00:00:50,810
And we are going to change its color to a light gray light gray color right here.

11
00:00:50,840 --> 00:01:00,470
The font is going to be custom Helvetica new We're going to drop its size down to about 14.

12
00:01:00,470 --> 00:01:02,780
I think that will look good.

13
00:01:02,780 --> 00:01:03,130
All right.

14
00:01:03,140 --> 00:01:07,500
So then let's go ahead and constrain it.

15
00:01:07,840 --> 00:01:14,560
I'm just going to go eight from the left with no constraint with no margins.

16
00:01:14,840 --> 00:01:23,410
And then about four from the message box here we're going to do that and see how that looks.

17
00:01:23,420 --> 00:01:26,640
I think that looks pretty good maybe we can move it up a little bit more.

18
00:01:26,830 --> 00:01:34,340
It's like the label go to the inspector and bottom space two five maybe six.

19
00:01:34,340 --> 00:01:35,390
See how that looks.

20
00:01:35,390 --> 00:01:36,530
It looks pretty good.

21
00:01:36,970 --> 00:01:37,360
Ready.

22
00:01:37,370 --> 00:01:42,740
And then I'm actually going to just remove the text from it.

23
00:01:42,740 --> 00:01:43,250
All right.

24
00:01:43,370 --> 00:01:45,180
So we know it's there.

25
00:01:45,260 --> 00:01:45,500
Oh wait.

26
00:01:45,500 --> 00:01:48,090
First let's go ahead and at our outlet for it.

27
00:01:48,140 --> 00:01:52,050
So I'm going to hold the option and click on the chat Visi

28
00:01:58,030 --> 00:02:02,600
select the label and add our outlet.

29
00:02:03,010 --> 00:02:08,180
And this is going to be called typing users label.

30
00:02:08,300 --> 00:02:10,260
I'm going to say connect.

31
00:02:10,630 --> 00:02:16,960
And so this is the label that is going to say you know when your friend Sarah is typing a message it

32
00:02:16,960 --> 00:02:20,560
will show up on your screen saying Sarah is typing.

33
00:02:20,650 --> 00:02:25,750
And then if she deletes everything that she was about to say then it'll just go back to being a blank

34
00:02:25,750 --> 00:02:26,290
string.

35
00:02:26,410 --> 00:02:26,860
All right.

36
00:02:27,070 --> 00:02:30,000
So let's figure out how we're going to do this.

37
00:02:30,010 --> 00:02:32,500
So obviously this is going to be handled through sockets right.

38
00:02:32,500 --> 00:02:36,340
Because there's going to be some real time information that's going back and forth.

39
00:02:36,340 --> 00:02:44,990
So if we open up our API code well you'll see here is this section right here it listens for users typing

40
00:02:45,430 --> 00:02:51,070
and up here we have ourselves a dictionary called typing users.

41
00:02:51,100 --> 00:02:51,740
OK.

42
00:02:52,360 --> 00:03:00,910
So here we have two client on's one is listening for a start type event and the other is listening for

43
00:03:00,910 --> 00:03:02,830
a stop type event.

44
00:03:03,160 --> 00:03:03,400
All right.

45
00:03:03,400 --> 00:03:11,530
And it expects as parameters a user name and a channel ID and what it does is it when a user starts

46
00:03:11,530 --> 00:03:12,430
to type.

47
00:03:12,430 --> 00:03:22,480
This method is called and a dictionary item is added to typing users with the key being the users name

48
00:03:22,810 --> 00:03:25,460
and the value being the channel ID.

49
00:03:25,540 --> 00:03:32,620
And then when the user stops typing whether they delete everything or they send the message then the

50
00:03:32,620 --> 00:03:34,820
stop type event is called.

51
00:03:34,900 --> 00:03:40,790
At which point that user name is removed from the typing user's dictionary.

52
00:03:41,020 --> 00:03:49,690
And so in both cases the typing user's dictionary is returned back to us the back to us the user.

53
00:03:49,690 --> 00:03:50,190
All right.

54
00:03:50,470 --> 00:03:57,250
So that's how it kind of works on the API end and how we're going to do it on our end and the client

55
00:03:57,520 --> 00:04:07,330
is going to create a new function our socket service that is going to be listening for that that typing

56
00:04:07,330 --> 00:04:11,890
uses dictionary coming back to us and then we're going to take that typing uses a dictionary and we're

57
00:04:11,890 --> 00:04:18,760
going to pass it in a closure back to our live chat B.S. where we're going to do some logic to decide

58
00:04:19,210 --> 00:04:23,890
whether we're going to display who was typing and how the verbiage is.

59
00:04:23,890 --> 00:04:29,260
Because if you have one person typing then you would say Joe is typing but if multiple people are typing

60
00:04:29,260 --> 00:04:33,620
you'll say Joe and Sally are tap are typing right.

61
00:04:33,670 --> 00:04:35,570
So let's get to it.

62
00:04:35,860 --> 00:04:38,830
This function itself is pretty simple.

63
00:04:38,830 --> 00:04:44,340
We're going to say get Taiping users.

64
00:04:45,160 --> 00:04:51,610
But the tough part is we're going to introduce here a new completion handler.

65
00:04:51,610 --> 00:05:00,330
All right so when I say underscore completion handler I'm going to say at escaping.

66
00:05:00,490 --> 00:05:01,210
So far so good.

67
00:05:01,210 --> 00:05:10,750
This is what we've been seeing before but this time we are going to be passing into the closure a variable

68
00:05:10,750 --> 00:05:14,450
called Taiping users.

69
00:05:15,080 --> 00:05:21,450
That is of type it's going to be a dictionary of string and string.

70
00:05:22,000 --> 00:05:22,470
OK.

71
00:05:22,540 --> 00:05:26,440
And then we are returning void

72
00:05:29,110 --> 00:05:29,650
OK.

73
00:05:29,870 --> 00:05:32,440
So let's talk a little bit about this.

74
00:05:32,540 --> 00:05:40,920
If we look at our other I'm going to copy this right here and let's go look at our constants and to

75
00:05:40,980 --> 00:05:43,000
do where you bet.

76
00:05:43,110 --> 00:05:43,910
Right.

77
00:05:44,480 --> 00:05:48,150
So this is the cushion Heller that we've been using right.

78
00:05:48,350 --> 00:05:56,290
We have we're passing into the closure a variable called success and that is a Boolean right.

79
00:05:56,600 --> 00:05:57,890
So this isn't too different.

80
00:05:57,890 --> 00:05:59,130
We're just calling it something different.

81
00:05:59,130 --> 00:06:02,310
Typing users and then we're passing in a dictionary.

82
00:06:02,310 --> 00:06:02,870
All right.

83
00:06:03,050 --> 00:06:05,760
And then let's talk about how.

84
00:06:06,020 --> 00:06:09,970
Let's say in the chat VC anywhere.

85
00:06:09,980 --> 00:06:13,150
Let's see if we can find one that uses the closures.

86
00:06:13,150 --> 00:06:15,090
So for success.

87
00:06:15,250 --> 00:06:15,520
OK.

88
00:06:15,530 --> 00:06:22,490
So here what we're doing is we're not the completion handler helps us to know whether it was successful

89
00:06:22,490 --> 00:06:30,000
because we pass as a variable into the closure something here we're doing the same thing.

90
00:06:30,110 --> 00:06:35,010
Instead though we are just passing a dictionary in the closure.

91
00:06:35,180 --> 00:06:35,480
All right.

92
00:06:35,510 --> 00:06:37,890
So hopefully that makes a little bit of sense.

93
00:06:38,480 --> 00:06:46,780
And so what we're going to do is we're in a C socket dot on and we want the event with the callback.

94
00:06:46,970 --> 00:07:03,260
So the event is called using or a user user typing come on user type being update and the callback press

95
00:07:03,350 --> 00:07:06,890
enter and then we have our array.

96
00:07:06,910 --> 00:07:11,290
So I'm going to call this data array and then our socket the meter.

97
00:07:11,500 --> 00:07:14,250
OK then this go to our code here.

98
00:07:14,280 --> 00:07:15,980
Press Enter to remove it.

99
00:07:16,460 --> 00:07:24,320
And in this case there will only ever be one thing in the data array.

100
00:07:24,410 --> 00:07:26,900
And that's our dictionary of typing users are.

101
00:07:26,960 --> 00:07:28,450
So we don't have to do a whole lot of parsing.

102
00:07:28,460 --> 00:07:29,410
So that's kind of nice.

103
00:07:29,420 --> 00:07:36,110
We're just going to say Card let Taiping users equal data re.

104
00:07:36,500 --> 00:07:43,880
And we're just getting the truth from it and say as and this time it's going to be a dictionary of string

105
00:07:44,350 --> 00:07:45,840
and string.

106
00:07:46,130 --> 00:07:48,650
Else return.

107
00:07:49,220 --> 00:07:55,210
OK so now we have our dictionary and this could be any number of people.

108
00:07:55,520 --> 00:08:02,510
And each entry in the dictionary is going to be a key value pair where the key is the user's name and

109
00:08:02,510 --> 00:08:06,450
the value is the channel ID from which they began typing.

110
00:08:06,530 --> 00:08:07,130
All right.

111
00:08:07,370 --> 00:08:15,890
So then we're going to pass into our completion handler this dictionary of typing users.

112
00:08:15,890 --> 00:08:21,200
All right so we are calling our completion Hendler and we're passing into it this dictionary of typing

113
00:08:21,200 --> 00:08:22,040
users.

114
00:08:22,040 --> 00:08:31,940
Then when we come over into our channel or our chat Visi and right here and get message we say socket

115
00:08:32,090 --> 00:08:40,250
service instance start get Taiping users and we have a completion handler which instead of like all

116
00:08:40,250 --> 00:08:45,020
of the other times that we've been working with our completion handler we are going to be getting a

117
00:08:45,020 --> 00:08:45,670
boolean.

118
00:08:45,710 --> 00:08:54,240
This time we are getting a dictionary of string and string which we are calling Taiping users.

119
00:08:54,570 --> 00:08:55,370
All right.

120
00:08:55,640 --> 00:08:56,370
So now what.

121
00:08:56,390 --> 00:09:04,460
Now we have a dictionary of users and we need to figure out which ones we are going to display and what

122
00:09:04,460 --> 00:09:06,430
the verbiage is.

123
00:09:06,440 --> 00:09:10,640
All right so first off we're going to need to know whether they are in the right channel.

124
00:09:10,640 --> 00:09:13,430
All right so we're going to get ourselves a channel.

125
00:09:13,430 --> 00:09:27,020
Do you want to say Garlett channel IDM equal to message service instance dot Chan or selected channel

126
00:09:27,020 --> 00:09:28,830
dot ID.

127
00:09:29,450 --> 00:09:33,620
Else you are going to return.

128
00:09:34,290 --> 00:09:35,050
OK.

129
00:09:35,240 --> 00:09:39,090
So if we don't even have a look the channel will just going to exit out of this.

130
00:09:39,140 --> 00:09:44,150
Now we're going to say our names is equal to an empty string.

131
00:09:44,630 --> 00:09:47,390
And this is the variable that's going to hold the names of who is typing.

132
00:09:47,390 --> 00:09:47,790
All right.

133
00:09:47,900 --> 00:09:52,520
So we're going to start out as an empty string then we're going to need to know how many people are

134
00:09:52,520 --> 00:09:55,310
typing speaking the number of diapers.

135
00:09:55,540 --> 00:10:02,060
And we're going to start at zero and then we are going to need to look through the dictionary and to

136
00:10:02,060 --> 00:10:03,060
do that.

137
00:10:03,170 --> 00:10:04,900
What you do you say for.

138
00:10:05,390 --> 00:10:12,270
And then you say the key is how you sue typing user.

139
00:10:12,560 --> 00:10:22,700
And then the value is channel in typing users so looping through each dictionary and we can then access

140
00:10:23,060 --> 00:10:26,000
have access to the key and the value right here.

141
00:10:26,270 --> 00:10:31,960
So we're going to say we want to know first off we don't want to display our own name right.

142
00:10:32,130 --> 00:10:40,050
Because when we when we do the mid we're also whenever we type we're also sending to the API emit saying

143
00:10:40,050 --> 00:10:42,550
hey someone's typing it just so happens to be us.

144
00:10:42,570 --> 00:10:46,350
So here we're going to have to do that check to make sure that we're not displaying our own name.

145
00:10:46,360 --> 00:10:57,090
It's her first going to say if the typing user is not us so does not equal self or does not equal user

146
00:10:57,660 --> 00:11:01,990
data service instance that name.

147
00:11:02,010 --> 00:11:11,410
So if it's not us and the channel that we're in is the channel that the person typing is in.

148
00:11:11,550 --> 00:11:16,760
So Channel 2 is equal to channel ID.

149
00:11:17,160 --> 00:11:25,880
So if that's the case then we're going to add that person's name to our name variable here.

150
00:11:26,190 --> 00:11:31,650
But we also need to take into account whether how many how many people have been added so if it's the

151
00:11:31,650 --> 00:11:34,470
first time that someone is being added to it.

152
00:11:34,800 --> 00:11:38,100
So we're going to see if names is still an empty string.

153
00:11:38,100 --> 00:11:44,220
So if this is either the first person in the dictionary loop or if there's only one person typing then

154
00:11:44,220 --> 00:11:53,590
we're going to set names equal to the typing user name else.

155
00:11:53,760 --> 00:12:00,510
So if we if we've been looping through and we've gone through more than one person and now someone's

156
00:12:00,510 --> 00:12:06,050
name is already in there what we're gonna do is we're going to say names is equal to and we're going

157
00:12:06,060 --> 00:12:07,170
do some string interpolation.

158
00:12:07,170 --> 00:12:10,530
We're going to say we're going to set it equal to ourselves first.

159
00:12:10,540 --> 00:12:19,790
So name is equal to names and then we're going to add also the new person the new typing user.

160
00:12:20,340 --> 00:12:20,760
All right.

161
00:12:20,760 --> 00:12:33,710
And then we are going to say number of taper's plus equal one right now we're going to work on the verbiage

162
00:12:33,770 --> 00:12:35,450
and actually displaying the text.

163
00:12:35,450 --> 00:12:44,270
All right so we're going to see if the number of typewriters is greater than zero and we are logged

164
00:12:44,270 --> 00:12:44,600
in

165
00:12:53,640 --> 00:13:01,290
then we're going to start out with a very Volkov the verbs of our verb is equal to is we're going to

166
00:13:01,290 --> 00:13:07,050
start assuming that there's only one other person typing but then we're going to check we're going to

167
00:13:07,050 --> 00:13:20,920
say if number of taper's is greater than one then we're going to need to change the verb to are go.

168
00:13:21,540 --> 00:13:26,520
And with that we can set the label actually.

169
00:13:26,520 --> 00:13:31,350
So we're ready to actually say who's type and so now we're going to see that typing users label that

170
00:13:31,770 --> 00:13:40,800
text is equal to we're going to do some string interpolation here and say names and we're going to our

171
00:13:40,980 --> 00:13:43,830
verb.

172
00:13:43,990 --> 00:13:47,410
So if there's more than one person typing then it's going to be is her art.

173
00:13:47,420 --> 00:13:55,720
If there's only one person typing then it's going to be is when we say typing a message.

174
00:13:56,730 --> 00:14:06,690
Now we're going to say else self that typing uses label that text is equal to an empty string.

175
00:14:06,710 --> 00:14:12,410
And the reason we have this here so reason we have this check is because when the when like everyone

176
00:14:12,410 --> 00:14:18,320
stops typing that dictionary is still returned to us and this function is still called.

177
00:14:18,350 --> 00:14:23,660
So if that's zero if there aren't anybody in it then we know that everyone has stopped typing.

178
00:14:23,780 --> 00:14:27,030
So we need to set our label back to an empty string.

179
00:14:27,030 --> 00:14:27,730
All right.

180
00:14:28,100 --> 00:14:31,480
So I believe that's all we need to do I think.

181
00:14:31,490 --> 00:14:32,760
I think we've got it all covered.

182
00:14:32,900 --> 00:14:38,070
Let's go ahead and run through this process one more time.

183
00:14:38,240 --> 00:14:45,170
So oh you know we forgot the very important part of actually sending the Mits.

184
00:14:45,500 --> 00:14:49,690
You're probably wondering how on earth the API knows if someone is typing.

185
00:14:49,730 --> 00:14:52,340
Well that's right down here in our message box editing.

186
00:14:52,340 --> 00:14:52,860
Right.

187
00:14:53,150 --> 00:15:03,680
So here when we are not typing all we've got to do is say socket service that instance does socket and

188
00:15:03,750 --> 00:15:13,550
we are going to emit event right into the event is called dark.

189
00:15:13,620 --> 00:15:24,300
Or this is a stop type actually stop type and remember the items that we want to send is first the users

190
00:15:24,320 --> 00:15:26,450
name and then the channel ID.

191
00:15:26,480 --> 00:15:28,440
So let's get right here.

192
00:15:28,440 --> 00:15:31,400
Let's go ahead and get ourselves a general idea.

193
00:15:31,430 --> 00:15:42,680
First I want to say guard that channel Id go to message service the instance that's selected channel

194
00:15:43,340 --> 00:15:47,630
ID else return.

195
00:15:48,450 --> 00:15:48,780
OK.

196
00:15:48,800 --> 00:15:57,890
So the for the stop type event we are passing the user's name so user data service that instance that

197
00:15:58,670 --> 00:16:04,820
name and then the second item to pass is the channel ID that we just figured out.

198
00:16:05,330 --> 00:16:18,110
And then when we are typing right here when we are typing we're going to say Succot service see that

199
00:16:18,200 --> 00:16:26,150
instance that he met her socket Dokument and this is what we want.

200
00:16:26,150 --> 00:16:37,310
The event that we want is start to type and the items to send are again user data service type instance

201
00:16:37,310 --> 00:16:43,650
dot name and the channel ID.

202
00:16:43,650 --> 00:16:44,440
All right.

203
00:16:44,540 --> 00:16:48,960
Save that and now I think we are good to go.

204
00:16:49,010 --> 00:16:50,230
So let's go and try this out.

205
00:16:50,280 --> 00:16:54,980
I'm going to run this on our iPhone 7 plus.

206
00:16:54,980 --> 00:16:55,240
All right.

207
00:16:55,250 --> 00:17:00,230
So I forgot to change that back to an empty string and the store will fix that.

208
00:17:00,680 --> 00:17:02,870
But let's see are we logged in now.

209
00:17:02,900 --> 00:17:04,350
We need to log in.

210
00:17:04,460 --> 00:17:12,690
I'm going to log in here at J come one two three four five six.

211
00:17:12,700 --> 00:17:20,540
All right so we are logged in and this girl down to the bottom here and I'm going to open up my Mac

212
00:17:20,630 --> 00:17:23,530
chat app and so watch right here.

213
00:17:23,540 --> 00:17:24,010
All right.

214
00:17:24,230 --> 00:17:27,300
So I'm logged in as Zeek her on the Mac chat.

215
00:17:27,390 --> 00:17:31,360
So if I start typing hold they check that out.

216
00:17:31,400 --> 00:17:40,700
Zeke is typing a message then if we deleted it's gone then I start typing and there it is Zeek in the

217
00:17:40,700 --> 00:17:41,570
house.

218
00:17:41,600 --> 00:17:51,710
And then if I send it shows up here and it gets cleared out and then over here on our end of it if we

219
00:17:51,710 --> 00:17:56,020
type watch over here so I'm going to start typing something.

220
00:17:56,030 --> 00:18:01,650
And here we go Johnny B is typing a message super cool.

221
00:18:01,920 --> 00:18:04,510
And then if we delete it all then it goes away.

222
00:18:04,520 --> 00:18:11,080
Or if we send the message then don't didn't go oh I know.

223
00:18:11,330 --> 00:18:16,450
So when we send a message we need to set the stop time.

224
00:18:16,540 --> 00:18:16,910
All right.

225
00:18:17,000 --> 00:18:22,580
So messagebox the ending here in the send message press.

226
00:18:22,580 --> 00:18:31,910
We also need to send the image for the stop types in say socket service dot instance that socket dot

227
00:18:32,370 --> 00:18:32,870
humid.

228
00:18:32,870 --> 00:18:35,450
Actually we can just copy this one up here.

229
00:18:35,660 --> 00:18:43,700
So here we go that's the image for the stop type and to copy that and paste it right here.

230
00:18:44,270 --> 00:18:46,720
Here we go right here and that should do.

231
00:18:46,720 --> 00:18:49,000
Try that one more time.

232
00:18:49,030 --> 00:18:49,400
All right.

233
00:18:49,400 --> 00:18:58,060
So in the meantime I actually open up a couple of simulators so we can test our multiple typing labeler.

234
00:18:58,170 --> 00:18:59,420
Oh I didn't know I could resize this.

235
00:19:00,140 --> 00:19:02,050
Check that.

236
00:19:02,460 --> 00:19:03,970
So I didn't know how do that.

237
00:19:03,970 --> 00:19:13,130
All right so we have Johnny B in on our seven plus on our 6 s and Zeek in the house over on our Mac

238
00:19:13,220 --> 00:19:14,000
app.

239
00:19:14,000 --> 00:19:14,440
All right.

240
00:19:14,510 --> 00:19:19,630
So let's go ahead and test this out.

241
00:19:20,150 --> 00:19:22,100
So over here.

242
00:19:22,130 --> 00:19:23,280
And Johnny B.

243
00:19:23,280 --> 00:19:31,100
I'm going to start typing and we show up that Johnny B is typing in a Mac app as well as on our other

244
00:19:31,440 --> 00:19:32,360
iPhone app.

245
00:19:32,780 --> 00:19:42,880
And then it starts typing over here now we should be able to see Johnny and M.R. typing for Zeek Emma

246
00:19:43,310 --> 00:19:48,270
is typing for Johnny and Johnny is typing for Emma.

247
00:19:48,270 --> 00:19:50,160
Now Zeke starts typing then.

248
00:19:50,300 --> 00:19:52,380
Everybody let's see here

249
00:19:55,330 --> 00:20:00,370
and then Zeke starts typing then everybody gets has two people.

250
00:20:00,550 --> 00:20:06,370
And if we started deleting from 1 then we only have one over here and one over here and if we do it

251
00:20:06,370 --> 00:20:08,710
from here then Johnny is the only one typing.

252
00:20:08,890 --> 00:20:12,660
So yeah that is super slick.

253
00:20:13,030 --> 00:20:14,890
Man gives me the tingles.

254
00:20:14,980 --> 00:20:16,450
All right some good stuff guys.

255
00:20:16,450 --> 00:20:17,520
Great stuff.

256
00:20:17,960 --> 00:20:20,930
And yeah that's pretty much.

257
00:20:20,980 --> 00:20:23,820
That's pretty much all we're going to do in this lesson.

258
00:20:24,080 --> 00:20:27,010
Super cool and important feature for chat apps.

259
00:20:27,010 --> 00:20:31,240
Knowing when other people are or are chatting it can be super frustrating if you don't know if someone

260
00:20:31,240 --> 00:20:33,300
else's typing something.

261
00:20:33,640 --> 00:20:41,650
So the last thing that I want to do is we have that right here let's just delete the text out of it

262
00:20:41,650 --> 00:20:48,010
so it doesn't have a default label when we start it up and that's it.

263
00:20:48,190 --> 00:20:54,000
I think our next lesson might be our last feature is going to be a cool one as well.

264
00:20:54,220 --> 00:21:00,100
We're going to make it so when someone sends a message in a different channel than the one that you're

265
00:21:00,100 --> 00:21:07,480
in that on your app that little channel will be it will have some sort of indication that someone has

266
00:21:07,480 --> 00:21:09,580
left the message in a different channel than the one you're in.

267
00:21:09,580 --> 00:21:10,090
All right.

268
00:21:10,210 --> 00:21:11,440
So if you're excited for that.

269
00:21:11,440 --> 00:21:17,650
Looking forward to it and I'm going to finish off here by just adding in committing my changes and then

270
00:21:17,680 --> 00:21:19,350
I'll see you all in the next one.