1

00:00:08,570 --> 00:00:12,250

It's up everyone Johnny B who with the slopes dot com Welcome back.



2

00:00:12,260 --> 00:00:18,560

And this lesson we're going to add one more cool feature in which is how to know when other people are



3

00:00:18,560 --> 00:00:19,210

chatting.



4

00:00:19,270 --> 00:00:19,510

Right.



5

00:00:19,520 --> 00:00:22,630

So I mean that's a pretty pretty useful thing to know.



6

00:00:22,660 --> 00:00:27,540

We're going to do is we're going to start out here on our main story board here in our chat visi.



7

00:00:27,560 --> 00:00:33,330

We are going to add a label right down here as well we've been reserving that space for.



8

00:00:33,420 --> 00:00:42,360

It's going to search for a label here in Dragon in.



9

00:00:42,890 --> 00:00:50,900

And we are going to change its color to a light gray light gray color right here.



10

00:00:50,900 --> 00:00:54,960

The font is going to be custom Helvetica new.



11

00:00:54,970 --> 00:01:00,520

We're going to drop its size down to about 14.



12

00:01:00,530 --> 00:01:02,300

I think that will look good.



13

00:01:02,840 --> 00:01:03,170

All right.



14

00:01:03,200 --> 00:01:07,560

So then let's go ahead and constrain it.



15

00:01:07,920 --> 00:01:14,740

I'm just going to go eight from the left with no constraint with no margins.



16

00:01:14,900 --> 00:01:23,090

And then about four from the message box here to do that and see how that looks.



17

00:01:23,420 --> 00:01:24,910

I think that looks pretty good.



18

00:01:24,910 --> 00:01:26,730

Maybe we can move it up a little bit more.



19

00:01:26,940 --> 00:01:34,400

It's like the label go to the inspector and bottom space two five maybe six.



20

00:01:34,400 --> 00:01:35,450

See how that looks.



21

00:01:35,450 --> 00:01:36,810

It looks pretty good.



22

00:01:36,810 --> 00:01:37,400

All ready.



23

00:01:37,400 --> 00:01:42,770

And then I'm actually going to just remove the text from it.



24

00:01:42,770 --> 00:01:43,220

All right.



25

00:01:43,430 --> 00:01:45,240

So we know it's there.



26

00:01:45,320 --> 00:01:45,560

Oh wait.



27

00:01:45,560 --> 00:01:48,010

First let's go ahead and at our outlet for it.



28

00:01:48,180 --> 00:01:52,070

So I'm going to hold the option and click on the chat Visi



29

00:01:58,080 --> 00:02:02,540

select the label and add our outlet.



30

00:02:03,060 --> 00:02:08,240

And this is going to be called typing users label.



31

00:02:08,390 --> 00:02:10,690

I'm going to say connect.



32

00:02:10,690 --> 00:02:17,010

And so this is the label that is going to say you know when your friend Sarah is typing a message it



33

00:02:17,010 --> 00:02:20,570

will show up on your screen saying Sarah is typing her.



34

00:02:20,700 --> 00:02:25,800

And then if she deletes everything that she was about to say then it'll just go back to being a blank



35

00:02:25,800 --> 00:02:26,460

string.



36

00:02:26,460 --> 00:02:26,940

All right.



37

00:02:27,120 --> 00:02:30,050

So let's figure out how we're going to do this.



38

00:02:30,060 --> 00:02:32,550

So obviously this is going to be handled through sockets right.



39

00:02:32,550 --> 00:02:36,380

Because this is going to be some real time information that's going back and forth.



40

00:02:36,420 --> 00:02:45,050

So if we open up our API code well you'll see here is this section right here it listens for users typing



41

00:02:45,480 --> 00:02:51,110

and up here we have ourselves a dictionary called typing users.



42

00:02:51,150 --> 00:02:51,800

OK.



43

00:02:52,410 --> 00:02:56,200

So here we have two client on's.



44

00:02:56,310 --> 00:02:59,440

One is listening for a start type event.



45

00:02:59,670 --> 00:03:02,880

And the other is listening for a stop type event.



