1
00:00:07,420 --> 00:00:08,740
Everyone welcome back.

2
00:00:08,740 --> 00:00:11,130
Johnny B here with slopes dot com.

3
00:00:11,260 --> 00:00:17,080
And this lesson is the one that we have been building up to this entire section and this lesson.

4
00:00:17,080 --> 00:00:23,440
We make our chat app a chat app meaning we're going to have real time communication between multiple

5
00:00:23,440 --> 00:00:25,220
devices multiple platforms.

6
00:00:25,230 --> 00:00:25,560
All.

7
00:00:25,600 --> 00:00:28,420
So this is going to be some super exciting stuff.

8
00:00:28,420 --> 00:00:30,070
Hope you guys are ready for it.

9
00:00:30,070 --> 00:00:34,190
All right we're going to start out here in our second service starts have to file.

10
00:00:34,280 --> 00:00:39,400
And the last lesson we added messages right and we were displaying messages.

11
00:00:39,490 --> 00:00:46,780
And so now we need to be able to listen for when those messages are sent to the server and then sent

12
00:00:46,780 --> 00:00:48,700
out to be sent back to us.

13
00:00:48,700 --> 00:00:49,130
All right.

14
00:00:49,390 --> 00:00:53,570
So we are going to create our get message function.

15
00:00:54,280 --> 00:00:59,990
So let's get to we're going to say fonk get chat message.

16
00:01:00,160 --> 00:01:03,640
All right and then we're going to have a completion handler

17
00:01:06,980 --> 00:01:08,890
say at escaping

18
00:01:11,740 --> 00:01:13,490
completion handler.

19
00:01:13,960 --> 00:01:14,290
All right.

20
00:01:14,300 --> 00:01:24,080
So let's take a look at our API code and then open up Adam and see here new message.

21
00:01:24,730 --> 00:01:24,980
All right.

22
00:01:24,990 --> 00:01:33,460
So on new message we've done this part we send the server all of this information it creates a new message

23
00:01:33,800 --> 00:01:36,800
stores it in the database and then sends out the MIT.

24
00:01:36,820 --> 00:01:41,150
And so here is the image that we are going to be receiving from the server.

25
00:01:41,320 --> 00:01:48,660
The event is called Message created and this is the data array that we're going to be receiving.

26
00:01:48,660 --> 00:01:55,640
Remember in with such dock and we receive back a data array.

27
00:01:55,750 --> 00:01:56,040
Right.

28
00:01:56,050 --> 00:01:58,730
And that's just an array of type any.

29
00:01:59,070 --> 00:02:10,150
And so ours is going to be one two three four five six seven eight items the body the user id the channel

30
00:02:10,150 --> 00:02:13,950
ID user name user Avatar Avatar color Heidi.

31
00:02:14,020 --> 00:02:15,940
And then the time stamp prank.

32
00:02:16,210 --> 00:02:18,130
So let's get to it.

33
00:02:18,130 --> 00:02:26,500
We're going to receive that array of data we're going to parse through it and pull out the necessary

34
00:02:26,500 --> 00:02:34,060
information and then we're going to do it check because we're only interested in because someone else

35
00:02:34,510 --> 00:02:39,950
user Billy Bob could be using this app and he could be in a different channel than us.

36
00:02:40,060 --> 00:02:45,070
And so we don't really care if he sends a message and we're not in the channel that he's in.

37
00:02:45,070 --> 00:02:50,860
So we're going to do it check to see if the channel ID of the incoming message matches the channel ID

38
00:02:50,860 --> 00:02:56,080
of our selected channel and if so then we'll create a new message then we'll add that to our message

39
00:02:56,110 --> 00:03:00,870
service array of messages and then we'll reload our table data.

40
00:03:00,970 --> 00:03:02,410
If not we're just going to ignore it.

41
00:03:02,530 --> 00:03:02,970
All right.

42
00:03:03,160 --> 00:03:09,880
So let's get to we're going to say socket not on and we want this one right here.

43
00:03:09,900 --> 00:03:20,740
Even with the string and the normal callback that event name is a message created the callback is going

