It's about everyone.
JOHNNY B who with the slopes dot com Welcome back.
And this lesson we're going to add one more cool feature which is how to know when other people are
chatting.
Right.
So I mean that's a pretty pretty useful thing to know.
We're going to do is we're going to start out here and our main story board here in our chat the sea.
We are going to add a label right down here as well we've been reserving that space for.
I'm going to search for a label here in Dragon in.
And we are going to change its color to a light gray light gray color right here.
The font is going to be custom Helvetica new We're going to drop its size down to about 14.
I think that will look good.
All right.
So then let's go ahead and constrain it.
I'm just going to go eight from the left with no constraint with no margins.
And then about four from the message box here we're going to do that and see how that looks.
I think that looks pretty good maybe we can move it up a little bit more.
It's like the label go to the inspector and bottom space two five maybe six.
See how that looks.
It looks pretty good.
Ready.
And then I'm actually going to just remove the text from it.
All right.
So we know it's there.
Oh wait.
First let's go ahead and at our outlet for it.
So I'm going to hold the option and click on the chat Visi
select the label and add our outlet.
And this is going to be called typing users label.
I'm going to say connect.
And so this is the label that is going to say you know when your friend Sarah is typing a message it
will show up on your screen saying Sarah is typing.
And then if she deletes everything that she was about to say then it'll just go back to being a blank
string.
All right.
So let's figure out how we're going to do this.
So obviously this is going to be handled through sockets right.
Because there's going to be some real time information that's going back and forth.
So if we open up our API code well you'll see here is this section right here it listens for users typing
and up here we have ourselves a dictionary called typing users.
OK.
So here we have two client on's one is listening for a start type event and the other is listening for
a stop type event.
All right.
And it expects as parameters a user name and a channel ID and what it does is it when a user starts
to type.
This method is called and a dictionary item is added to typing users with the key being the users name
and the value being the channel ID.
And then when the user stops typing whether they delete everything or they send the message then the
stop type event is called.
At which point that user name is removed from the typing user's dictionary.
And so in both cases the typing user's dictionary is returned back to us the back to us the user.
All right.
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
is going to create a new function our socket service that is going to be listening for that that typing
uses dictionary coming back to us and then we're going to take that typing uses a dictionary and we're
going to pass it in a closure back to our live chat B.S. where we're going to do some logic to decide
whether we're going to display who was typing and how the verbiage is.
Because if you have one person typing then you would say Joe is typing but if multiple people are typing
you'll say Joe and Sally are tap are typing right.
So let's get to it.
This function itself is pretty simple.
We're going to say get Taiping users.
But the tough part is we're going to introduce here a new completion handler.
All right so when I say underscore completion handler I'm going to say at escaping.
So far so good.
This is what we've been seeing before but this time we are going to be passing into the closure a variable
called Taiping users.
That is of type it's going to be a dictionary of string and string.
OK.
And then we are returning void
OK.
So let's talk a little bit about this.
If we look at our other I'm going to copy this right here and let's go look at our constants and to
do where you bet.
Right.
So this is the cushion Heller that we've been using right.
We have we're passing into the closure a variable called success and that is a Boolean right.
So this isn't too different.
We're just calling it something different.
Typing users and then we're passing in a dictionary.
All right.
And then let's talk about how.
Let's say in the chat VC anywhere.
Let's see if we can find one that uses the closures.
So for success.
OK.
So here what we're doing is we're not the completion handler helps us to know whether it was successful
because we pass as a variable into the closure something here we're doing the same thing.
Instead though we are just passing a dictionary in the closure.
All right.
So hopefully that makes a little bit of sense.
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.
So the event is called using or a user user typing come on user type being update and the callback press
enter and then we have our array.
So I'm going to call this data array and then our socket the meter.
OK then this go to our code here.
Press Enter to remove it.
And in this case there will only ever be one thing in the data array.
And that's our dictionary of typing users are.
So we don't have to do a whole lot of parsing.
So that's kind of nice.
We're just going to say Card let Taiping users equal data re.
And we're just getting the truth from it and say as and this time it's going to be a dictionary of string
and string.
Else return.
OK so now we have our dictionary and this could be any number of people.
And each entry in the dictionary is going to be a key value pair where the key is the user's name and
the value is the channel ID from which they began typing.
All right.
So then we're going to pass into our completion handler this dictionary of typing users.
All right so we are calling our completion Hendler and we're passing into it this dictionary of typing
users.
Then when we come over into our channel or our chat Visi and right here and get message we say socket
service instance start get Taiping users and we have a completion handler which instead of like all
of the other times that we've been working with our completion handler we are going to be getting a
boolean.
This time we are getting a dictionary of string and string which we are calling Taiping users.
All right.
So now what.
Now we have a dictionary of users and we need to figure out which ones we are going to display and what
the verbiage is.
All right so first off we're going to need to know whether they are in the right channel.
All right so we're going to get ourselves a channel.
Do you want to say Garlett channel IDM equal to message service instance dot Chan or selected channel
dot ID.
Else you are going to return.
OK.
So if we don't even have a look the channel will just going to exit out of this.
Now we're going to say our names is equal to an empty string.
And this is the variable that's going to hold the names of who is typing.
All right.
So we're going to start out as an empty string then we're going to need to know how many people are
typing speaking the number of diapers.
And we're going to start at zero and then we are going to need to look through the dictionary and to
do that.
What you do you say for.
And then you say the key is how you sue typing user.
And then the value is channel in typing users so looping through each dictionary and we can then access
have access to the key and the value right here.
So we're going to say we want to know first off we don't want to display our own name right.
Because when we when we do the mid we're also whenever we type we're also sending to the API emit saying
hey someone's typing it just so happens to be us.
So here we're going to have to do that check to make sure that we're not displaying our own name.
It's her first going to say if the typing user is not us so does not equal self or does not equal user
data service instance that name.
So if it's not us and the channel that we're in is the channel that the person typing is in.
So Channel 2 is equal to channel ID.
So if that's the case then we're going to add that person's name to our name variable here.
But we also need to take into account whether how many how many people have been added so if it's the
first time that someone is being added to it.
So we're going to see if names is still an empty string.
So if this is either the first person in the dictionary loop or if there's only one person typing then
we're going to set names equal to the typing user name else.
So if we if we've been looping through and we've gone through more than one person and now someone's
name is already in there what we're gonna do is we're going to say names is equal to and we're going
do some string interpolation.
We're going to say we're going to set it equal to ourselves first.
So name is equal to names and then we're going to add also the new person the new typing user.
All right.
And then we are going to say number of taper's plus equal one right now we're going to work on the verbiage
and actually displaying the text.
All right so we're going to see if the number of typewriters is greater than zero and we are logged
in
then we're going to start out with a very Volkov the verbs of our verb is equal to is we're going to
start assuming that there's only one other person typing but then we're going to check we're going to
say if number of taper's is greater than one then we're going to need to change the verb to are go.
And with that we can set the label actually.
So we're ready to actually say who's type and so now we're going to see that typing users label that
text is equal to we're going to do some string interpolation here and say names and we're going to our
verb.
So if there's more than one person typing then it's going to be is her art.
If there's only one person typing then it's going to be is when we say typing a message.
Now we're going to say else self that typing uses label that text is equal to an empty string.
And the reason we have this here so reason we have this check is because when the when like everyone
stops typing that dictionary is still returned to us and this function is still called.
So if that's zero if there aren't anybody in it then we know that everyone has stopped typing.
So we need to set our label back to an empty string.
All right.
So I believe that's all we need to do I think.
I think we've got it all covered.
Let's go ahead and run through this process one more time.
So oh you know we forgot the very important part of actually sending the Mits.
You're probably wondering how on earth the API knows if someone is typing.
Well that's right down here in our message box editing.
Right.
So here when we are not typing all we've got to do is say socket service that instance does socket and
we are going to emit event right into the event is called dark.
Or this is a stop type actually stop type and remember the items that we want to send is first the users
name and then the channel ID.
So let's get right here.
Let's go ahead and get ourselves a general idea.
First I want to say guard that channel Id go to message service the instance that's selected channel
ID else return.
OK.
So the for the stop type event we are passing the user's name so user data service that instance that
name and then the second item to pass is the channel ID that we just figured out.
And then when we are typing right here when we are typing we're going to say Succot service see that
instance that he met her socket Dokument and this is what we want.
The event that we want is start to type and the items to send are again user data service type instance
dot name and the channel ID.
All right.
Save that and now I think we are good to go.
So let's go and try this out.
I'm going to run this on our iPhone 7 plus.
All right.
So I forgot to change that back to an empty string and the store will fix that.
But let's see are we logged in now.
We need to log in.
I'm going to log in here at J come one two three four five six.
All right so we are logged in and this girl down to the bottom here and I'm going to open up my Mac
chat app and so watch right here.
All right.
So I'm logged in as Zeek her on the Mac chat.
So if I start typing hold they check that out.
Zeke is typing a message then if we deleted it's gone then I start typing and there it is Zeek in the
house.
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
type watch over here so I'm going to start typing something.
And here we go Johnny B is typing a message super cool.
And then if we delete it all then it goes away.
Or if we send the message then don't didn't go oh I know.
So when we send a message we need to set the stop time.
All right.
So messagebox the ending here in the send message press.
We also need to send the image for the stop types in say socket service dot instance that socket dot
humid.
Actually we can just copy this one up here.
So here we go that's the image for the stop type and to copy that and paste it right here.
Here we go right here and that should do.
Try that one more time.
All right.
So in the meantime I actually open up a couple of simulators so we can test our multiple typing labeler.
Oh I didn't know I could resize this.
Check that.
So I didn't know how do that.
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
app.
All right.
So let's go ahead and test this out.
So over here.
And Johnny B.
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
iPhone app.
And then it starts typing over here now we should be able to see Johnny and M.R. typing for Zeek Emma
is typing for Johnny and Johnny is typing for Emma.
Now Zeke starts typing then.
Everybody let's see here
and then Zeke starts typing then everybody gets has two people.
And if we started deleting from 1 then we only have one over here and one over here and if we do it
from here then Johnny is the only one typing.
So yeah that is super slick.
Man gives me the tingles.
All right some good stuff guys.
Great stuff.
And yeah that's pretty much.
That's pretty much all we're going to do in this lesson.
Super cool and important feature for chat apps.
Knowing when other people are or are chatting it can be super frustrating if you don't know if someone
else's typing something.
So the last thing that I want to do is we have that right here let's just delete the text out of it
so it doesn't have a default label when we start it up and that's it.
I think our next lesson might be our last feature is going to be a cool one as well.
We're going to make it so when someone sends a message in a different channel than the one that you're
in that on your app that little channel will be it will have some sort of indication that someone has
left the message in a different channel than the one you're in.
All right.
So if you're excited for that.
Looking forward to it and I'm going to finish off here by just adding in committing my changes and then
I'll see you all in the next one.