46

00:03:03,210 --> 00:03:03,450

All right.



47

00:03:03,450 --> 00:03:11,580

And it expects as parameters a user name and a channel ID and what it does is it when a user starts



48

00:03:11,580 --> 00:03:12,480

to type.



49

00:03:12,480 --> 00:03:22,530

This method is called and a dictionary item is added to typing users with the key being the users name



50

00:03:22,860 --> 00:03:25,500

and the value being the channel ID.



51

00:03:25,590 --> 00:03:32,670

And then when the user stops typing whether they delete everything or they send the message then the



52

00:03:32,670 --> 00:03:34,870

stop type event is called.



53

00:03:34,950 --> 00:03:40,820

At which point that user name is removed from the typing user's dictionary.



54

00:03:41,070 --> 00:03:49,740

And so in both cases the typing user's dictionary is returned back to us the back to us the user.



55

00:03:49,740 --> 00:03:50,260

All right.



56

00:03:50,520 --> 00:03:57,300

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



57

00:03:57,570 --> 00:04:07,380

is going to create a new function our socket service that is going to be listening for that that typing



58

00:04:07,380 --> 00:04:11,940

uses dictionary coming back to us and then we're going to take that typing uses a dictionary and we're



59

00:04:11,940 --> 00:04:19,500

going to pass it in a closer back to our chat B.S. where we're going to do some logic to decide whether



60

00:04:19,500 --> 00:04:23,940

we're going to display who was typing and how the verbiage is.



61

00:04:23,940 --> 00:04:29,310

Because if you have one person typing then you would say Joe is typing but if multiple people are typing



62

00:04:29,310 --> 00:04:33,470

you'll say Joe and Sally are tap are typing right.



63

00:04:33,720 --> 00:04:35,590

So let's get to it.



64

00:04:35,910 --> 00:04:38,860

This function itself is pretty simple.



65

00:04:38,880 --> 00:04:44,430

We're going to say get Taiping users.



66

00:04:45,240 --> 00:04:51,650

But the tough part is we're going to introduce here a new completion handler.



67

00:04:51,650 --> 00:05:00,240

All right so when I say underscore completion handler I'm going to say at escaping.



68

00:05:00,540 --> 00:05:01,260

So far so good.



69

00:05:01,260 --> 00:05:10,800

This is what we've been seeing before but this time we are going to be passing into the closure a variable



70

00:05:10,800 --> 00:05:15,000

called Taiping users.



71

00:05:15,060 --> 00:05:21,500

That is of type it's going to be a dictionary of string and string.



72

00:05:22,040 --> 00:05:22,510

OK.



73

00:05:22,590 --> 00:05:26,490

And then we are returning void



74

00:05:29,210 --> 00:05:29,700

OK.



75

00:05:29,920 --> 00:05:32,480

So let's talk a little bit about this.



76

00:05:32,590 --> 00:05:37,730

If we look at our other I'm going to copy this right here.



77

00:05:38,160 --> 00:05:44,170

And let's go look at our constants and to do where you bet right here.



78

00:05:44,530 --> 00:05:48,350

So this is the cushion Heller that we've been using right.



79

00:05:48,400 --> 00:05:49,610

We have.



80

00:05:50,110 --> 00:05:56,370

We're passing into the closure a variable called success and that is a Boolean right.



81

00:05:56,650 --> 00:05:57,940

So this isn't too different.



82

00:05:57,940 --> 00:05:59,960

We're just calling it something different Taiping users.



83

00:05:59,980 --> 00:06:02,350

And then we're passing in a dictionary.



84

00:06:02,350 --> 00:06:02,930

All right.



85

00:06:03,100 --> 00:06:05,820

And then let's talk about how.



86

00:06:06,070 --> 00:06:10,020

Let's say in the chat VC anywhere.



87

00:06:10,030 --> 00:06:13,250

Let's see if we can find one that uses the closures.



88

00:06:13,240 --> 00:06:15,140

So for success.



89

00:06:15,300 --> 00:06:15,570

OK.



90

00:06:15,580 --> 00:06:22,540

