1
00:00:08,150 --> 00:00:12,800
Everyone will welcome back Johnny be here with slopes dot com and in this lesson we are going to work

2
00:00:12,800 --> 00:00:14,180
with some exciting stuff.

3
00:00:14,180 --> 00:00:21,800
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,340 --> 00:00:29,060
meaning the the the one time send and receive a request type of API calls.

5
00:00:29,060 --> 00:00:36,080
Now we're going to look at Web sockets being able to have a persistent open line of communication between

6
00:00:36,080 --> 00:00:39,230
your app and your server.

7
00:00:39,230 --> 00:00:40,390
So that's super exciting.

8
00:00:40,490 --> 00:00:45,600
Earlier we talked about some use cases that you would want this.

9
00:00:45,710 --> 00:00:48,740
I mean the one that we're using right now is for a chat app.

10
00:00:48,740 --> 00:00:54,020
You know you want to be able to have real time communication back and forth between people between different

11
00:00:54,020 --> 00:00:55,430
people on your apps.

12
00:00:55,440 --> 00:00:58,610
Other good examples would be like gaming.

13
00:00:58,610 --> 00:01:03,050
So you have like a tic tac toe game or something you want to know right when the other person places

14
00:01:03,050 --> 00:01:08,840
their piece or chess or pretty much any type of gaming thing were you doing multiplayer you want to

15
00:01:08,840 --> 00:01:13,670
be able to know when the other player has done something right.

16
00:01:13,730 --> 00:01:20,120
Or a news feed or I mean there's a million examples of you know where sockets would be would be really

17
00:01:20,120 --> 00:01:21,850
helpful are.

18
00:01:22,100 --> 00:01:23,390
So what it does.

19
00:01:23,390 --> 00:01:30,130
Like I said it creates a persistent connection between the app and your server.

20
00:01:30,170 --> 00:01:35,030
And once we are connected we're able to send back and forth information freely.

21
00:01:35,060 --> 00:01:42,140
Now if you want to Decoud sockets from scratch be a pretty big challenge.

22
00:01:42,290 --> 00:01:49,940
Luckily for some smart people have made it a lot easier and we're going to be using a library called

23
00:01:49,940 --> 00:01:51,060
socket.

24
00:01:51,250 --> 00:01:52,140
Hi Joe.

25
00:01:52,370 --> 00:01:57,660
And let me just pull up a Google here real quick so I can show you.

26
00:01:57,660 --> 00:02:04,360
All right so if you just search for a socket o swift You can check out a couple of their sites.

27
00:02:04,360 --> 00:02:06,830
All right so here's their here's the gate hub.

28
00:02:07,280 --> 00:02:12,490
And so you can kind of read through here and see see how easy it is.

29
00:02:12,590 --> 00:02:16,730
The first thing that we're going to be doing is we're going to create these We're going to instantiate

30
00:02:16,730 --> 00:02:17,940
the socket.

31
00:02:18,200 --> 00:02:25,550
Then you've got to do the connection and then we're going to be working with emissions limits and.

32
00:02:25,550 --> 00:02:27,760
All right so we'll we'll talk a little bit more about that.

33
00:02:27,770 --> 00:02:33,380
But yeah if you want to check out some of their documentation they have some pretty good documentation

34
00:02:33,980 --> 00:02:37,670
as well as there's some good other good tutorials out there.

35
00:02:37,670 --> 00:02:42,260
All right so that's enough of that.

36
00:02:42,350 --> 00:02:46,100
So yes go ahead and get started and talk about how we're going to be using it.

37
00:02:46,100 --> 00:02:48,700
All right so we're going to create a new service.

38
00:02:48,740 --> 00:02:55,780
Yet another one so I'm going to call this new file and this is going to be a coca touch class.

39
00:02:56,060 --> 00:03:04,770
And this is going to be a subclass of an n s object and the class is going to be called socket service.

40
00:03:04,920 --> 00:03:08,150
I'm going to say next and create