44
00:03:20,740 --> 00:03:24,580
to press enter and we have an array of any type.

45
00:03:24,690 --> 00:03:30,190
And so we're going to call this data array the anger the acknowledgment in the middle we're going to

46
00:03:30,190 --> 00:03:31,640
call he C-K.

47
00:03:32,110 --> 00:03:35,410
And oh no.

48
00:03:35,470 --> 00:03:36,010
OK.

49
00:03:36,160 --> 00:03:36,880
There you go.

50
00:03:37,210 --> 00:03:42,670
And then in code I get to close this bottom pane.

51
00:03:42,930 --> 00:03:49,230
So now we have to parse through this data array and get the information that we want.

52
00:03:49,230 --> 00:03:56,770
I just want to say God let message body was the first one and we're going to say is equal to data array.

53
00:03:57,180 --> 00:04:08,970
And that is the zeroth item telling us that we're going to test that as a string else return.

54
00:04:09,000 --> 00:04:17,690
All right next up we're going to get the channel IDs around to guard that channel Heidi is equal to

55
00:04:17,700 --> 00:04:19,940
data array.

56
00:04:20,250 --> 00:04:31,650
And this one is actually number two as a string else return and that's because if we look an atom we're

57
00:04:31,650 --> 00:04:35,530
not actually storing the user id in our message model.

58
00:04:35,550 --> 00:04:40,090
So that's just superfluous information that we that we're not using.

59
00:04:40,380 --> 00:04:40,650
All right.

60
00:04:40,680 --> 00:04:44,040
And then I'm going to copy copy and paste these.

61
00:04:44,110 --> 00:04:50,500
We've got one two three four and let's go through these.

62
00:04:50,540 --> 00:04:55,850
Next up we've got the user name and that is going to be data array.

63
00:04:55,850 --> 00:04:58,540
Number three has a string.

64
00:04:58,550 --> 00:05:01,870
Then we have the user have a.

65
00:05:02,330 --> 00:05:06,330
And that's going to be data array number four.

66
00:05:06,330 --> 00:05:11,080
And then we have the user have a tar color.

67
00:05:11,300 --> 00:05:14,780
And that's going to be data array number five.

68
00:05:14,970 --> 00:05:17,580
Then we have the message ID.

69
00:05:18,070 --> 00:05:21,880
And that's going to be data array item number six.

70
00:05:22,400 --> 00:05:34,390
And then lastly we have one more to win the copy again and this is the time stamp and that is the 7

71
00:05:34,490 --> 00:05:36,670
item in our data array.

72
00:05:36,920 --> 00:05:39,420
Cosseting cast it to stream.

73
00:05:39,680 --> 00:05:44,160
And so now we know pretty much everything we need to know about the message.

74
00:05:44,240 --> 00:05:49,250
And so like I was saying now we're going to do a check to make sure that the incoming message is in

75
00:05:49,250 --> 00:05:53,600
the channel that we care about that it's in the channel that we are selected.

76
00:05:53,600 --> 00:05:53,840
All right.

77
00:05:53,840 --> 00:05:57,830
When would say if channel Heidi

78
00:06:03,490 --> 00:06:12,370
is equal to message service that instance dot selected channel ID

79
00:06:20,410 --> 00:06:30,280
and we are logged in and off service that instance that is logged in then we're going to create a new

80
00:06:30,280 --> 00:06:38,170
message appended to our message service and then we're going to say completion is true so that we can

81
00:06:38,350 --> 00:06:42,500
reload our table data over in the channel or in the chat B.C.E..

82
00:06:42,560 --> 00:06:54,970
So I say let new message equal to message and the initialiser you're going to say the message is message

83
00:06:55,150 --> 00:07:07,350
body the user name is user name channel ID is channel ID the user Avatar is user Avatar use your avatar

84
00:07:07,360 --> 00:07:09,810
color is user have a color.

85
00:07:09,910 --> 00:07:14,710
The ID is ID and time stamp is Pakistan.

86
00:07:15,130 --> 00:07:22,750
All right so now we are going to append this new message to our race and we say Message Service instance

87
00:07:22,810 --> 00:07:31,750
that and messages that penned new element the new element that we are pending is this new message that

