Everyone welcome back.
Johnny B here with slopes dot com.
And this lesson is the one that we have been building up to this entire section and this lesson.
We make our chat app a chat app meaning we're going to have real time communication between multiple
devices multiple platforms.
All.
So this is going to be some super exciting stuff.
Hope you guys are ready for it.
All right we're going to start out here in our second service starts have to file.
And the last lesson we added messages right and we were displaying messages.
And so now we need to be able to listen for when those messages are sent to the server and then sent
out to be sent back to us.
All right.
So we are going to create our get message function.
So let's get to we're going to say fonk get chat message.
All right and then we're going to have a completion handler
say at escaping
completion handler.
All right.
So let's take a look at our API code and then open up Adam and see here new message.
All right.
So on new message we've done this part we send the server all of this information it creates a new message
stores it in the database and then sends out the MIT.
And so here is the image that we are going to be receiving from the server.
The event is called Message created and this is the data array that we're going to be receiving.
Remember in with such dock and we receive back a data array.
Right.
And that's just an array of type any.
And so ours is going to be one two three four five six seven eight items the body the user id the channel
ID user name user Avatar Avatar color Heidi.
And then the time stamp prank.
So let's get to it.
We're going to receive that array of data we're going to parse through it and pull out the necessary
information and then we're going to do it check because we're only interested in because someone else
user Billy Bob could be using this app and he could be in a different channel than us.
And so we don't really care if he sends a message and we're not in the channel that he's in.
So we're going to do it check to see if the channel ID of the incoming message matches the channel ID
of our selected channel and if so then we'll create a new message then we'll add that to our message
service array of messages and then we'll reload our table data.
If not we're just going to ignore it.
All right.
So let's get to we're going to say socket not on and we want this one right here.
Even with the string and the normal callback that event name is a message created the callback is going
to press enter and we have an array of any type.
And so we're going to call this data array the anger the acknowledgment in the middle we're going to
call he C-K.
And oh no.
OK.
There you go.
And then in code I get to close this bottom pane.
So now we have to parse through this data array and get the information that we want.
I just want to say God let message body was the first one and we're going to say is equal to data array.
And that is the zeroth item telling us that we're going to test that as a string else return.
All right next up we're going to get the channel IDs around to guard that channel Heidi is equal to
data array.
And this one is actually number two as a string else return and that's because if we look an atom we're
not actually storing the user id in our message model.
So that's just superfluous information that we that we're not using.
All right.
And then I'm going to copy copy and paste these.
We've got one two three four and let's go through these.
Next up we've got the user name and that is going to be data array.
Number three has a string.
Then we have the user have a.
And that's going to be data array number four.
And then we have the user have a tar color.
And that's going to be data array number five.
Then we have the message ID.
And that's going to be data array item number six.
And then lastly we have one more to win the copy again and this is the time stamp and that is the 7
item in our data array.
Cosseting cast it to stream.
And so now we know pretty much everything we need to know about the message.
And so like I was saying now we're going to do a check to make sure that the incoming message is in
the channel that we care about that it's in the channel that we are selected.
All right.
When would say if channel Heidi
is equal to message service that instance dot selected channel ID
and we are logged in and off service that instance that is logged in then we're going to create a new
message appended to our message service and then we're going to say completion is true so that we can
reload our table data over in the channel or in the chat B.C.E..
So I say let new message equal to message and the initialiser you're going to say the message is message
body the user name is user name channel ID is channel ID the user Avatar is user Avatar use your avatar
color is user have a color.
The ID is ID and time stamp is Pakistan.
All right so now we are going to append this new message to our race and we say Message Service instance
that and messages that penned new element the new element that we are pending is this new message that
we just created and then we're going to see completion is true if the channel ID of this incoming message
does not match our selected channel ID then we aren't going to do anything and we're going to see completion
is false.
Right.
Awesome save that little bit of cleanup here.
And a recap.
We are listening for events from the server called Message created.
If we receive it we get with it a data array.
We parse through that data array to get all of the information that we want.
Then we do a check to make sure that the incoming message is indeed part of the channel that we care
about.
If so create a new message appended to our array of messages and see completion is equal to true.
So that in our chat Visi we can reload the table view.
All right.
And so I'm going to go out and put this down here below are notifications.
I'm going to say socket service dot instance dot com get chat message we got a completion handler or
a closure and say success.
And so if we are successful if success then we are going to say sulphite table view daquiri load data
and that's it.
Let's go ahead and test this.
I just want to run this.
All righty.
So here we go.
I'm going to send a message sending a message on Socky.
It's a press send button and boom there it is sending a message on sockets.
All right.
So that's pretty darn cool.
Let's make it so that when we send it and receive it it scrolls down to the most to the latest one.
Right.
So here in the GET CHEP message in the chat room let's say we're going to do a check to see if there
are more than if we have multiple messages then we're just going to scroll down to the bottom one.
So when I say Message Service that instance that messages does count if we have more than 0 and then
we're going to scroll to the bottom so we can see a self-taught table view that scroll to row add index
path.
OK.
And so we need to create a let's create a variable for the index path.
We can say let and index.
So we're going to create an index path for the very last one and let's say Index path and we'll initialize
that to be row and S. the row is going to be message service instance messages that count minus 1.
So that will be the very last row for us and the section is zero since we only have the 1 Section.
So then here scroll to the row we're going to scroll to is oh I have a typo here.
This should be an index.
OK we're going to scroll to and index at and then you can specify a position.
So here we're going to say Dot and then I can get in here if I can show you the other ones you can do
dot dot dot bottom that middle we're going to do dot bottom so this will all the way to the bottom for
animated.
We're going to say false.
OK.
And let's go ahead and run that again.
All right so let's try that one more time.
In fact I'll just be up here and I'm going to say scroll to bottom send it hand.
There we go.
Scroll to bottom.
All right so now I'm going to show you the real cool.
So this here is the magic chat app that I build and teach how to build in our Mac OS development course.
And check this out.
So I'm going to type a message here.
Our Mac chat app come in from Mac app and watch over here in our iOS app boom shows up right away.
So we have a cross-platform cross-platform real time chat app working now.
And right back at ya.
And then I pressed the send button and immediately pops up over here and we can check out other channels.
So just to check that we aren't getting messages that are sent in other channels showing up.
When I say here sent from a random case.
Yeah we didn't get anything to show up here but if we go into a random then a look at that.
So this is some super exciting and awesome stuff you guys
I really I really enjoy making these apps.
It was super fun working with sockets and sockets and everything.
So what can we do next.
You know there's a whole bunch of stuff that we can still do some clean up stuff that I wanted to take
care of right now.
So first thing is if we click on log out these messages still state here so this take care of that.
Let's go over to our user to the service.
When we log out user we need to clear all of the messages outswing the same message service that instance
dot clear messages.
I'm going to say that and then in our chat we see in our user data did change function here when we're
not logged in we need to say table.
Nope.
Take your dot or reload data right.
So that should take care of that.
And then the last thing that I wanted to do was when we were here in the chat this blue button was actually
only supposed to show up if we have entered text.
So just kind of a nice little X user experience enhancement.
Right so do that to do that we were going to use an action from the textfield itself.
And we're going to do a check to see if an editing has begun and when it stopped and I will hide and
show the send button.
Based on that.
All right.
So to do that we're going to need to do a couple of things.
Got a check beside us.
Going to option and click on of story board and we're going to need an outlet for our Send button.
So from here I'm going to control and drag and say Send button and connect and then down here.
Let's see.
Maybe right here before the send message button.
We're going to do a send or not the send button.
We're going to get the textfield the message text box and we're going to control drag over and changes
to an action and the event that we want is editing changed.
All right so any time any editing occurs this function is going to be called and I'm going to say editing
it's a little bit more specific message box editing.
Right.
And I'm going to say connect I'm closer than that Ed..
All right so back in our chat Visi we need to show and hide the send button based on whether or not
we are typing.
So I'm thinking we keep a variable up here called variables called Bar is typing and will default to
false.
And then down here in our message box editing file or function we are going to say if the message text
box that text is equal to an empty string then is typing is false and we are going to send by and that
is it and is equal to true else.
If his typing is false then send and it is hidden is equal to false.
And then we're going to say it is typing back to true.
OK.
And then another thing that we need to do before we run this is to set the send button to be hidden
right off the bat.
All right so you do that right here in this case and button it is hidden is equal to true.
Let's run that.
Ready to open this up top of the keyboard.
I'm going to start typing and.
Oh he shows up.
Oh hey shows up.
All right.
Very cool.
All righty so yeah this has been an exciting lesson.
We went through we added the listener from the API so that we can have immediate real time chat going
back and forth.
I showed you the the the I showed you the Mac chat app which you know communicated fluidly with the
iOS app because they're both sharing the same back and the same API.
And so some super exciting stuff as well.
If you want to learn how to make that go check out our Mac development course had dot com.
And yes so I hope you guys are having fun and we got just a couple of more features that I want to get
in for you guys.
And yeah we're getting close to the end so I'm going to sign off here and just add and commit my changes
and then I'll see you guys on the next one.