41
00:03:11,000 --> 00:03:19,400
all ready and like there are other services and this is also going to be a singletons or in a static

42
00:03:20,060 --> 00:03:28,490
instance equal because Access socket service instantiate and the other thing that we need to do for

43
00:03:28,490 --> 00:03:34,740
this because it's an object we need to have an initializer in case we're going to have a say override

44
00:03:34,790 --> 00:03:35,110
in it.

45
00:03:35,120 --> 00:03:39,590
And then we're just going to say superdad in it and that's all we have to do there.

46
00:03:39,590 --> 00:03:39,880
All right.

47
00:03:39,900 --> 00:03:42,200
Now let's go ahead and create our Succot.

48
00:03:42,200 --> 00:03:45,260
All right so you better import socket.

49
00:03:45,280 --> 00:03:48,650
I also import socket.

50
00:03:48,700 --> 00:03:55,160
Know and now that gives us access to all of their variables functions methods etc..

51
00:03:55,250 --> 00:03:56,960
Now we need to implement the socket.

52
00:03:56,960 --> 00:03:59,630
And this is a slight update to the original video.

53
00:03:59,660 --> 00:04:01,640
Things have changed with the socket.

54
00:04:02,000 --> 00:04:04,330
So we're going to need a socket and a socket manager.

55
00:04:04,340 --> 00:04:13,010
So I'm going to create a variable called manager or constant and I'm going to create a second concept

56
00:04:13,250 --> 00:04:14,440
called socket.

57
00:04:14,570 --> 00:04:22,790
And what's new with it socket I O is that you can now have multiple clients and one manager managing

58
00:04:22,790 --> 00:04:23,470
those clients.

59
00:04:23,500 --> 00:04:25,720
OK so you have a manager socket.

60
00:04:25,740 --> 00:04:27,820
And what we need to do is initialize these.

61
00:04:28,000 --> 00:04:30,300
The moment that this class is initialized.

62
00:04:30,300 --> 00:04:36,230
And so we're going to say self that manager equals socket manager and we're going to use the socket

63
00:04:36,230 --> 00:04:44,520
you're a parameter here and we're going to type in your l and we're going to use the string you are.

64
00:04:44,590 --> 00:04:51,710
We're going to pass in the string and I'm going to go ahead and force unwrap this u r l y because we

65
00:04:51,710 --> 00:04:55,940
have this hardcoded as you can see here at this base you Earles hardcoded it will never crash it will

66
00:04:55,940 --> 00:04:57,100
always be there.

67
00:04:57,200 --> 00:05:03,050
And so we have our manager and now we just simply need our sockets to organise a self-taught socket

68
00:05:03,770 --> 00:05:07,130
equals manager default socket.

69
00:05:07,130 --> 00:05:14,310
And if I build this here we have a fully functional socket and socket manager.

70
00:05:14,360 --> 00:05:14,770
All right.

71
00:05:14,780 --> 00:05:17,600
So we created our socket.

72
00:05:18,110 --> 00:05:25,970
Now we need to add a couple of functions to connect or establish the connection between our app and

73
00:05:26,120 --> 00:05:28,370
the and the web server.

74
00:05:28,370 --> 00:05:34,160
Ok so we're going to say phunk establish connection.

75
00:05:36,110 --> 00:05:44,480
And to do that all we have to do is say socket popped connect and if we open up our right pain and click

76
00:05:44,490 --> 00:05:49,270
right here a very simple description connects to the server.

77
00:05:49,300 --> 00:05:50,540
So that's all we need.

78
00:05:50,670 --> 00:05:59,960
Then we're going to want a way to disconnect so I'm going to see phunk close connection and that is

79
00:05:59,960 --> 00:06:04,030
socket that disconnect.

80
00:06:04,030 --> 00:06:04,690
All right.

81
00:06:04,700 --> 00:06:10,400
So when we launch our app we want to establish connection so we were you know we're opening up that

82
00:06:10,460 --> 00:06:13,460
connection between the API and our client.