88
00:07:31,750 --> 00:07:43,930
we just created and then we're going to see completion is true if the channel ID of this incoming message

89
00:07:43,930 --> 00:07:49,540
does not match our selected channel ID then we aren't going to do anything and we're going to see completion

90
00:07:49,570 --> 00:07:51,230
is false.

91
00:07:51,270 --> 00:07:51,870
Right.

92
00:07:51,980 --> 00:07:57,760
Awesome save that little bit of cleanup here.

93
00:07:58,510 --> 00:07:59,710
And a recap.

94
00:07:59,740 --> 00:08:05,740
We are listening for events from the server called Message created.

95
00:08:05,920 --> 00:08:09,440
If we receive it we get with it a data array.

96
00:08:09,520 --> 00:08:14,590
We parse through that data array to get all of the information that we want.

97
00:08:14,590 --> 00:08:20,140
Then we do a check to make sure that the incoming message is indeed part of the channel that we care

98
00:08:20,140 --> 00:08:20,770
about.

99
00:08:20,770 --> 00:08:27,390
If so create a new message appended to our array of messages and see completion is equal to true.

100
00:08:27,460 --> 00:08:33,590
So that in our chat Visi we can reload the table view.

101
00:08:33,870 --> 00:08:34,200
All right.

102
00:08:34,200 --> 00:08:38,470
And so I'm going to go out and put this down here below are notifications.

103
00:08:38,590 --> 00:08:48,430
I'm going to say socket service dot instance dot com get chat message we got a completion handler or

104
00:08:48,430 --> 00:08:50,270
a closure and say success.

105
00:08:50,560 --> 00:09:02,890
And so if we are successful if success then we are going to say sulphite table view daquiri load data

106
00:09:04,690 --> 00:09:05,350
and that's it.

107
00:09:05,350 --> 00:09:06,620
Let's go ahead and test this.

108
00:09:06,620 --> 00:09:08,440
I just want to run this.

109
00:09:08,440 --> 00:09:09,180
All righty.

110
00:09:09,200 --> 00:09:11,130
So here we go.

111
00:09:11,200 --> 00:09:17,820
I'm going to send a message sending a message on Socky.

112
00:09:17,890 --> 00:09:26,900
It's a press send button and boom there it is sending a message on sockets.

113
00:09:26,950 --> 00:09:27,290
All right.

114
00:09:27,340 --> 00:09:29,950
So that's pretty darn cool.

115
00:09:30,370 --> 00:09:36,780
Let's make it so that when we send it and receive it it scrolls down to the most to the latest one.

116
00:09:36,800 --> 00:09:37,230
Right.

117
00:09:37,420 --> 00:09:45,100
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

118
00:09:45,100 --> 00:09:50,110
are more than if we have multiple messages then we're just going to scroll down to the bottom one.

119
00:09:50,150 --> 00:10:03,010
So when I say Message Service that instance that messages does count if we have more than 0 and then

120
00:10:03,010 --> 00:10:12,850
we're going to scroll to the bottom so we can see a self-taught table view that scroll to row add index

121
00:10:12,850 --> 00:10:13,480
path.

122
00:10:13,600 --> 00:10:14,180
OK.

123
00:10:14,500 --> 00:10:18,580
And so we need to create a let's create a variable for the index path.

124
00:10:18,580 --> 00:10:21,700
We can say let and index.

125
00:10:21,700 --> 00:10:30,820
So we're going to create an index path for the very last one and let's say Index path and we'll initialize

126
00:10:30,820 --> 00:10:44,950
that to be row and S. the row is going to be message service instance messages that count minus 1.

127
00:10:44,950 --> 00:10:52,140
So that will be the very last row for us and the section is zero since we only have the 1 Section.

128
00:10:52,150 --> 00:10:57,810
So then here scroll to the row we're going to scroll to is oh I have a typo here.

129
00:10:57,820 --> 00:10:59,910
This should be an index.

130
00:11:00,130 --> 00:11:07,270
OK we're going to scroll to and index at and then you can specify a position.

131
00:11:07,270 --> 00:11:12,960
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