So here what we're doing is we're not the completion handler helps us to know whether it was successful



91

00:06:22,540 --> 00:06:30,240

because we pass as a variable into the closure something here we're doing the same thing.



92

00:06:30,280 --> 00:06:35,070

Instead though we are just passing a dictionary in the closure.



93

00:06:35,230 --> 00:06:35,530

All right.



94

00:06:35,560 --> 00:06:38,450

So hopefully that makes a little bit of sense.



95

00:06:38,530 --> 00:06:46,830

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.



96

00:06:47,020 --> 00:07:03,310

So the event is called using or a user user typing come on user type being update and the callback press



97

00:07:03,370 --> 00:07:06,890

enter and then we have our array.



98

00:07:06,930 --> 00:07:11,880

So when they call this data array and then our socketed meter 8 came.



99

00:07:12,160 --> 00:07:16,060

Then this go to our code here and press enter to remove it.



100

00:07:16,510 --> 00:07:24,370

And in this case there will only ever be one thing in the data array.



101

00:07:24,460 --> 00:07:26,770

And that's our dictionary of typing users.



102

00:07:26,770 --> 00:07:28,510

All right so we don't have to do a whole lot of parsing.



103

00:07:28,510 --> 00:07:29,450

So it's kind of nice.



104

00:07:29,470 --> 00:07:36,260

We're just going to say Card let Taiping users equal data array.



105

00:07:36,550 --> 00:07:43,930

And we're just getting the truth from it and say as and this time it's going to be a dictionary of string



106

00:07:44,400 --> 00:07:46,020

and string.



107

00:07:46,180 --> 00:07:48,690

Else return.



108

00:07:49,250 --> 00:07:49,590

OK.



109

00:07:49,780 --> 00:07:55,270

So now we have our dictionary and this could be any number of people.



110

00:07:55,570 --> 00:08:02,560

And each entry in the dictionary is going to be a key value pair where the key is the user's name and



111

00:08:02,560 --> 00:08:06,500

the value is the channel ID from which they began typing.



112

00:08:06,580 --> 00:08:07,200

All right.



113

00:08:07,420 --> 00:08:15,790

So then we're going to pass into our completion handler this dictionary of typing users.



114

00:08:15,930 --> 00:08:21,250

All right so we are calling our completion Hendler and we're passing into it this dictionary of typing



115

00:08:21,250 --> 00:08:22,120

users.



116

00:08:22,120 --> 00:08:31,990

Then when we come over into our channel or our chat Visi and right here and get message we say socket



117

00:08:32,140 --> 00:08:40,420

service instance dot get Taiping users and we have a completion handler which instead of like all of



118

00:08:40,420 --> 00:08:45,720

the other times that we've been working with our completion handler we are going to be getting a boolean.



119

00:08:45,760 --> 00:08:54,590

This time we are getting a dictionary of string and string which we are calling Taiping users.



120

00:08:54,610 --> 00:08:55,250

All right.



121

00:08:55,690 --> 00:08:56,420

So now what.



122

00:08:56,440 --> 00:09:04,510

Now we have a dictionary of users and we need to figure out which ones we are going to display and what



123

00:09:04,510 --> 00:09:06,490

the verbiage is.



124

00:09:06,490 --> 00:09:10,690

All right so first off we're going to need to know whether they are in the right channel.



125

00:09:10,690 --> 00:09:13,460

All right so we're going to get ourselves a channel.



126

00:09:13,470 --> 00:09:27,070

Do you want to say Carlat channel IDM equal to message service instance dot Chan or that selected channel



127

00:09:27,070 --> 00:09:33,770

dot ID else you are going to return.



128

00:09:34,420 --> 00:09:35,080

OK.



129

00:09:35,290 --> 00:09:39,240

So if we don't even have a sofa channel we're just going to exit out of this.



130

00:09:39,320 --> 00:09:44,680

We're going to say bar names is equal to an empty string.



131

00:09:44,680 --> 00:09:47,440

And this is the variable that's going to hold the names of who is typing.



132

00:09:47,440 --> 00:09:47,860

All right.



133