83
00:06:13,460 --> 00:06:18,140
So I'm thinking in our app delicate that's where we should put this.

84
00:06:18,140 --> 00:06:25,670
All right so here under did become active versus restarts and the tests that were paused while the application

85
00:06:25,670 --> 00:06:28,300
was inactive has been put that right here.

86
00:06:28,310 --> 00:06:39,890
So when I say socket service that instance no instance dot and see what do we even call it establish

87
00:06:39,940 --> 00:06:41,600
establish connection.

88
00:06:41,600 --> 00:06:45,290
All right so when did we become active We're going to establish that connection and when we're about

89
00:06:45,290 --> 00:06:50,160
to terminate we are going to disconnect.

90
00:06:50,190 --> 00:06:57,170
So the socket service the instance that close connection right there we go.

91
00:06:57,710 --> 00:07:03,770
So now when we launch the app or when we come back into the app we establish a connection between the

92
00:07:03,770 --> 00:07:05,250
client and the server.

93
00:07:05,360 --> 00:07:08,770
And when we close it we close that connection all right.

94
00:07:09,080 --> 00:07:10,840
So that's good.

95
00:07:10,910 --> 00:07:19,700
Going back to our socket service we are now ready to actually create a function that is going to add

96
00:07:19,700 --> 00:07:20,420
a channel.

97
00:07:20,420 --> 00:07:27,770
All right so and the last lesson we created that model that pops up when we click on the add channel

98
00:07:27,770 --> 00:07:28,450
button.

99
00:07:28,550 --> 00:07:34,550
And now we're actually ready to treat the function that has a channel and you may have been thinking

100
00:07:34,550 --> 00:07:41,480
that we were going to do something like we did in our office services where we do an Alamo fire request

101
00:07:41,510 --> 00:07:49,160
and do a post and stuff but we're actually handy handling the addition of channels and messages via

102
00:07:49,160 --> 00:07:49,770
sockets.

103
00:07:49,790 --> 00:07:50,270
Right.

104
00:07:50,540 --> 00:08:01,010
So how that works is imagine we have our app and we have this open connection between our app and the

105
00:08:01,100 --> 00:08:02,370
server API.

106
00:08:02,870 --> 00:08:09,170
So when we create a channel what we're actually going to be doing is sending what is called an image.

107
00:08:09,260 --> 00:08:09,690
All right.

108
00:08:09,890 --> 00:08:16,520
So when when something is being sent via web sockets that's called any MIT and it can be any minute

109
00:08:16,520 --> 00:08:19,730
from either the app or the API.

110
00:08:19,910 --> 00:08:26,480
So if the app is sending something to the server then it is performing and emit from the map to the

111
00:08:26,480 --> 00:08:29,130
server if the server is sending out information.

112
00:08:29,150 --> 00:08:36,930
Is performing any minute from the server out to however many apps are currently connected and then the

113
00:08:37,420 --> 00:08:41,700
the way to receive information is called Hey dot on.

114
00:08:41,750 --> 00:08:42,020
OK.

115
00:08:42,020 --> 00:08:44,720
So it would look something like this right here.

116
00:08:44,840 --> 00:08:46,660
Socket not on.

117
00:08:46,850 --> 00:08:47,440
OK.

118
00:08:47,690 --> 00:08:51,110
And then the other one is socket that you get.

119
00:08:51,230 --> 00:08:51,510
All right.

120
00:08:51,530 --> 00:08:57,770
So those that's kind of the terminology that and that's involved with sending and receiving information

121
00:08:57,770 --> 00:08:59,370
dealing with sockets.

122
00:08:59,390 --> 00:09:04,400
OK so when we add a channel the

123
00:09:08,620 --> 00:09:14,460
so when we add a channel we are performing the emit from the app and we send that channel to the API

124
00:09:14,570 --> 00:09:15,300
server.

125
00:09:15,530 --> 00:09:16,170
OK.

126
00:09:16,490 --> 00:09:23,150
And then what happens is the API gets that information and it creates a channel object saves it to the