132
00:11:12,970 --> 00:11:19,420
dot dot dot bottom that middle we're going to do dot bottom so this will all the way to the bottom for

133
00:11:19,420 --> 00:11:19,870
animated.

134
00:11:19,860 --> 00:11:21,940
We're going to say false.

135
00:11:22,000 --> 00:11:22,680
OK.

136
00:11:23,200 --> 00:11:27,480
And let's go ahead and run that again.

137
00:11:27,520 --> 00:11:30,640
All right so let's try that one more time.

138
00:11:30,640 --> 00:11:38,750
In fact I'll just be up here and I'm going to say scroll to bottom send it hand.

139
00:11:38,800 --> 00:11:39,250
There we go.

140
00:11:39,250 --> 00:11:40,750
Scroll to bottom.

141
00:11:40,780 --> 00:11:44,710
All right so now I'm going to show you the real cool.

142
00:11:44,710 --> 00:11:53,630
So this here is the magic chat app that I build and teach how to build in our Mac OS development course.

143
00:11:53,980 --> 00:11:56,180
And check this out.

144
00:11:56,230 --> 00:11:58,330
So I'm going to type a message here.

145
00:11:58,390 --> 00:12:11,980
Our Mac chat app come in from Mac app and watch over here in our iOS app boom shows up right away.

146
00:12:11,980 --> 00:12:17,630
So we have a cross-platform cross-platform real time chat app working now.

147
00:12:17,890 --> 00:12:21,980
And right back at ya.

148
00:12:23,040 --> 00:12:31,610
And then I pressed the send button and immediately pops up over here and we can check out other channels.

149
00:12:31,840 --> 00:12:36,950
So just to check that we aren't getting messages that are sent in other channels showing up.

150
00:12:37,080 --> 00:12:43,060
When I say here sent from a random case.

151
00:12:43,650 --> 00:12:51,000
Yeah we didn't get anything to show up here but if we go into a random then a look at that.

152
00:12:51,370 --> 00:12:58,160
So this is some super exciting and awesome stuff you guys

153
00:13:02,500 --> 00:13:04,440
I really I really enjoy making these apps.

154
00:13:04,440 --> 00:13:08,570
It was super fun working with sockets and sockets and everything.

155
00:13:08,590 --> 00:13:11,710
So what can we do next.

156
00:13:11,710 --> 00:13:17,110
You know there's a whole bunch of stuff that we can still do some clean up stuff that I wanted to take

157
00:13:17,110 --> 00:13:19,070
care of right now.

158
00:13:19,120 --> 00:13:26,030
So first thing is if we click on log out these messages still state here so this take care of that.

159
00:13:26,620 --> 00:13:30,450
Let's go over to our user to the service.

160
00:13:30,700 --> 00:13:37,730
When we log out user we need to clear all of the messages outswing the same message service that instance

161
00:13:37,760 --> 00:13:40,550
dot clear messages.

162
00:13:40,830 --> 00:13:49,990
I'm going to say that and then in our chat we see in our user data did change function here when we're

163
00:13:49,990 --> 00:13:53,720
not logged in we need to say table.

164
00:13:54,220 --> 00:13:54,700
Nope.

165
00:13:56,670 --> 00:13:59,620
Take your dot or reload data right.

166
00:13:59,630 --> 00:14:01,330
So that should take care of that.

167
00:14:01,880 --> 00:14:10,520
And then the last thing that I wanted to do was when we were here in the chat this blue button was actually

168
00:14:10,520 --> 00:14:13,600
only supposed to show up if we have entered text.

169
00:14:13,880 --> 00:14:18,210
So just kind of a nice little X user experience enhancement.

170
00:14:18,230 --> 00:14:24,930
Right so do that to do that we were going to use an action from the textfield itself.

171
00:14:25,100 --> 00:14:31,460
And we're going to do a check to see if an editing has begun and when it stopped and I will hide and

172
00:14:31,460 --> 00:14:32,810
show the send button.

173
00:14:32,810 --> 00:14:33,500
Based on that.

174
00:14:33,500 --> 00:14:33,900
All right.

175
00:14:34,100 --> 00:14:36,980
So to do that we're going to need to do a couple of things.