00:09:47,940 --> 00:09:52,570

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,570 --> 00:09:59,590

typing in this phone number of diapers and we're going to start at zero and then we are going to need



135

00:09:59,590 --> 00:10:03,140

to look through the dictionary and to do that.



136

00:10:03,250 --> 00:10:05,040

What you do you say for.



137

00:10:05,440 --> 00:10:12,310

And then you say the key is how you sue typing user.



138

00:10:12,610 --> 00:10:22,750

And then the value is channel in typing users so flipping through each dictionary and we can then access



139

00:10:23,110 --> 00:10:26,060

have access to the key and the value right here.



140

00:10:26,320 --> 00:10:27,450

So we're going to say.



141

00:10:27,820 --> 00:10:32,030

So we want to know first off we don't want to display our own name right.



142

00:10:32,180 --> 00:10:39,530

Because when we when we do the mid were also whenever we type we're also sending to the API any needed



143

00:10:39,740 --> 00:10:42,620

saying hey someone's typing it just so happens to be us.



144

00:10:42,620 --> 00:10:46,320

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,330 --> 00:10:57,140

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,710 --> 00:11:02,040

data service instance that name.



147

00:11:02,060 --> 00:11:11,570

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,600 --> 00:11:16,800

So Channel 2 is equal to channel ID.



149

00:11:17,210 --> 00:11:25,790

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,270 --> 00:11:31,700

But we also need to take into account whether how many how many people have been added so if is the



151

00:11:31,700 --> 00:11:34,510

first time that someone is being added to it.



152

00:11:34,850 --> 00:11:38,150

So we're going to say if names is still an empty string.



153

00:11:38,150 --> 00:11:44,270

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,270 --> 00:11:53,650

we're going to set names equal to the typing user name else.



155

00:11:53,810 --> 00:12:00,560

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,560 --> 00:12:06,110

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,110 --> 00:12:10,540

do some string interpolation we're going to say hey we're going to set it equal to ourselves first.



158

00:12:10,550 --> 00:12:19,840

So name is equal to names and then we're going to add also the new person the new typing user.



159

00:12:20,390 --> 00:12:20,780

All right.



160

00:12:20,810 --> 00:12:33,760

And then we are going to say number of taper's plus equal one right now we're going to work on the verbiage



161

00:12:33,820 --> 00:12:35,520

and actually displaying the text.



162

00:12:35,510 --> 00:12:44,680

All right so we're going to see if the number of taper's is greater than zero and we are logged in



163

00:12:53,690 --> 00:13:01,180

then we're going to start out with a very bold call the verbs of our verb is equal to is we're going



164

00:13:01,180 --> 00:13:07,060

to start assuming that there's only one other person typing but then we're going to a check we're going



165

00:13:07,070 --> 00:13:17,600

to say if number of type errors is greater than 1 then we're going to need to change the verb to our



166

00:13:19,970 --> 00:13:20,780

go.



167

00:13:21,590 --> 00:13:26,570

And with that we can set the label actually.



168

00:13:26,570 --> 00:13:31,400

So we're ready to actually say who's type and so now we're going to see a that typing uses label that



169

00:13:31,820 --> 00:13:40,850

text is equal to we're going to do some string interpolation here and say names and we're going to our



170

00:13:41,030 --> 00:13:42,680

verb.



171

00:13:44,060 --> 00:13:47,460

So if there's more than one person typing then it's going to be is her are.



172

00:13:47,480 --> 00:13:55,550

If there's only one person typing then it's going to be is going to say typing a message.



173

00:13:56,560 --> 00:14:06,750

Now we're going to say else self that typing uses label that text is equal to an empty string.



174

00:14:06,770 --> 00:14:12,470

And the reason we have this here so reason we have this check is because when the when like everyone



175

00:14:12,470 --> 00:14:18,370

stops typing that dictionary is still returned to us and this function is still called.



176

00:14:18,410 --> 00:14:23,720

So if that's zero if there aren't anybody in it then we know that everyone has stopped typing.



177

00:14:23,840 --> 00:14:27,050

So we need to set our label back to an empty string.