127
00:09:23,150 --> 00:09:32,240
database and then immediately disperses that channel back to our app and to as many apps are currently

128
00:09:32,240 --> 00:09:34,650
connected at the time.

129
00:09:34,850 --> 00:09:38,390
So we're going to need a couple of functions we're going to need to know we're going to have a function

130
00:09:38,390 --> 00:09:47,330
to get a channel object to the server but then we also need to have a function that can detect when

131
00:09:47,330 --> 00:09:55,070
that mess or when that channel comes back to us because we don't actually add the channel to to our

132
00:09:55,070 --> 00:10:00,860
channels or re in our message service until we detect that coming back from the API and then we know

133
00:10:00,860 --> 00:10:06,140
that the addition of the channel has been successful on the online database.

134
00:10:06,140 --> 00:10:09,750
All right so let's go ahead and code that out and see how that looks.

135
00:10:09,830 --> 00:10:11,040
It's pretty simple.

136
00:10:11,150 --> 00:10:21,200
All we got to do say funk add channel and actually before we before we get into this let's go and check

137
00:10:21,200 --> 00:10:25,000
out the actual API code.

138
00:10:25,010 --> 00:10:25,590
All right.

139
00:10:25,760 --> 00:10:28,450
So here we have the API code.

140
00:10:28,450 --> 00:10:30,560
This is in the source.

141
00:10:30,590 --> 00:10:37,820
And then just right here at the top level index dot J.S. and right here under socket is all the socket

142
00:10:37,820 --> 00:10:38,510
stuff.

143
00:10:38,760 --> 00:10:39,660
OK.

144
00:10:40,100 --> 00:10:44,680
So I was talking about dot on and Dot emits.

145
00:10:44,690 --> 00:10:48,240
All right and so here you can see client up on.

146
00:10:48,320 --> 00:10:57,740
And so the client or the the API is listening for any information coming from the client with the event

147
00:10:57,800 --> 00:10:58,580
name.

148
00:10:58,610 --> 00:11:02,970
And so how sockets how socket I O works is it works on events.

149
00:11:03,050 --> 00:11:08,750
So the server is listening for an event called new channel and then it's expecting a couple of parameters

150
00:11:08,870 --> 00:11:16,100
being name and description and then it creates a new channel object from that information and saves

151
00:11:16,100 --> 00:11:25,280
it to the database and then it gets back to the to any apps that are currently connected it emits and

152
00:11:25,280 --> 00:11:27,920
sends back that channel that was just created.

153
00:11:27,920 --> 00:11:28,520
All right.

154
00:11:28,850 --> 00:11:35,480
So let's go ahead and get back into tax code and so we're going to need to Passons some information

155
00:11:35,480 --> 00:11:39,630
we're going to need the channel name which is a string.

156
00:11:39,830 --> 00:11:45,840
And we're going to need the channel description which is also a string.

157
00:11:46,220 --> 00:11:51,630
And then we're going to have our completion handlers going to completion.

158
00:11:51,710 --> 00:11:59,100
We close this right pain at escaping completion.

159
00:11:59,110 --> 00:12:00,840
Handler can and can

160
00:12:03,710 --> 00:12:11,320
make some room down here and then we are going to emit from our app to the API.

161
00:12:11,330 --> 00:12:20,770
So we're going to say socket dot emit and we want this one right here emit event string and then items.

162
00:12:21,000 --> 00:12:29,910
OK so we're going to say the event looks like I was showing you in the API code.

163
00:12:30,350 --> 00:12:34,790
And the API code is right here.

164
00:12:34,790 --> 00:12:36,520
New Channel right.

165
00:12:36,560 --> 00:12:40,640
So that's just a string identifier.

166
00:12:40,640 --> 00:12:45,920
So this is new channel and then the items that we are sending.

167
00:12:46,220 --> 00:12:51,410
Again going back to the API code we are expecting a name and then a description and it needs to be in

168
00:12:51,410 --> 00:12:52,210
this order.

