1 00:00:07,480 --> 00:00:08,680 Everyone welcome back. 2 00:00:08,770 --> 00:00:11,180 Johnny be here with slopes dot com. 3 00:00:11,320 --> 00:00:17,560 And this lesson is the one that we have been building up to this entire section and this lesson we make 4 00:00:17,560 --> 00:00:25,350 our chat app a chat app meaning to have real time communication between multiple devices multiple platforms. 5 00:00:25,430 --> 00:00:28,480 And so this is going to be some super exciting stuff. 6 00:00:28,480 --> 00:00:30,130 Hope you guys are ready for it. 7 00:00:30,130 --> 00:00:34,230 All right we're going to start out here in our socket service starts we have to file. 8 00:00:34,320 --> 00:00:39,470 And the last lesson we added messages right and we are displaying messages. 9 00:00:39,550 --> 00:00:46,840 And so now we need to be able to listen for when those messages are sent to the server and then sent 10 00:00:46,840 --> 00:00:48,760 out to sent back to us. 11 00:00:48,760 --> 00:00:49,200 All right. 12 00:00:49,450 --> 00:00:53,830 So we are going to create our get message function. 13 00:00:54,340 --> 00:00:59,960 So as we get to we're going to say fonk get chat message. 14 00:01:00,220 --> 00:01:03,670 All right and then we're going to have a completion handler 15 00:01:07,050 --> 00:01:08,940 say at escaping 16 00:01:11,800 --> 00:01:13,540 completion handler. 17 00:01:14,020 --> 00:01:14,320 All right. 18 00:01:14,320 --> 00:01:24,140 So let's take a look at our API code and then open up Padam And see here new message. 19 00:01:24,790 --> 00:01:25,020 All right. 20 00:01:25,030 --> 00:01:28,210 So playing out on new message we've done this part. 21 00:01:28,210 --> 00:01:35,170 We send the server all of this information it creates a new message store it in the database and then 22 00:01:35,170 --> 00:01:36,660 sends out a new Mitt. 23 00:01:36,880 --> 00:01:41,210 And so here is the image that we are going to be receiving from the server. 24 00:01:41,380 --> 00:01:49,300 The event is called Message created and this is the data array that we're going to be receiving remember 25 00:01:49,750 --> 00:01:55,700 in with such a dot and we received back a data array. 26 00:01:55,810 --> 00:01:56,080 Right. 27 00:01:56,100 --> 00:01:58,790 And that's just an array of type any. 28 00:01:59,130 --> 00:02:10,180 And so ours is going to be one two three four five six seven eight items the body the user id the channel 29 00:02:10,180 --> 00:02:14,060 ID user name user Avatar Avatar color Heidi. 30 00:02:14,080 --> 00:02:15,860 And then the time stamp prank. 31 00:02:16,270 --> 00:02:18,190 So let's get to it. 32 00:02:18,180 --> 00:02:23,260 We're going to receive that array of data. 33 00:02:23,260 --> 00:02:29,400 We're going to parse through it and pull out the necessary information and then we're going to do it 34 00:02:29,400 --> 00:02:38,020 check because we're only interested in because someone else user Billy-Bob could be using this app and 35 00:02:38,020 --> 00:02:39,930 he could be in a different channel than us. 36 00:02:40,120 --> 00:02:45,130 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,130 --> 00:02:50,920 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,920 --> 00:02:56,140 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,170 --> 00:03:00,990 service array of messages and then we'll reload our table data. 40 00:03:01,030 --> 00:03:02,450 If not we're just going to ignore it. 41 00:03:02,590 --> 00:03:03,050 All right. 42 00:03:03,220 --> 00:03:04,000 So let's get to it. 43 00:03:04,000 --> 00:03:09,970 We're going to say socket not on and we want this one right here. 44 00:03:09,960 --> 00:03:20,860 Event with string in the normal callback the event name is a message created the callback is going to 45 00:03:20,860 --> 00:03:24,530 press enter and we have an array of any type. 46 00:03:24,710 --> 00:03:27,910 And so we're going to call this data array. 47 00:03:28,150 --> 00:03:31,620 The anger the acknowledgment the middle we're going to call his S.K.. 48 00:03:32,170 --> 00:03:36,110 And oh no AC OK. 49 00:03:36,190 --> 00:03:37,170 There you go. 50 00:03:37,270 --> 00:03:42,760 And then in code I get to close this bottom pane. 51 00:03:42,980 --> 00:03:49,280 So now we have to parse through this data array and get the information that we want. 52 00:03:49,280 --> 00:03:56,830 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,230 --> 00:04:09,020 And that is the zeroth item telling us that we're going to test that as a string else return. 54 00:04:09,050 --> 00:04:18,380 All right next up we're going to get the the channel IDs to guard that channel Heidi is equal to data 55 00:04:19,210 --> 00:04:19,990 array. 56 00:04:20,300 --> 00:04:29,260 And this one is actually number two has a string else return. 57 00:04:29,270 --> 00:04:35,580 And that's because if you look in Adam we're not actually storing the user id in our message model. 58 00:04:35,600 --> 00:04:40,430 So that's just superfluous information that we that we're not using. 59 00:04:40,430 --> 00:04:40,720 All right. 60 00:04:40,730 --> 00:04:49,630 And then I'm going to copy copy and paste these as we we've got one two three four Let's go through 61 00:04:49,630 --> 00:04:50,510 these. 62 00:04:50,590 --> 00:04:55,930 Next up we've got the user name and that is going to be data array. 63 00:04:55,930 --> 00:04:58,580 Number three has a string. 64 00:04:58,600 --> 00:05:01,960 Then we have the user have the. 65 00:05:02,380 --> 00:05:06,050 And that's going to be data array number four. 66 00:05:06,450 --> 00:05:10,930 And then we have the user have a tar color. 67 00:05:11,330 --> 00:05:14,740 And that's can be data array number 5. 68 00:05:14,970 --> 00:05:21,910 And then we have the message ID and that's going to be data array item number 6. 69 00:05:22,450 --> 00:05:34,930 And then lastly we have one more to get a copy again and this is the time stamp and that is the 7 item 70 00:05:34,960 --> 00:05:36,740 in our data array. 71 00:05:36,970 --> 00:05:39,320 Cassaday cast it to stream. 72 00:05:39,750 --> 00:05:44,220 And so now we know pretty much everything we need to know about the message. 73 00:05:44,290 --> 00:05:49,300 And so like I was saying now we're going to do it check to make sure that the incoming message is in 74 00:05:49,300 --> 00:05:53,650 the channel that we care about that it's in the channel that we are selected. 75 00:05:53,650 --> 00:05:57,880 All right so when we say if channel Heidi 76 00:06:03,550 --> 00:06:12,400 is equal to message service that instance the selected channel Heidi 77 00:06:20,470 --> 00:06:30,880 and we are logged in and off service instance that is logged in then we're going to create a new message 78 00:06:31,120 --> 00:06:38,770 appended to our message service and then we're going to say completion is true so that we can reload 79 00:06:38,770 --> 00:06:42,160 our table data over in the channel or in the chat. 80 00:06:42,210 --> 00:06:42,580 All right. 81 00:06:42,640 --> 00:06:55,000 So say let new message equal to message and the initialiser you're going to say the message is message 82 00:06:55,180 --> 00:07:07,390 body the user name is user name channel ID is channel ID the user Avatar is user Avatar use your avatar 83 00:07:07,390 --> 00:07:09,850 color is user have a color. 84 00:07:09,970 --> 00:07:14,710 The ID is ID and time stamp is Pakistan. 85 00:07:15,160 --> 00:07:21,650 All right so now we are going to append this new message to our arrays and when I say Message Service 86 00:07:22,060 --> 00:07:31,290 instance that and messages that append new element the new element that we are appending is this new 87 00:07:31,290 --> 00:07:43,200 message that we just created and then we're going to say completion is true if the channel ID of this 88 00:07:43,200 --> 00:07:48,630 incoming message does not match our selected channel ID then we aren't going to do anything and we're 89 00:07:48,630 --> 00:07:51,480 going to see completion is false. 90 00:07:51,920 --> 00:07:52,490 Awesome. 91 00:07:52,670 --> 00:07:59,760 Save that little bit of cleanup here and a recap. 92 00:07:59,790 --> 00:08:05,660 We are listening for team event from the server called Message created. 93 00:08:05,970 --> 00:08:09,480 If we receive it we get with it a data array. 94 00:08:09,570 --> 00:08:14,390 We parse through that data array to get all of the information that we want. 95 00:08:14,640 --> 00:08:20,190 Then we do a check to make sure that the incoming message is indeed part of the channel that we care 96 00:08:20,190 --> 00:08:20,850 about. 97 00:08:20,850 --> 00:08:27,460 If so create a new message appended to our array of messages and see completion is equal to true. 98 00:08:27,540 --> 00:08:33,690 So that in our chat Visi we can reload the table view. 99 00:08:33,990 --> 00:08:36,550 All right and so I'm going to go out and put this down here. 100 00:08:36,630 --> 00:08:38,630 Below are notifications. 101 00:08:38,630 --> 00:08:48,930 I'm going to say socket service dot instance dot get chat message we got a completion handler or a closure 102 00:08:49,000 --> 00:08:50,310 and say success. 103 00:08:50,610 --> 00:08:58,600 And so if we are successful if success then we are going to say I'm self-taught. 104 00:08:58,650 --> 00:09:05,340 Table View daquiri you load data and that's it. 105 00:09:05,400 --> 00:09:06,610 Let's go ahead and test this. 106 00:09:06,620 --> 00:09:08,360 I just want to run this. 107 00:09:08,490 --> 00:09:09,300 All righty. 108 00:09:09,310 --> 00:09:11,190 So here we go. 109 00:09:11,250 --> 00:09:17,900 I'm going to send a message sending a message on Sakis. 110 00:09:17,920 --> 00:09:26,880 It's going to press send button and boom there it is sending a message on sockets. 111 00:09:27,000 --> 00:09:27,340 All right. 112 00:09:27,390 --> 00:09:30,420 So that's pretty darn cool. 113 00:09:30,420 --> 00:09:36,840 Let's make it so that when we send it and receive it it scrolls down to the most to the latest one. 114 00:09:36,870 --> 00:09:37,290 Right. 115 00:09:37,470 --> 00:09:45,150 So here in the GET check message in the chat room let's say we're going to do a check to see if there 116 00:09:45,150 --> 00:09:50,120 are more than if we have multiple messages then we're just going to scroll down to the bottom one. 117 00:09:50,180 --> 00:10:03,060 So when I say Message Service that instance dot messages does count if we have more than 0 and then 118 00:10:03,060 --> 00:10:12,900 we're going to scroll to the bottom so we can see a self-taught table view that scroll to row at index 119 00:10:12,900 --> 00:10:13,480 path. 120 00:10:13,620 --> 00:10:14,150 OK. 121 00:10:14,550 --> 00:10:18,630 And so we need to create a let's create a variable for the index path. 122 00:10:18,630 --> 00:10:21,750 We can say it and index. 123 00:10:21,750 --> 00:10:30,870 So we're going to create an index path for the very last one and let's say Index path and we'll initialize 124 00:10:30,870 --> 00:10:34,260 that to be row and S.. 125 00:10:34,410 --> 00:10:45,000 The row is going to be Message Service instance messages that count minus 1. 126 00:10:45,000 --> 00:10:52,200 So that will be the very last row for us and the section is zero since we only have the 1 section. 127 00:10:52,200 --> 00:10:57,870 So then here and scroll to row in the row we're going to scroll to is I have a typo here. 128 00:10:57,900 --> 00:10:59,950 This should be an index. 129 00:11:00,180 --> 00:11:07,320 OK we're going to scroll to and index at and then you can specify a position. 130 00:11:07,320 --> 00:11:13,020 So here we're going to say Dot and then I can get in here I can show you the other ones I you can do 131 00:11:13,040 --> 00:11:19,150 dot dot dot bottom the middle we're going to do dot bottom so this rolls all the way to the bottom and 132 00:11:19,180 --> 00:11:21,930 then for animated we're going to say false. 133 00:11:22,050 --> 00:11:22,870 OK. 134 00:11:23,250 --> 00:11:27,450 And let's go ahead and run that again. 135 00:11:27,570 --> 00:11:27,930 All right. 136 00:11:27,930 --> 00:11:30,720 So let's try that one more time. 137 00:11:30,720 --> 00:11:38,570 In fact I'll just be up here and I'm going to say scroll to bottom send it hand. 138 00:11:38,580 --> 00:11:39,300 Boom there we go. 139 00:11:39,300 --> 00:11:40,820 Scroll to bottom. 140 00:11:40,860 --> 00:11:44,730 All right so now I'm going to show you the real cool. 141 00:11:44,760 --> 00:11:53,650 So this here is the Mac chat app that I build and teach how to build in our Mac OS development course. 142 00:11:54,030 --> 00:11:56,070 And check this out. 143 00:11:56,280 --> 00:11:58,340 So I'm going to type a message here. 144 00:11:58,340 --> 00:12:12,030 And our Mac chat app come in from Mac app and watch over here in our iOS app boom shows up right away. 145 00:12:12,030 --> 00:12:17,780 So we have a cross-platform cross-platform realtime chap working now. 146 00:12:17,940 --> 00:12:22,170 And right back at Yeah. 147 00:12:23,130 --> 00:12:31,710 And then I press the send button and immediately pops up over here and we can check out other channels. 148 00:12:31,910 --> 00:12:37,580 So just to check that we aren't getting messages that are sent in other channels showing up and I say 149 00:12:37,580 --> 00:12:43,200 here sent from a random case. 150 00:12:43,560 --> 00:12:51,430 Yeah we didn't get anything show up here but if we go into a random then hey look at that. 151 00:12:51,440 --> 00:12:58,540 So this is some super exciting and awesome stuff you guys. 152 00:13:02,410 --> 00:13:04,510 I really I really enjoyed making these apps. 153 00:13:04,510 --> 00:13:08,610 It was super fun working with sockets and sockets and everything. 154 00:13:08,620 --> 00:13:11,770 So what can we do next. 155 00:13:11,770 --> 00:13:17,170 You know there's a whole bunch of stuff that we can still do some cleanup stuff that I wanted to take 156 00:13:17,170 --> 00:13:19,120 care of right now. 157 00:13:19,150 --> 00:13:24,460 So first thing is if we click on log out these messages still stay here. 158 00:13:24,460 --> 00:13:26,390 So this take care of that. 159 00:13:26,910 --> 00:13:33,940 Let's go over to are usually the service when we log out user we need to clear all of the messages outsing 160 00:13:33,980 --> 00:13:40,600 the same message service dot instance dot clear messages. 161 00:13:40,820 --> 00:13:41,670 I'm going to save that. 162 00:13:41,680 --> 00:13:51,010 And then in our chat we see in our user data did change function here when we're not logged in we need 163 00:13:51,010 --> 00:13:53,740 to say table. 164 00:13:54,190 --> 00:13:59,370 Nope nope table view dot her reload data. 165 00:13:59,370 --> 00:14:01,590 All right so that should take care of that. 166 00:14:01,920 --> 00:14:10,260 And then the last thing that I wanted to do was when we were here in the chair there's blue button is 167 00:14:10,260 --> 00:14:13,840 actually only supposed to show up if we have entered text. 168 00:14:13,940 --> 00:14:18,150 So just kind of a nice little X user experience and hence mint. 169 00:14:18,360 --> 00:14:19,800 So let's do that. 170 00:14:19,800 --> 00:14:26,490 To do that we're going to use an action from the textfield itself and we're going to do a check to see 171 00:14:26,490 --> 00:14:29,060 if an editing has begun. 172 00:14:29,070 --> 00:14:32,850 And when it stopped and I will hide and show the send button. 173 00:14:32,850 --> 00:14:33,540 Based on that. 174 00:14:33,540 --> 00:14:33,950 All right. 175 00:14:34,170 --> 00:14:37,030 So to do that we're going to need to do a couple of things. 176 00:14:37,050 --> 00:14:44,310 Got a chair beside us with the option and click on main story board and we're going to need an outlet 177 00:14:44,670 --> 00:14:47,450 for our Send button. 178 00:14:47,490 --> 00:14:58,820 So from here I'm going to control and drag and say Send button and connect and then down here. 179 00:14:58,830 --> 00:15:01,480 Let's see. 180 00:15:02,530 --> 00:15:06,960 Maybe right here before the Send Message button. 181 00:15:07,170 --> 00:15:10,990 We're going to do a send or not the send button. 182 00:15:11,070 --> 00:15:14,410 We're going to get the textfield the message text box. 183 00:15:14,440 --> 00:15:21,360 I'm going to control drag over and change it to an action and the event that we want is editing changed. 184 00:15:21,360 --> 00:15:29,410 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:30,120 --> 00:15:36,500 It's a little bit more specific message box editing. 186 00:15:36,790 --> 00:15:37,150 Right. 187 00:15:37,170 --> 00:15:41,910 And I'm going to say connect when I close erst it Ed.. 188 00:15:42,780 --> 00:15:52,650 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,650 --> 00:15:53,770 we are typing. 190 00:15:54,000 --> 00:16:05,190 So I'm thinking we keep a variable up here called variables called The bar is typing and will default 191 00:16:05,190 --> 00:16:11,880 to false and then down here in our message box editing file or function. 192 00:16:12,290 --> 00:16:26,220 We're going to say if the message text box that text is equal to an empty string then is typing is false 193 00:16:27,360 --> 00:16:50,660 and we are going to send by and that is hidden is equal to true else if his typing is false then send 194 00:16:51,430 --> 00:16:57,990 and is hitting is equal to false. 195 00:16:58,490 --> 00:17:03,290 And then we're going to say it is typing back to true. 196 00:17:03,650 --> 00:17:04,810 OK. 197 00:17:05,700 --> 00:17:11,870 And then another thing that we need to do before we run this is to set the send button to be hidden 198 00:17:12,060 --> 00:17:12,820 right off the bat. 199 00:17:12,870 --> 00:17:20,540 All right so you do that right here in this case and and it is hidden is equal to true. 200 00:17:21,000 --> 00:17:22,730 Let's run that. 201 00:17:22,770 --> 00:17:26,060 Ready to open this up top of the keyboard. 202 00:17:26,100 --> 00:17:27,160 I'm going to start typing in. 203 00:17:27,180 --> 00:17:29,040 Oh he shows up. 204 00:17:29,130 --> 00:17:31,240 Oh hey shows up. 205 00:17:31,500 --> 00:17:32,100 All right. 206 00:17:32,100 --> 00:17:34,470 Very cool. 207 00:17:34,470 --> 00:17:38,490 All righty so yeah this has been an exciting lesson. 208 00:17:38,490 --> 00:17:47,190 We went through we added the listener from the API so that we can have immediate real time chat going 209 00:17:47,190 --> 00:17:47,790 back and forth. 210 00:17:47,790 --> 00:17:56,370 I showed you the the the I showed you the Mac chat app which you know communicated fluidly with the 211 00:17:56,370 --> 00:18:00,080 iOS app because they're both sharing the same back and the same API. 212 00:18:00,440 --> 00:18:02,600 And so some super exciting stuff as well. 213 00:18:02,790 --> 00:18:08,640 If you want to learn how to make that go check out our Mac development course had dev soapstar come 214 00:18:09,150 --> 00:18:15,930 and yes so I hope you guys are having fun and we got just a couple of more features that I want to get 215 00:18:15,930 --> 00:18:19,450 in for you guys and yeah we're getting close to the end. 216 00:18:19,680 --> 00:18:26,790 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 217 00:18:26,790 --> 00:18:27,660 one.