178

00:14:27,050 --> 00:14:27,800

All right.



179

00:14:28,160 --> 00:14:31,460

So I believe that's all we need to do I think.



180

00:14:31,540 --> 00:14:32,960

I think we've got it all covered.



181

00:14:32,960 --> 00:14:38,130

Let's go ahead and run through this process one more time.



182

00:14:38,300 --> 00:14:45,180

So oh you know what we forgot the very important part of actually sending the mitts.



183

00:14:45,540 --> 00:14:49,610

You're probably wondering how on earth the API knows if someone is typing.



184

00:14:49,790 --> 00:14:52,840

Well that's right down here in our message box editing right.



185

00:14:53,210 --> 00:15:03,740

So here when we are not typing all we've got to do is say socket service that instance does socket and



186

00:15:03,800 --> 00:15:13,500

we are going to emit an event right into the event is called dark.



187

00:15:13,640 --> 00:15:22,930

Oh this is a stop type actually stop type and remember the items that we want to send.



188

00:15:23,110 --> 00:15:26,500

First the user's name and then the channel ID.



189

00:15:26,530 --> 00:15:31,650

So let's say Here let's go ahead and get ourselves a channel ID for.



190

00:15:31,660 --> 00:15:45,610

So when I say God that channel Id go to message service the instance that's selected channel D else



191

00:15:46,270 --> 00:15:47,680

return.



192

00:15:48,500 --> 00:15:48,800

OK.



193

00:15:48,850 --> 00:15:57,940

So the for the stop type event we are passing the user's name so user data service for instance that



194

00:15:58,720 --> 00:16:04,870

name and then the second item to pass is the channel ID that we just figured out.



195

00:16:05,380 --> 00:16:15,460

And then when we are typing right here when we are typing we're going to say Succot service.



196

00:16:15,910 --> 00:16:26,200

See that instance that he hit her socket document and this is what we want.



197

00:16:26,200 --> 00:16:37,360

The event that we want is start to type and the items to send are again user data service type instance



198

00:16:37,360 --> 00:16:43,740

dot name and the channel ID.



199

00:16:43,750 --> 00:16:44,570

All right.



200

00:16:44,590 --> 00:16:49,010

Save that and now I think we are good to go.



201

00:16:49,060 --> 00:16:50,430

So let's go and try this out.



202

00:16:50,440 --> 00:16:55,020

You know run this on our iPhone 7 plus.



203

00:16:55,020 --> 00:16:55,320

All right.



204

00:16:55,330 --> 00:17:00,350

So I forgot to change that back to an empty string in the store will fix that.



205

00:17:00,730 --> 00:17:02,710

But let's see if we logged in.



206

00:17:02,760 --> 00:17:04,100

Now we need to log in.



207

00:17:04,340 --> 00:17:08,440

So I'm going to log in here at dot com.



208

00:17:08,590 --> 00:17:12,290

One two three four five six.



209

00:17:12,590 --> 00:17:20,570

All right so we are logged in and this girl turned to the bottom here and I'm going to open up my Mac



210

00:17:20,660 --> 00:17:23,560

chat app and so watch right here.



211

00:17:23,570 --> 00:17:24,100

All right.



212

00:17:24,290 --> 00:17:30,310

So I'm logged in as Zeek her on the Mac chat up if I start typing whole day.



213

00:17:30,350 --> 00:17:31,360

Check that out.



214

00:17:31,460 --> 00:17:40,730

Zeke is typing a message then if we deleted it's gone then I start typing and there it is Zeek in the



215

00:17:40,730 --> 00:17:41,620

house.



216

00:17:41,660 --> 00:17:51,740

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



217

00:17:51,740 --> 00:17:56,080

type watch over here so I'm going to start typing something.



218

00:17:56,090 --> 00:17:57,270

And here we go.



219

00:17:57,290 --> 00:18:01,930

Johnny B is typing a message supercool.



220

00:18:01,960 --> 00:18:09,300

And then if we delete it all then it goes away or if we send the message then.



221

00:18:09,780 --> 00:18:11,130

Didn't go oh I know.