169
00:12:52,450 --> 00:12:52,960
OK.

170
00:12:53,090 --> 00:13:00,080
Because the API code is just going to take whatever is passed into the function in this order and then

171
00:13:00,140 --> 00:13:07,310
assign those values those variables to these properties and come back to X code so name and description.

172
00:13:07,310 --> 00:13:13,580
And so the channel name can then channel description.

173
00:13:13,920 --> 00:13:16,850
These are what does passed into into the function.

174
00:13:17,120 --> 00:13:20,840
And that's it.

175
00:13:20,880 --> 00:13:21,820
Completion.

176
00:13:21,920 --> 00:13:22,780
True.

177
00:13:23,540 --> 00:13:27,940
That's all it takes to send out to the API.

178
00:13:28,180 --> 00:13:31,660
Some information super simple super easy.

179
00:13:31,820 --> 00:13:38,630
So Yet now we could implement that in our ADD channel ABC over here so we can sit here and create channel

180
00:13:38,630 --> 00:13:39,530
preste.

181
00:13:40,220 --> 00:13:44,870
We could get the name and channel description and then pass that into this disfunctions So we're going

182
00:13:44,870 --> 00:13:56,070
to say guard let channel name equal and that's going to be name text dot text Ware.

183
00:13:56,120 --> 00:14:01,580
And so we're just going to do a check to make sure that we actually have a some sort of name actually

184
00:14:01,580 --> 00:14:09,450
written in here and that's going to be in name text that text is not equal to an destry anything else

185
00:14:09,660 --> 00:14:11,220
will just return.

186
00:14:11,520 --> 00:14:13,770
And so we're going to make sure that we have a channel name.

187
00:14:13,770 --> 00:14:21,090
We're not going to enforce the description those we're just going to say God let channel desk people

188
00:14:21,840 --> 00:14:30,390
what do we call this chant desk that text else returned.

189
00:14:30,710 --> 00:14:36,700
OK so now we have unwrapped variables for our channel name and general description.

190
00:14:36,770 --> 00:14:43,910
So now we can call our Succot service dot instance dot ad channel and we're going to pass into that

191
00:14:43,910 --> 00:14:54,740
function the channel name the channel description which is channel desk and completion pressing enter

192
00:14:55,220 --> 00:14:57,590
and change that to success.

193
00:14:57,800 --> 00:15:06,200
And right here we're going to say if success then we're just going to dismiss the Modals after we've

194
00:15:06,200 --> 00:15:11,810
created the modal press the Create channel but we're just going to dismiss it's wrong to say self-taught

195
00:15:12,050 --> 00:15:14,400
dismiss and I as true.

196
00:15:14,440 --> 00:15:16,640
And the completion is new.

197
00:15:17,030 --> 00:15:23,950
All right I'm going to save that and now this would actually work we could go in and create a channel

198
00:15:24,740 --> 00:15:26,200
but we haven't.

199
00:15:26,220 --> 00:15:30,480
Remember that would just be sending it to the API and it would try to send it back.

200
00:15:30,650 --> 00:15:41,180
But we don't have that function to detect the emission from the API as it is sent out to across those

201
00:15:41,180 --> 00:15:43,520
open lines of communication.

202
00:15:43,550 --> 00:15:47,360
So we need to now create the socket dot on.

203
00:15:47,370 --> 00:15:47,860
All right.

204
00:15:47,990 --> 00:15:52,700
And this one's This one is more complex but but not by much.

205
00:15:52,700 --> 00:15:58,520
All right so we're in a safe funk get channel and that's when we're just going to have a completion

206
00:15:58,520 --> 00:15:58,960
handlers.

207
00:15:58,960 --> 00:16:08,400
When I say completion and escaping and completion handler can.

208
00:16:08,410 --> 00:16:08,870
All right.

209
00:16:08,870 --> 00:16:12,310
So when we're sending it out it was a socket document.

210
00:16:12,410 --> 00:16:15,380
This time we're we're listening is kind of like an observer.