176
00:14:36,980 --> 00:14:38,080
Got a check beside us.

177
00:14:38,390 --> 00:14:47,030
Going to option and click on of story board and we're going to need an outlet for our Send button.

178
00:14:47,450 --> 00:14:58,790
So from here I'm going to control and drag and say Send button and connect and then down here.

179
00:14:58,790 --> 00:15:01,470
Let's see.

180
00:15:02,540 --> 00:15:06,890
Maybe right here before the send message button.

181
00:15:07,100 --> 00:15:10,970
We're going to do a send or not the send button.

182
00:15:11,030 --> 00:15:16,420
We're going to get the textfield the message text box and we're going to control drag over and changes

183
00:15:16,420 --> 00:15:21,250
to an action and the event that we want is editing changed.

184
00:15:21,320 --> 00:15:28,070
All right so any time any editing occurs this function is going to be called and I'm going to say editing

185
00:15:29,960 --> 00:15:36,760
it's a little bit more specific message box editing.

186
00:15:36,770 --> 00:15:37,090
Right.

187
00:15:37,100 --> 00:15:42,050
And I'm going to say connect I'm closer than that Ed..

188
00:15:42,710 --> 00:15:52,610
All right so back in our chat Visi we need to show and hide the send button based on whether or not

189
00:15:52,610 --> 00:15:53,900
we are typing.

190
00:15:53,930 --> 00:16:05,270
So I'm thinking we keep a variable up here called variables called Bar is typing and will default to

191
00:16:05,270 --> 00:16:06,530
false.

192
00:16:07,190 --> 00:16:15,080
And then down here in our message box editing file or function we are going to say if the message text

193
00:16:15,080 --> 00:16:33,740
box that text is equal to an empty string then is typing is false and we are going to send by and that

194
00:16:33,790 --> 00:16:40,700
is it and is equal to true else.

195
00:16:42,960 --> 00:16:57,920
If his typing is false then send and it is hidden is equal to false.

196
00:16:58,440 --> 00:17:03,310
And then we're going to say it is typing back to true.

197
00:17:03,790 --> 00:17:04,920
OK.

198
00:17:05,650 --> 00:17:11,810
And then another thing that we need to do before we run this is to set the send button to be hidden

199
00:17:12,010 --> 00:17:12,770
right off the bat.

200
00:17:12,820 --> 00:17:20,540
All right so you do that right here in this case and button it is hidden is equal to true.

201
00:17:20,920 --> 00:17:22,670
Let's run that.

202
00:17:22,720 --> 00:17:26,040
Ready to open this up top of the keyboard.

203
00:17:26,040 --> 00:17:27,120
I'm going to start typing and.

204
00:17:27,130 --> 00:17:29,020
Oh he shows up.

205
00:17:29,080 --> 00:17:31,270
Oh hey shows up.

206
00:17:31,450 --> 00:17:32,050
All right.

207
00:17:32,050 --> 00:17:34,360
Very cool.

208
00:17:34,360 --> 00:17:38,400
All righty so yeah this has been an exciting lesson.

209
00:17:38,440 --> 00:17:47,140
We went through we added the listener from the API so that we can have immediate real time chat going

210
00:17:47,140 --> 00:17:47,740
back and forth.

211
00:17:47,740 --> 00:17:56,320
I showed you the the the I showed you the Mac chat app which you know communicated fluidly with the

212
00:17:56,320 --> 00:18:00,240
iOS app because they're both sharing the same back and the same API.

213
00:18:00,400 --> 00:18:02,550
And so some super exciting stuff as well.

214
00:18:02,740 --> 00:18:08,950
If you want to learn how to make that go check out our Mac development course had dot com.

215
00:18:09,100 --> 00:18:15,880
And yes so I hope you guys are having fun and we got just a couple of more features that I want to get

216
00:18:15,880 --> 00:18:17,000
in for you guys.

217
00:18:17,020 --> 00:18:25,060
And yeah we're getting close to the end so I'm going to sign off here and just add and commit my changes

218
00:18:25,120 --> 00:18:27,630
and then I'll see you guys on the next one.