222

00:18:11,390 --> 00:18:16,450

So when we send a message we need to set the stop time.



223

00:18:16,590 --> 00:18:16,950

All right.



224

00:18:17,060 --> 00:18:22,630

So message box time ending here in the Send Message preste.



225

00:18:22,640 --> 00:18:31,500

We also need to send the image for the stop types in the same socket service that instance that socket



226

00:18:31,540 --> 00:18:32,930

that emit.



227

00:18:32,930 --> 00:18:35,500

Actually we can just copy this one up here.



228

00:18:35,690 --> 00:18:43,800

So here we go that's the image for the stop type and copy that and paste right here.



229

00:18:44,370 --> 00:18:46,780

Here we go right here and that should do.



230

00:18:46,780 --> 00:18:49,390

Try that one more time already.



231

00:18:49,460 --> 00:18:58,300

So in the meantime I actually open up a couple of simulators so we can test our multiple typing labeler.



232

00:18:58,340 --> 00:18:59,470

I didn't know I could resize this.



233

00:18:59,490 --> 00:19:02,370

Whoa check that.



234

00:19:02,490 --> 00:19:04,030

So I didn't know how to do that.



235

00:19:04,030 --> 00:19:13,190

All right so we have Johnny B in on our 7 plus and on our 6 s and Zeek in the house over on our Mac



236

00:19:13,270 --> 00:19:14,020

app.



237

00:19:14,060 --> 00:19:14,550

All right.



238

00:19:14,570 --> 00:19:19,690

So let's go ahead and test this out.



239

00:19:20,210 --> 00:19:26,900

So over here on and Johnny B I'm going to start typing and we show up that Johnny B is typing in our



240

00:19:26,900 --> 00:19:32,610

makup as well as on our other iPhone app.



241

00:19:32,840 --> 00:19:42,510

And then if Emma starts typing over here now we should be able to see Johnny and M-R typing for Zeek



242

00:19:42,780 --> 00:19:48,330

and is typing for Johnny and Johnny is typing for Emma.



243

00:19:48,320 --> 00:19:52,690

Now Zeke starts typing then everybody let's see here.



244

00:19:55,280 --> 00:20:03,080

And then Zeke starts typing then everybody gets has two people and if we started deleting from 1 then



245

00:20:03,200 --> 00:20:08,850

we only have one over here and one over here and if we do it from here then Johnny is the only one typing.



246

00:20:08,930 --> 00:20:12,910

So yeah that is soooo slick.



247

00:20:13,200 --> 00:20:16,510

Man give me the tingles all right some good stuff guys.



248

00:20:16,520 --> 00:20:17,550

Great stuff.



249

00:20:17,990 --> 00:20:21,020

And yeah that's pretty much.



250

00:20:21,020 --> 00:20:24,100

That's pretty much all we're going to do in this lesson.



251

00:20:24,140 --> 00:20:27,050

Super cool and important feature for chat apps.



252

00:20:27,050 --> 00:20:31,470

Knowing when other people are chatting it can be super frustrating if you don't know if someone else



253

00:20:31,470 --> 00:20:33,210

is typing something.



254

00:20:33,680 --> 00:20:41,690

So the last thing that I want to do is we have that library here let's just delete the text out of it



255

00:20:41,690 --> 00:20:48,070

so it doesn't have a default label when we start it up and that's it.



256

00:20:48,260 --> 00:20:54,270

I think our next lesson might be our last feature and it's going to be a cool one as well.



257

00:20:54,290 --> 00:21:00,170

We're going to make it so when someone sends a message in a different channel than the one that you're



258

00:21:00,170 --> 00:21:07,550

in that on your app that little channel will be it will have some sort of indication that someone has



259

00:21:07,550 --> 00:21:09,620

left a message in a different channel than the one you're in.



260

00:21:09,620 --> 00:21:10,080

All right.



261

00:21:10,230 --> 00:21:16,130

So if you're excited for that I'm looking forward to it and I'm going to finish off here by just adding



262

00:21:16,130 --> 00:21:19,390

in committing my changes and then I'll see you all in the next one.