211
00:16:15,470 --> 00:16:24,690
So we're listening for for the event and the event name we can see it here right here.

212
00:16:24,830 --> 00:16:34,500
So after the API receives a new channel it then emits with a event name of channel created.

213
00:16:34,590 --> 00:16:43,190
And so when the API emits the channel created what it's doing is it's sending back in this order the

214
00:16:43,190 --> 00:16:46,660
name description and channel ID.

215
00:16:46,670 --> 00:16:54,500
All right and so that's important because what we receive in X code from from a socket on hold that

216
00:16:54,500 --> 00:16:56,480
thought I'll show you in just one second.

217
00:16:56,510 --> 00:17:06,280
So when you say socket dot on and we want this one right here and we're going to say for here the event

218
00:17:07,000 --> 00:17:14,810
is called Channel created and then call back just going to press enter.

219
00:17:15,000 --> 00:17:22,230
And so right here what we what we get back from the socket on is an array of data of type any.

220
00:17:22,330 --> 00:17:22,810
OK.

221
00:17:23,020 --> 00:17:28,330
And the array of data is this.

222
00:17:28,330 --> 00:17:31,030
These these variables right here.

223
00:17:31,030 --> 00:17:38,400
So we're going to get the name description and ID back as an array of type any.

224
00:17:38,410 --> 00:17:38,710
All right.

225
00:17:38,750 --> 00:17:46,660
So we're going to have to go through and kind of parse out from that array the variables that we that

226
00:17:46,660 --> 00:17:47,090
we want.

227
00:17:47,110 --> 00:17:47,720
Okay.

228
00:17:47,950 --> 00:17:50,530
And then this socket AC K-8 emitter.

229
00:17:50,620 --> 00:17:52,290
That's called a socket.

230
00:17:52,450 --> 00:17:54,330
The AC case stands for knowledge.

231
00:17:54,340 --> 00:17:54,990
OK.

232
00:17:55,420 --> 00:17:59,410
So here we're just going to call this data array.

233
00:17:59,770 --> 00:18:02,040
And this we're going to call it AC K..

234
00:18:02,050 --> 00:18:08,050
That's the kind of the standard that you can expect to see that be called.

235
00:18:08,050 --> 00:18:11,600
All right so any time you that you see that back that's an acknowledgement.

236
00:18:11,920 --> 00:18:16,870
So next up in the code we're going to do is we're going to parse out of that data array the channel

237
00:18:16,870 --> 00:18:24,430
name description and channel ID so that we can create a new channel object and then append that to our

238
00:18:24,430 --> 00:18:27,210
message service channels array.

239
00:18:27,220 --> 00:18:27,760
All right.

240
00:18:28,120 --> 00:18:41,920
So when you say guard let channel name equal to the data array and it's going to be the zeroth item

241
00:18:41,920 --> 00:18:42,930
in the array.

242
00:18:43,240 --> 00:18:49,700
And we know that again because looking at the API code we can see that that's the first one.

243
00:18:49,820 --> 00:18:56,470
If if you're working with an API that you didn't have access to the code directly you would probably

244
00:18:56,470 --> 00:19:03,880
need to rely on the DPA documentation or you know if you're working with the API developer have a chat

245
00:19:03,880 --> 00:19:05,200
with him or something.

246
00:19:05,320 --> 00:19:10,060
But yes we're going to so remember that this comes back as type any.

247
00:19:10,150 --> 00:19:13,780
So we need to cast as cast this as a string.

248
00:19:13,850 --> 00:19:20,600
And when I say else return if that fails then just return the memory I say guard.

249
00:19:20,730 --> 00:19:34,450
That data array ops guard that channel description equal data array and this is our first item.

250
00:19:34,600 --> 00:19:44,830
And so we're going to say well I did not forget the ads here so as string this is going to be as a string

251
00:19:44,860 --> 00:19:48,070
as well's return.

252
00:19:49,120 --> 00:19:52,390
And this one is going to be part of that channel.

