1 00:00:07,980 --> 00:00:09,450 Everyone welcome back. 2 00:00:09,510 --> 00:00:14,030 Johnny B here with slopes dot com and in this lesson we're going to work with some exciting stuff. 3 00:00:14,040 --> 00:00:21,720 We are finally getting into sockets and so we're going to believe the world of API calls for a time 4 00:00:22,080 --> 00:00:28,890 meaning the the the one time send and receive a request type of API calls. 5 00:00:28,890 --> 00:00:35,880 Now we're going to look at Web sockets being able to have a persistent open line of communication between 6 00:00:35,880 --> 00:00:39,020 your app and your server. 7 00:00:39,060 --> 00:00:40,210 So that's super exciting. 8 00:00:40,290 --> 00:00:45,400 Earlier we talked about some use cases that you would want this. 9 00:00:45,540 --> 00:00:49,810 I mean the one that we're using right now is for a chat app you know you want to be able to have real 10 00:00:49,960 --> 00:00:55,170 time communication back and forth between people between different people on your apps. 11 00:00:55,180 --> 00:00:58,140 Another good examples would be like gaming. 12 00:00:58,440 --> 00:01:02,850 So you have like a tic tac toe game or something you want to know right when the other person places 13 00:01:02,850 --> 00:01:08,370 their piece or chess or pretty much any type of gaming thing where are you doing multiplayer. 14 00:01:08,370 --> 00:01:13,490 You want to be able to know when the other player has done something right. 15 00:01:13,560 --> 00:01:19,950 Or a news feed or I mean there's a million examples of you know where sockets would be would be really 16 00:01:19,950 --> 00:01:21,290 helpful right. 17 00:01:21,930 --> 00:01:23,190 So what it does. 18 00:01:23,190 --> 00:01:29,930 Like I said it creates a persistent connection between the app and your server. 19 00:01:29,970 --> 00:01:34,870 And once we are connected we're able to send back and forth information freely. 20 00:01:34,890 --> 00:01:41,950 Now if you want to decode sockets from scratch be a pretty big challenge. 21 00:01:42,120 --> 00:01:49,760 Luckily for us some smart people have made it a lot easier and we're going to be using a library called 22 00:01:49,770 --> 00:01:50,830 socket. 23 00:01:51,030 --> 00:01:51,950 Hi Joe. 24 00:01:52,170 --> 00:01:57,490 And let me just pull up a Google here real quick so I can show you. 25 00:01:57,490 --> 00:02:04,210 All right so if you just search for socket o swift You can check out a couple of their sites. 26 00:02:04,210 --> 00:02:06,410 All right so here's their here's the good hub. 27 00:02:07,080 --> 00:02:12,380 And so you can kind of read through here and see see how easy it is. 28 00:02:12,420 --> 00:02:16,560 The first thing that we're going to be doing is we're going to create these We're going to instantiate 29 00:02:16,560 --> 00:02:17,920 the socket. 30 00:02:18,000 --> 00:02:25,380 Then you've got to do the connection and then we're going to be working with emissions emits and DONZE. 31 00:02:25,390 --> 00:02:27,590 All right so we'll we'll talk a little bit more about that. 32 00:02:27,610 --> 00:02:33,240 But yeah if you want to check out some of their documentation they have some pretty good documentation 33 00:02:33,780 --> 00:02:37,470 as well as some good other good tutorials out there. 34 00:02:37,470 --> 00:02:41,750 All right so that's enough of that. 35 00:02:42,130 --> 00:02:45,930 So yes go ahead and get started and talk about how we're going to be using it. 36 00:02:45,930 --> 00:02:48,500 All right so we're going to create a new service. 37 00:02:48,540 --> 00:02:56,310 Yet another one so I'm going to call this new file and this is going to be a Coke touch class and this 38 00:02:56,310 --> 00:03:04,440 is going to be a subclass of an s object and the class is going to be called socket service. 39 00:03:04,650 --> 00:03:06,180 OK I'm going to say next. 40 00:03:06,900 --> 00:03:07,980 And create 41 00:03:10,810 --> 00:03:19,220 all ready and like are other services and this is also going to be a singletons are going to say static 42 00:03:19,850 --> 00:03:25,570 instance equal access socket service instantiate. 43 00:03:26,180 --> 00:03:32,930 And the other thing that we need to do for this because it's an object we need to have an initializer 44 00:03:32,930 --> 00:03:37,500 in case we're going to have a say override in it and then we're just going to say superdad in it and 45 00:03:37,610 --> 00:03:39,410 that's all we have to do there. 46 00:03:39,410 --> 00:03:39,690 All right. 47 00:03:39,710 --> 00:03:42,020 Now let's go ahead and create our Succot. 48 00:03:42,020 --> 00:03:45,240 All right so you better import Succot. 49 00:03:45,490 --> 00:03:48,050 So import socket. 50 00:03:48,060 --> 00:03:49,140 I know. 51 00:03:49,440 --> 00:03:54,940 And now that gives us access to all of their variables functions methods et cetera. 52 00:03:55,050 --> 00:04:07,190 And so we're going to say our socket type socket I O client equal to socket I O client and we're going 53 00:04:07,190 --> 00:04:09,880 to initialize it with a u r l right. 54 00:04:09,890 --> 00:04:16,450 So we're creating a socket and we are pointing it to our heart to our API. 55 00:04:16,450 --> 00:04:25,160 You are all again so we're going to generate this with your oh and we're going to say you are 0 from 56 00:04:25,160 --> 00:04:25,690 stream. 57 00:04:25,700 --> 00:04:27,650 Here we go your whole string. 58 00:04:27,670 --> 00:04:36,080 All right and the string is a base you Earl and then we're going to need to add a exclamation point 59 00:04:36,080 --> 00:04:37,990 here and I'm OK. 60 00:04:38,210 --> 00:04:42,680 Force unwrapping this because all this is is a string. 61 00:04:42,680 --> 00:04:43,360 OK. 62 00:04:43,640 --> 00:04:48,570 And I mean you can see it right here there's no way that it doesn't exist. 63 00:04:48,650 --> 00:04:51,690 And if it if it doesn't and it crashes. 64 00:04:52,070 --> 00:04:56,180 That's something that we want to know about so that's why I'm ok with that forswore up there. 65 00:04:56,180 --> 00:04:56,600 All right. 66 00:04:56,600 --> 00:04:59,800 So we created our socket. 67 00:04:59,930 --> 00:05:07,790 Now we need to add a couple of functions to connect or establish the connection between our app and 68 00:05:07,940 --> 00:05:10,190 the and the web server. 69 00:05:10,190 --> 00:05:15,570 Ok so we're going to say phunk establish connection 70 00:05:17,930 --> 00:05:23,710 and to do that all we have to do is say socket not connect. 71 00:05:24,350 --> 00:05:30,320 And if we open up our right pain and click right here are a very simple description connects to the 72 00:05:30,320 --> 00:05:30,950 server. 73 00:05:30,950 --> 00:05:32,410 All right so that's all we need. 74 00:05:32,460 --> 00:05:42,370 Then we're going to want a way to disconnect something to say func close connection and that is socket 75 00:05:42,420 --> 00:05:45,090 Tott disconnect. 76 00:05:45,810 --> 00:05:46,430 All right. 77 00:05:46,520 --> 00:05:52,220 So when we launch our app we want to establish connection so we were you know we're opening up that 78 00:05:52,280 --> 00:05:55,280 connection between the API and our client. 79 00:05:55,280 --> 00:05:59,920 So I'm thinking in our app delicate that's where we should put this. 80 00:05:59,920 --> 00:06:07,440 All right so here under did become active forces restarts any tests that were paused while the addiction 81 00:06:07,460 --> 00:06:09,920 was inactive and so has been put that right here. 82 00:06:10,130 --> 00:06:21,710 So when I say socket service instance that instance dot Let's see what do we even call it establish 83 00:06:21,740 --> 00:06:23,420 establish connection. 84 00:06:23,420 --> 00:06:26,110 All right so when did we become active We're going to establish the connection. 85 00:06:26,390 --> 00:06:34,850 And when we're about to terminate we are going to disconnect so when the socket service the instance 86 00:06:34,850 --> 00:06:38,990 that close connection right there we go. 87 00:06:39,530 --> 00:06:45,560 So now when we launch the app or when we come back into the app we establish a connection between the 88 00:06:45,590 --> 00:06:47,050 client and the server. 89 00:06:47,180 --> 00:06:50,520 And when we close it we close that connection all right. 90 00:06:50,900 --> 00:06:52,510 So that's good. 91 00:06:52,730 --> 00:07:01,520 Going back to our socket service we are now ready to actually create a function that is going to add 92 00:07:01,520 --> 00:07:02,240 a channel. 93 00:07:02,240 --> 00:07:09,590 All right so in the last lesson we created that model that pops up when we click on the add channel 94 00:07:09,590 --> 00:07:10,240 button. 95 00:07:10,370 --> 00:07:16,370 And now we're actually ready to treat the function that has a channel and you may have been thinking 96 00:07:16,370 --> 00:07:23,300 that we were going to do something like we did in our office services where we do an album of fire request 97 00:07:23,330 --> 00:07:30,980 and do it post and stuff but we're actually handy handling the addition of channels and messages via 98 00:07:30,980 --> 00:07:41,270 sockets or so how that works is imagine we have our app and we have this open connection between our 99 00:07:41,270 --> 00:07:44,180 app and the server API. 100 00:07:44,690 --> 00:07:50,990 So when we create a channel what we're actually going to be doing is sending what is called an image. 101 00:07:51,080 --> 00:07:51,570 All right. 102 00:07:51,710 --> 00:07:58,760 So when when something is being sent via web sockets that's called any it and it can be any minute from 103 00:07:58,820 --> 00:08:01,550 either the app or the API. 104 00:08:01,730 --> 00:08:08,750 So if the app is sending something to the server then it is performing any bit from the to the server 105 00:08:09,020 --> 00:08:15,300 if the server sending out information is performing any minute from the server out to however many apps 106 00:08:15,300 --> 00:08:23,500 are currently connected and then the the way to receive information is called Hey dot on. 107 00:08:23,550 --> 00:08:23,850 OK. 108 00:08:23,850 --> 00:08:28,450 So it would look something like this right here socket dot on. 109 00:08:28,660 --> 00:08:29,320 OK. 110 00:08:29,490 --> 00:08:32,880 And then the other one is Succot thought you Mitt. 111 00:08:33,050 --> 00:08:33,340 All right. 112 00:08:33,360 --> 00:08:39,600 So those that's kind of the terminology that and that's involved with sending and receiving information 113 00:08:39,600 --> 00:08:40,950 dealing with sockets. 114 00:08:41,220 --> 00:08:50,060 OK so when we added channel the. 115 00:08:50,550 --> 00:08:56,390 So when we add a channel we are performing the Mitt from the app and we send that channel to the EPA 116 00:08:56,390 --> 00:08:57,090 server. 117 00:08:57,350 --> 00:08:57,980 Ok. 118 00:08:58,310 --> 00:09:04,970 And then what happens is the API gets that information and it creates a channel object saves it to the 119 00:09:04,970 --> 00:09:14,060 database and then immediately disperses that channel back to our app and to as many apps are currently 120 00:09:14,060 --> 00:09:16,470 connected at the time. 121 00:09:16,670 --> 00:09:20,210 So we're going to need a couple of functions we're going to need to know we're going to have a function 122 00:09:20,210 --> 00:09:29,120 to emit a channel object to the server but then we also need to have a function that can detect when 123 00:09:29,120 --> 00:09:36,860 that mess or when that channel comes back to us because we don't actually add the channel to to our 124 00:09:36,860 --> 00:09:42,680 channels or re in our message service until we detect that coming back from the API and then we know 125 00:09:42,680 --> 00:09:47,930 that the addition of the channel has been successful on the online database. 126 00:09:47,930 --> 00:09:51,550 All right so let's go ahead and code that out and see how that looks. 127 00:09:51,650 --> 00:09:52,980 It's pretty simple. 128 00:09:52,980 --> 00:10:03,380 All we got to do say phunk add channel and actually before we before we get into this and check out 129 00:10:04,070 --> 00:10:06,820 the actual API code. 130 00:10:06,830 --> 00:10:07,400 All right. 131 00:10:07,580 --> 00:10:10,270 So here we have the API code. 132 00:10:10,270 --> 00:10:12,380 This is in the source. 133 00:10:12,410 --> 00:10:19,640 And then just right here at the top level index dodginess and right here under socket is all the socket 134 00:10:19,640 --> 00:10:20,330 stuff. 135 00:10:20,560 --> 00:10:21,510 OK. 136 00:10:21,920 --> 00:10:29,970 So I was talking about dot on and Dot emits all right and so here you can see client dot on. 137 00:10:30,120 --> 00:10:39,560 And so the client or the the API is listening for any information coming from the client with the event 138 00:10:39,620 --> 00:10:40,330 name. 139 00:10:40,430 --> 00:10:44,870 And so how sockets how socket I O works is it works on events. 140 00:10:44,870 --> 00:10:50,570 So the server is listening for an event called new channel and then it's expecting a couple of parameters 141 00:10:50,690 --> 00:10:57,920 being name and description and then it creates a new channel object from that information and saves 142 00:10:57,920 --> 00:11:07,100 it to the database and then it gets back to the to any apps that are currently connected it emits and 143 00:11:07,100 --> 00:11:09,640 sends back that channel that was just created. 144 00:11:09,740 --> 00:11:10,340 All right. 145 00:11:10,670 --> 00:11:17,300 So let's go ahead and get back into tax code and so we're going to need to Passons some information 146 00:11:17,300 --> 00:11:21,310 we're going to need the channel name which is a string. 147 00:11:21,620 --> 00:11:27,660 And we're going to need the channel description which is also a string. 148 00:11:28,040 --> 00:11:35,080 And then we're going to have our completion handlers going to say completion we close this right pain 149 00:11:36,880 --> 00:11:42,660 at escaping completion handler we can 150 00:11:45,530 --> 00:11:53,140 make some room down here and then we are going to emit from our app to the API. 151 00:11:53,150 --> 00:12:02,470 So we're going to say socket to emit and we want this phone right here emit event string and then items 152 00:12:02,730 --> 00:12:11,740 in case caesareans say the event looks like I was showing you in the API code. 153 00:12:12,260 --> 00:12:16,610 And the API code is right here. 154 00:12:16,610 --> 00:12:18,350 New Channel all right. 155 00:12:18,380 --> 00:12:22,450 So that's just a string identifier. 156 00:12:22,450 --> 00:12:25,080 So this is new channel. 157 00:12:25,080 --> 00:12:31,430 And then the items that we are sending again going back to the API code we are expecting a name and 158 00:12:31,430 --> 00:12:34,030 then a description and it needs to be in this order. 159 00:12:34,290 --> 00:12:34,850 OK. 160 00:12:34,900 --> 00:12:41,890 Because the API code is just going to take whatever is passed into the function in this order and then 161 00:12:41,950 --> 00:12:48,550 assign those values those variables to these properties and come back to X codes name and description 162 00:12:49,120 --> 00:12:55,560 and so the this channel name can then channel description. 163 00:12:55,760 --> 00:12:58,670 These are what is passed into into the function. 164 00:12:58,930 --> 00:13:03,700 And that's it to completion. 165 00:13:03,760 --> 00:13:04,580 True. 166 00:13:05,350 --> 00:13:09,750 That's all it takes to send out to the API. 167 00:13:09,950 --> 00:13:13,570 Some information super simple super easy. 168 00:13:13,630 --> 00:13:13,900 So yeah. 169 00:13:13,920 --> 00:13:20,980 Now we could implement that in our ad channel ABC over here so we can say here and create channel preste 170 00:13:22,030 --> 00:13:26,680 we could get the name and channel description and then pass that into this disfunctions So we're going 171 00:13:26,680 --> 00:13:37,900 to say guard let channel name equal and that's going to be name text dot text where. 172 00:13:37,940 --> 00:13:43,420 And so we're just going to do a check to make sure that we actually have a some sort of name actually 173 00:13:43,420 --> 00:13:51,420 written in here and it's going to be named text that text is not equal to and destroy anything else. 174 00:13:51,470 --> 00:13:52,720 I'll just return. 175 00:13:53,320 --> 00:13:55,570 And so we're going to make sure that we have a channel name. 176 00:13:55,570 --> 00:14:03,820 We're not going to enforce a description those we're just going to say God let channel ask people what 177 00:14:03,820 --> 00:14:06,780 do we call this chant desk. 178 00:14:06,940 --> 00:14:12,190 That text else returned. 179 00:14:12,520 --> 00:14:18,370 OK so now we have unwrapped variables for our channel name and general description. 180 00:14:18,610 --> 00:14:26,230 So now we can call our socket service that instance that ad channel I'm going to pass into that function 181 00:14:26,650 --> 00:14:38,080 the channel name the channel description which is channel desk and completion pressing enter and change 182 00:14:38,080 --> 00:14:39,330 that to success. 183 00:14:39,610 --> 00:14:48,010 And right here we're going to say if success then we're just going to dismiss the models after we've 184 00:14:48,010 --> 00:14:52,390 created the modal press the Create channel button and we're just going to dismiss it's wrong to say 185 00:14:52,930 --> 00:14:54,800 self-taught dismiss. 186 00:14:54,900 --> 00:14:56,220 And I mean that is true. 187 00:14:56,290 --> 00:15:05,140 And the completion is going to save that and now this would actually work we could go in and create 188 00:15:05,140 --> 00:15:08,020 a channel but we haven't. 189 00:15:08,030 --> 00:15:13,510 Remember that would just be sending it to the API and it would try to send it back but we don't have 190 00:15:14,650 --> 00:15:25,340 that function to detect the emission from the API as it is sent out to across those open lines of communication. 191 00:15:25,360 --> 00:15:29,170 So we need to now create the socket dot on. 192 00:15:29,170 --> 00:15:29,680 All right. 193 00:15:29,800 --> 00:15:34,540 And this one's This one is more complex but but not by much. 194 00:15:34,540 --> 00:15:40,360 All right so we're going to see phunk get channel and that's when we're just going to have a completion 195 00:15:40,360 --> 00:15:40,760 handlers. 196 00:15:40,770 --> 00:15:49,740 When I say completion and escaping and completion handler can. 197 00:15:50,090 --> 00:15:50,680 All right. 198 00:15:50,680 --> 00:15:54,180 So when we're sending it out it was a succotash emit. 199 00:15:54,220 --> 00:15:57,150 This time we're we're listening is kind of like an observer. 200 00:15:57,280 --> 00:16:06,500 So we're listening for for the event and the event name we can see it here right here. 201 00:16:06,640 --> 00:16:16,370 So after the API receives a new channel it then emits with a event name of channel created. 202 00:16:16,370 --> 00:16:25,000 And so when the API emits the channel created what it's doing is it's sending back in this order the 203 00:16:25,000 --> 00:16:28,470 name description and channel ID. 204 00:16:28,480 --> 00:16:28,730 All right. 205 00:16:28,730 --> 00:16:36,820 And so that's important because what we receive in X code from from a socket on hold that thought I'll 206 00:16:36,820 --> 00:16:38,190 show you in just one second. 207 00:16:38,320 --> 00:16:49,410 So when you say socket dog on and we want this one right here I'm going to say for here the event is 208 00:16:49,710 --> 00:16:58,930 called Channel created and then call back just going to press enter and see right here what we what 209 00:16:58,950 --> 00:17:04,050 we get back from the socket on is an array of data of type any. 210 00:17:04,140 --> 00:17:04,670 OK. 211 00:17:04,860 --> 00:17:10,140 And the array of data is this. 212 00:17:10,140 --> 00:17:12,770 These these variables right here. 213 00:17:12,840 --> 00:17:20,240 So we're going to get the name description and ID back as an array of type any. 214 00:17:20,250 --> 00:17:20,460 All right. 215 00:17:20,460 --> 00:17:28,290 And so we're going to have to go through and kind of parse out from that array the variables that we 216 00:17:28,380 --> 00:17:28,920 that we want. 217 00:17:28,950 --> 00:17:29,530 Okay. 218 00:17:29,760 --> 00:17:32,430 And then the socket SEEKA emitter. 219 00:17:32,430 --> 00:17:34,150 That's called a socket. 220 00:17:34,290 --> 00:17:36,150 The AC case stands for knowledge. 221 00:17:36,150 --> 00:17:36,800 OK. 222 00:17:37,230 --> 00:17:41,240 So here we're just going to call this data array. 223 00:17:41,610 --> 00:17:42,570 And this variance. 224 00:17:42,660 --> 00:17:43,820 Call it AC K.. 225 00:17:43,860 --> 00:17:49,860 That's the kind of the standard that you can expect to see that be called. 226 00:17:49,860 --> 00:17:53,420 All right so any time you let you see that Ach that's an acknowledgement. 227 00:17:53,730 --> 00:17:58,680 So next up in the code what we're going to do is we're going to parse out of that data array the channel 228 00:17:58,680 --> 00:18:05,820 name description and channel ID and so that we can create a new channel object and then append that 229 00:18:05,820 --> 00:18:09,010 to our message service channels array. 230 00:18:09,030 --> 00:18:09,510 All right. 231 00:18:09,930 --> 00:18:23,730 So when you say guard that channel name equal to the data array and it's going to be the zeroth item 232 00:18:23,730 --> 00:18:30,630 in the array and we know that again because looking at the API code we can see that that's the first 233 00:18:30,630 --> 00:18:31,270 one. 234 00:18:31,480 --> 00:18:38,280 If if you're working with an API that you didn't have access to the code directly you would probably 235 00:18:38,280 --> 00:18:45,690 need to rely on the DPA documentation or you know if you're working with the developer or have a chat 236 00:18:45,690 --> 00:18:46,830 with him or something. 237 00:18:47,110 --> 00:18:49,000 But yes we're going to this. 238 00:18:49,050 --> 00:18:51,930 So remember that this comes back as type any. 239 00:18:51,960 --> 00:18:55,250 So we need to cast as cast this as a string. 240 00:18:55,640 --> 00:19:06,240 And when I say else return if that fails then just return the memory and say guard that data array ops 241 00:19:06,360 --> 00:19:16,410 guard that channel description equal data array and this is our first item. 242 00:19:16,410 --> 00:19:26,670 And so we're going to say no I did not forget the ads here so as string this is going to be as a string 243 00:19:26,670 --> 00:19:29,870 as well's return. 244 00:19:30,930 --> 00:19:37,750 And this one is going to be a card alert channel Id pull data array. 245 00:19:38,040 --> 00:19:40,750 And this is going to be the second one. 246 00:19:40,800 --> 00:19:42,940 This is also going to be cast as a string. 247 00:19:42,990 --> 00:19:47,880 Else return ups the whole street. 248 00:19:48,480 --> 00:19:55,440 All right so now we have channel name description and ID that we are getting from the unit from the 249 00:19:55,440 --> 00:19:59,970 API to our app which we detect with a socket dot on. 250 00:20:00,030 --> 00:20:05,850 And so now we can go ahead and create a new channel objects when we say new channel is equal to channel 251 00:20:06,030 --> 00:20:16,590 and we're going to initialize and we're going to the channel title is channel name channel description 252 00:20:17,220 --> 00:20:20,830 and channel ID. 253 00:20:21,110 --> 00:20:27,450 All right so now we have our new channel is go ahead and appended say messaging service for instance 254 00:20:27,510 --> 00:20:40,380 dot channels append and the new element to append is new channel and I'm going to say completion is 255 00:20:40,380 --> 00:20:42,230 true. 256 00:20:42,270 --> 00:20:42,750 All right. 257 00:20:42,750 --> 00:20:46,540 So just to run through that one more time we are seeing some Gadot on. 258 00:20:46,560 --> 00:20:53,310 So we're listening for an event of type channel created and the data array that comes back from that 259 00:20:53,790 --> 00:20:57,950 is these three objects of type and the. 260 00:20:58,020 --> 00:21:03,390 And so we have to know the order that they're in which is named then description than the channel ID 261 00:21:03,840 --> 00:21:11,430 we cast them as strings we create a new channel object from those variables and then we create then 262 00:21:11,430 --> 00:21:19,310 we append to that new channel to our message services array of channels and then we're then we're done. 263 00:21:19,590 --> 00:21:21,580 So how does it work. 264 00:21:21,660 --> 00:21:31,500 You know having this function well we need to place this in the location that we want to listen for 265 00:21:31,560 --> 00:21:39,030 for this change and for that for us that's in the channel Visi right because that's where we want to 266 00:21:39,030 --> 00:21:41,330 be able to update the list. 267 00:21:41,340 --> 00:21:44,070 So here in channel AVC is where we're going to call this function. 268 00:21:44,070 --> 00:21:52,700 All right you're in general VC in the view did load We're going to say socket service dot instance dot 269 00:21:53,380 --> 00:21:58,890 and get Channel am going to press enter on the completion handle say success. 270 00:21:59,030 --> 00:22:08,360 And so if we successfully receive a new channel then all we need to do is say Table View dot reload 271 00:22:08,360 --> 00:22:08,830 date. 272 00:22:08,960 --> 00:22:12,240 I think I need a self here self-taught table. 273 00:22:12,260 --> 00:22:13,800 You don't reload data. 274 00:22:14,220 --> 00:22:14,790 OK. 275 00:22:15,050 --> 00:22:18,530 So I think that is all we need to do. 276 00:22:18,530 --> 00:22:21,140 We have created our socket service. 277 00:22:21,140 --> 00:22:28,700 We are establishing a connection when we when we launched the app were able to send a new channel to 278 00:22:28,730 --> 00:22:30,200 the API. 279 00:22:30,320 --> 00:22:37,460 And then when it processes that information it will then send out that new channel to all of the apps 280 00:22:37,460 --> 00:22:44,640 that are currently connected and if they have their socket dot on function sending for the event of 281 00:22:44,660 --> 00:22:51,700 channel created We're going to parse out the information create a new channel appended and then channel 282 00:22:51,710 --> 00:22:52,960 visi. 283 00:22:53,390 --> 00:22:58,460 If successful we're just going to reload the data and we'll show that new channel. 284 00:22:58,460 --> 00:23:00,470 So let's go ahead and test this. 285 00:23:01,250 --> 00:23:01,550 All right. 286 00:23:01,550 --> 00:23:02,750 So here we are. 287 00:23:02,870 --> 00:23:05,230 We're logged in at this point. 288 00:23:05,230 --> 00:23:12,020 We have we don't have a lot of logic handling being logged in and logged out and the stuff we're going 289 00:23:12,020 --> 00:23:13,090 to be working on that. 290 00:23:13,100 --> 00:23:18,690 So if you're if you're not logged in then go ahead and log in before you try doing this. 291 00:23:18,890 --> 00:23:23,770 So what we're going to do is we are going to click on the Add a channel button. 292 00:23:23,850 --> 00:23:30,320 And that reminds me we should probably add a check to see if you're logged in before allowing this model 293 00:23:30,320 --> 00:23:30,950 to pop up. 294 00:23:30,950 --> 00:23:32,720 We'll fix that in just a second. 295 00:23:32,720 --> 00:23:37,610 And so we're going to see a socket test description. 296 00:23:37,730 --> 00:23:48,500 Sockets are who I'm going to say create Channel and this will send that emit to the API with this information 297 00:23:48,500 --> 00:23:51,170 Succot test and sockets are cool name and description. 298 00:23:51,170 --> 00:23:57,970 It will create a new channel object to the database and then emit and then do an image of its own. 299 00:23:58,010 --> 00:24:04,100 Out to all of the apps that are connected and they say create channel and hey there it is already socket 300 00:24:04,100 --> 00:24:05,290 test. 301 00:24:05,300 --> 00:24:06,530 All right so that's pretty cool. 302 00:24:06,710 --> 00:24:11,690 But the cool thing is when we have two of these open some I'm going to be back in just a second after 303 00:24:11,690 --> 00:24:13,290 I open up a second simulator. 304 00:24:13,460 --> 00:24:13,790 All right. 305 00:24:13,790 --> 00:24:16,270 So now the cool thing. 306 00:24:16,280 --> 00:24:22,280 So we sought out a channel on our own but now check this out. 307 00:24:22,280 --> 00:24:30,960 So I'm over here and Johnny B's account and let's go select our Random Moment click here and say we're 308 00:24:31,060 --> 00:24:35,390 going to create a new channel say sockets are bomb 309 00:24:38,040 --> 00:24:38,640 DVD 310 00:24:43,300 --> 00:24:45,980 No I don't mean Dick All right. 311 00:24:45,980 --> 00:24:47,350 And so watch over here. 312 00:24:47,500 --> 00:24:49,060 So this is a completely different app. 313 00:24:49,080 --> 00:24:52,460 This could be a person across the continent across the world. 314 00:24:52,740 --> 00:25:00,350 And when I press create channel boom it shows up in the other person's app immediately. 315 00:25:00,450 --> 00:25:06,510 And so that's the power of web sockets and that's what's so exciting about this is that you know we 316 00:25:06,570 --> 00:25:13,740 what we did is we sent sent a new channel from this app to the server and then it came back to both 317 00:25:13,740 --> 00:25:21,180 of these apps and then we were able to tell the app what to do by updating the table. 318 00:25:21,180 --> 00:25:21,830 All right. 319 00:25:21,870 --> 00:25:23,840 So super exciting stuff. 320 00:25:23,880 --> 00:25:27,660 If that doesn't excite you as a developer I don't know what will be. 321 00:25:27,680 --> 00:25:29,980 I mean this is some cool stuff. 322 00:25:30,240 --> 00:25:37,020 So yeah in this lesson we we learned about Suck-Ass we created our socket service could our first couple 323 00:25:37,020 --> 00:25:44,400 of functions that allow us to create and update our table view based on creating and receiving new channels. 324 00:25:44,580 --> 00:25:50,940 And in the next lessons we're going to keep on truckin with some more socket stuff getting the message 325 00:25:50,940 --> 00:25:53,950 functionality and more so we're excited for that. 326 00:25:54,180 --> 00:26:00,240 And just to finish this off I'm going to go ahead and commit and add my changes and I will see you all 327 00:26:00,240 --> 00:26:01,510 in the next one.