253
00:19:52,400 --> 00:19:55,920
The usual data re.

254
00:19:56,230 --> 00:19:58,930
And this is going to be the second one.

255
00:19:58,990 --> 00:20:06,060
This is also going to be cast as a string else returned it's whole street.

256
00:20:06,670 --> 00:20:13,630
All right so now we have channel name description and ID that we are getting from the unit from the

257
00:20:13,630 --> 00:20:17,980
API to our app which we detect with a socket on.

258
00:20:18,220 --> 00:20:20,220
And so now we can go ahead and create a new channel.

259
00:20:20,230 --> 00:20:26,460
Objects are going to say new channel is equal to channel and we're going to initialize and we're going

260
00:20:26,460 --> 00:20:39,020
to say the channel title is channel name channel description and channel ID.

261
00:20:39,290 --> 00:20:45,640
All right so now we have our new channel is go ahead and pendens during the save messaging service instance

262
00:20:45,700 --> 00:20:58,560
DOD channels impend and the new element to append is new channel and I'm going to say completion is

263
00:20:58,570 --> 00:21:00,420
true.

264
00:21:00,460 --> 00:21:00,940
All right.

265
00:21:00,940 --> 00:21:04,730
So just to run through that one more time we are seeing Socred on.

266
00:21:04,750 --> 00:21:11,500
So we're listening for an event of type channel created and the data array that comes back from that

267
00:21:11,980 --> 00:21:16,090
is these three objects of type and the.

268
00:21:16,210 --> 00:21:21,580
And so we have to know the order that they're in which is named then description than the channel ID

269
00:21:22,000 --> 00:21:30,230
we cast them as strings we create a new channel object from those variables and then we then we append

270
00:21:30,230 --> 00:21:37,510
to that new channel to our message services array of channels and then we're then we're done.

271
00:21:37,780 --> 00:21:39,770
So how does it work.

272
00:21:39,850 --> 00:21:49,690
You know having this function well we need to place this in the location that we want to listen for

273
00:21:49,720 --> 00:21:57,310
for this change and for that for us that's in the channel DC right because that's where we want to be

274
00:21:57,310 --> 00:21:59,520
able to update the list.

275
00:21:59,530 --> 00:22:02,290
So here in channel Visi is where we're going to call this function.

276
00:22:02,310 --> 00:22:10,220
It's over in say you're in general VC in the view did load We're going to say socket service dot instance

277
00:22:10,220 --> 00:22:16,870
dot get Channel am going to press enter on the completion handle success.

278
00:22:17,210 --> 00:22:26,540
And so if we successfully receive a new channel then all we need to do is say table view dot reload

279
00:22:26,540 --> 00:22:27,150
data.

280
00:22:27,170 --> 00:22:30,390
I think I need a self here self-taught table.

281
00:22:30,440 --> 00:22:31,980
You don't reload.

282
00:22:32,390 --> 00:22:33,020
OK.

283
00:22:33,230 --> 00:22:36,710
So I think that is all we need to do.

284
00:22:36,710 --> 00:22:39,320
We have created our socket service.

285
00:22:39,320 --> 00:22:43,540
We are establishing a connection when we when we launched the app.

286
00:22:43,580 --> 00:22:48,370
More able to send a new channel to the API.

287
00:22:48,500 --> 00:22:55,640
And then when it processes that information it will then send out that new channel to all of the apps

288
00:22:55,640 --> 00:23:02,840
that are currently connected and if they have their socket dot on function sending for the event of

289
00:23:02,840 --> 00:23:09,870
channel created We're going to parse out the information create a new channel appended and then channel

290
00:23:09,870 --> 00:23:16,640
ABC if successful we're just going to reload the data and we'll show that new channel.

291
00:23:16,640 --> 00:23:19,260
So let's go ahead and test this.

292
00:23:19,430 --> 00:23:19,700
All right.

293
00:23:19,730 --> 00:23:23,410
So here we are we're logged in at this point.

294
00:23:23,410 --> 00:23:30,200
We have we don't have a lot of logic handling being logged in and logged out and the stuff we're going

295
00:23:30,200 --> 00:23:31,270
to be working on that.

296
00:23:31,280 --> 00:23:36,890
So if you're if you're not logged in then go ahead and log in before you tried doing this.

297
00:23:37,100 --> 00:23:43,790
So what we're going to do is we are going to click on the Add a channel button and that reminds me we

298
00:23:43,790 --> 00:23:49,130
should probably add a check to see if you log in before allowing this model to pop up.

299
00:23:49,130 --> 00:23:50,610
We'll fix that just a second.

300
00:23:50,900 --> 00:23:55,770
And so we're going to see a socket test description.

301
00:23:55,910 --> 00:24:06,680
Sockets are who I'm going to say create Channel and this will send that emit to the API with this information

302
00:24:06,680 --> 00:24:09,350
Succot test and sockets are cool name and description.

303
00:24:09,350 --> 00:24:16,150
It will create a new channel object to the database and then emit and then do an image of its own.

304
00:24:16,190 --> 00:24:22,280
Out to all of the apps that are connected this they create channel and hey there it is already socket

305
00:24:22,280 --> 00:24:23,480
test.

306
00:24:23,480 --> 00:24:24,710
All right so that's pretty cool.

307
00:24:24,890 --> 00:24:29,870
But the cool thing is when we have two of these open some are going to be back in just a second after

308
00:24:29,870 --> 00:24:31,640
I open up a second simulator.

309
00:24:31,640 --> 00:24:31,960
All right.

310
00:24:31,970 --> 00:24:34,340
So now the cool thing.

311
00:24:34,430 --> 00:24:40,460
So we saw it out a channel on our own but now check this out.

312
00:24:40,460 --> 00:24:41,420
So I'm over here.

313
00:24:41,450 --> 00:24:49,820
And Johnny B's account and let's go select a random click here and say you're going to create a new

314
00:24:49,820 --> 00:24:52,580
channel say sockets or

315
00:24:56,220 --> 00:24:56,820
DVD

316
00:25:01,490 --> 00:25:03,310
No I don't mean dig.

317
00:25:03,940 --> 00:25:04,170
All right.

318
00:25:04,170 --> 00:25:05,600
And so watch over here.

319
00:25:05,710 --> 00:25:07,260
So it is a completely different app.

320
00:25:07,270 --> 00:25:10,880
This could be a person across the continent across the world.

321
00:25:10,890 --> 00:25:18,550
Now when I press create channel boom it shows up in the other person's app immediately.

322
00:25:18,640 --> 00:25:24,700
And so that's the power of web sockets and that's what's so exciting about this is that you know we

323
00:25:24,760 --> 00:25:31,930
what we did is we sent sent a new channel from this app to the server and then it came back to both

324
00:25:31,930 --> 00:25:39,380
of these apps and then we were able to tell the app what to do by updating the table.

325
00:25:39,380 --> 00:25:39,890
All right.

326
00:25:40,060 --> 00:25:41,920
So super exciting stuff.

327
00:25:42,070 --> 00:25:45,830
If that doesn't excite you as a developer I don't know what will be.

328
00:25:45,860 --> 00:25:48,100
I mean this is some cool stuff.

329
00:25:48,400 --> 00:25:52,710
So yeah in this lesson we we learned about soccer.

330
00:25:52,720 --> 00:25:58,720
We created our socket service created our first couple of functions that allow us to create and update

331
00:25:58,890 --> 00:26:02,620
our table view based on creating and receiving new channels.

332
00:26:02,770 --> 00:26:07,550
And then the next lesson is we're going to keep on truckin with some more socket stuff.

333
00:26:07,920 --> 00:26:12,140
Adding the message functionality and more so we're excited for that.

334
00:26:12,370 --> 00:26:18,430
And just to finish this off I'm going to go ahead and commit and add my changes and I will see you all

335
00:26:18,430 --> 00:26:19,680
in the next one.