Everyone welcome back.
Johnny B here with slopes dot com and in this lesson we're going to work with some exciting stuff.
We are finally getting into sockets and so we're going to believe the world of API calls for a time
meaning the the the one time send and receive a request type of API calls.
Now we're going to look at Web sockets being able to have a persistent open line of communication between
your app and your server.
So that's super exciting.
Earlier we talked about some use cases that you would want this.
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
time communication back and forth between people between different people on your apps.
Another good examples would be like gaming.
So you have like a tic tac toe game or something you want to know right when the other person places
their piece or chess or pretty much any type of gaming thing where are you doing multiplayer.
You want to be able to know when the other player has done something right.
Or a news feed or I mean there's a million examples of you know where sockets would be would be really
helpful right.
So what it does.
Like I said it creates a persistent connection between the app and your server.
And once we are connected we're able to send back and forth information freely.
Now if you want to decode sockets from scratch be a pretty big challenge.
Luckily for us some smart people have made it a lot easier and we're going to be using a library called
socket.
Hi Joe.
And let me just pull up a Google here real quick so I can show you.
All right so if you just search for socket o swift You can check out a couple of their sites.
All right so here's their here's the good hub.
And so you can kind of read through here and see see how easy it is.
The first thing that we're going to be doing is we're going to create these We're going to instantiate
the socket.
Then you've got to do the connection and then we're going to be working with emissions emits and DONZE.
All right so we'll we'll talk a little bit more about that.
But yeah if you want to check out some of their documentation they have some pretty good documentation
as well as some good other good tutorials out there.
All right so that's enough of that.
So yes go ahead and get started and talk about how we're going to be using it.
All right so we're going to create a new service.
Yet another one so I'm going to call this new file and this is going to be a Coke touch class and this
is going to be a subclass of an s object and the class is going to be called socket service.
OK I'm going to say next.
And create
all ready and like are other services and this is also going to be a singletons are going to say static
instance equal access socket service instantiate.
And the other thing that we need to do for this because it's an object we need to have an initializer
in case we're going to have a say override in it and then we're just going to say superdad in it and
that's all we have to do there.
All right.
Now let's go ahead and create our Succot.
All right so you better import Succot.
So import socket.
I know.
And now that gives us access to all of their variables functions methods et cetera.
And so we're going to say our socket type socket I O client equal to socket I O client and we're going
to initialize it with a u r l right.
So we're creating a socket and we are pointing it to our heart to our API.
You are all again so we're going to generate this with your oh and we're going to say you are 0 from
stream.
Here we go your whole string.
All right and the string is a base you Earl and then we're going to need to add a exclamation point
here and I'm OK.
Force unwrapping this because all this is is a string.
OK.
And I mean you can see it right here there's no way that it doesn't exist.
And if it if it doesn't and it crashes.
That's something that we want to know about so that's why I'm ok with that forswore up there.
All right.
So we created our socket.
Now we need to add a couple of functions to connect or establish the connection between our app and
the and the web server.
Ok so we're going to say phunk establish connection
and to do that all we have to do is say socket not connect.
And if we open up our right pain and click right here are a very simple description connects to the
server.
All right so that's all we need.
Then we're going to want a way to disconnect something to say func close connection and that is socket
Tott disconnect.
All right.
So when we launch our app we want to establish connection so we were you know we're opening up that
connection between the API and our client.
So I'm thinking in our app delicate that's where we should put this.
All right so here under did become active forces restarts any tests that were paused while the addiction
was inactive and so has been put that right here.
So when I say socket service instance that instance dot Let's see what do we even call it establish
establish connection.
All right so when did we become active We're going to establish the connection.
And when we're about to terminate we are going to disconnect so when the socket service the instance
that close connection right there we go.
So now when we launch the app or when we come back into the app we establish a connection between the
client and the server.
And when we close it we close that connection all right.
So that's good.
Going back to our socket service we are now ready to actually create a function that is going to add
a channel.
All right so in the last lesson we created that model that pops up when we click on the add channel
button.
And now we're actually ready to treat the function that has a channel and you may have been thinking
that we were going to do something like we did in our office services where we do an album of fire request
and do it post and stuff but we're actually handy handling the addition of channels and messages via
sockets or so how that works is imagine we have our app and we have this open connection between our
app and the server API.
So when we create a channel what we're actually going to be doing is sending what is called an image.
All right.
So when when something is being sent via web sockets that's called any it and it can be any minute from
either the app or the API.
So if the app is sending something to the server then it is performing any bit from the to the server
if the server sending out information is performing any minute from the server out to however many apps
are currently connected and then the the way to receive information is called Hey dot on.
OK.
So it would look something like this right here socket dot on.
OK.
And then the other one is Succot thought you Mitt.
All right.
So those that's kind of the terminology that and that's involved with sending and receiving information
dealing with sockets.
OK so when we added channel the.
So when we add a channel we are performing the Mitt from the app and we send that channel to the EPA
server.
Ok.
And then what happens is the API gets that information and it creates a channel object saves it to the
database and then immediately disperses that channel back to our app and to as many apps are currently
connected at the time.
So we're going to need a couple of functions we're going to need to know we're going to have a function
to emit a channel object to the server but then we also need to have a function that can detect when
that mess or when that channel comes back to us because we don't actually add the channel to to our
channels or re in our message service until we detect that coming back from the API and then we know
that the addition of the channel has been successful on the online database.
All right so let's go ahead and code that out and see how that looks.
It's pretty simple.
All we got to do say phunk add channel and actually before we before we get into this and check out
the actual API code.
All right.
So here we have the API code.
This is in the source.
And then just right here at the top level index dodginess and right here under socket is all the socket
stuff.
OK.
So I was talking about dot on and Dot emits all right and so here you can see client dot on.
And so the client or the the API is listening for any information coming from the client with the event
name.
And so how sockets how socket I O works is it works on events.
So the server is listening for an event called new channel and then it's expecting a couple of parameters
being name and description and then it creates a new channel object from that information and saves
it to the database and then it gets back to the to any apps that are currently connected it emits and
sends back that channel that was just created.
All right.
So let's go ahead and get back into tax code and so we're going to need to Passons some information
we're going to need the channel name which is a string.
And we're going to need the channel description which is also a string.
And then we're going to have our completion handlers going to say completion we close this right pain
at escaping completion handler we can
make some room down here and then we are going to emit from our app to the API.
So we're going to say socket to emit and we want this phone right here emit event string and then items
in case caesareans say the event looks like I was showing you in the API code.
And the API code is right here.
New Channel all right.
So that's just a string identifier.
So this is new channel.
And then the items that we are sending again going back to the API code we are expecting a name and
then a description and it needs to be in this order.
OK.
Because the API code is just going to take whatever is passed into the function in this order and then
assign those values those variables to these properties and come back to X codes name and description
and so the this channel name can then channel description.
These are what is passed into into the function.
And that's it to completion.
True.
That's all it takes to send out to the API.
Some information super simple super easy.
So yeah.
Now we could implement that in our ad channel ABC over here so we can say here and create channel preste
we could get the name and channel description and then pass that into this disfunctions So we're going
to say guard let channel name equal and that's going to be name text dot text where.
And so we're just going to do a check to make sure that we actually have a some sort of name actually
written in here and it's going to be named text that text is not equal to and destroy anything else.
I'll just return.
And so we're going to make sure that we have a channel name.
We're not going to enforce a description those we're just going to say God let channel ask people what
do we call this chant desk.
That text else returned.
OK so now we have unwrapped variables for our channel name and general description.
So now we can call our socket service that instance that ad channel I'm going to pass into that function
the channel name the channel description which is channel desk and completion pressing enter and change
that to success.
And right here we're going to say if success then we're just going to dismiss the models after we've
created the modal press the Create channel button and we're just going to dismiss it's wrong to say
self-taught dismiss.
And I mean that is true.
And the completion is going to save that and now this would actually work we could go in and create
a channel but we haven't.
Remember that would just be sending it to the API and it would try to send it back but we don't have
that function to detect the emission from the API as it is sent out to across those open lines of communication.
So we need to now create the socket dot on.
All right.
And this one's This one is more complex but but not by much.
All right so we're going to see phunk get channel and that's when we're just going to have a completion
handlers.
When I say completion and escaping and completion handler can.
All right.
So when we're sending it out it was a succotash emit.
This time we're we're listening is kind of like an observer.
So we're listening for for the event and the event name we can see it here right here.
So after the API receives a new channel it then emits with a event name of channel created.
And so when the API emits the channel created what it's doing is it's sending back in this order the
name description and channel ID.
All right.
And so that's important because what we receive in X code from from a socket on hold that thought I'll
show you in just one second.
So when you say socket dog on and we want this one right here I'm going to say for here the event is
called Channel created and then call back just going to press enter and see right here what we what
we get back from the socket on is an array of data of type any.
OK.
And the array of data is this.
These these variables right here.
So we're going to get the name description and ID back as an array of type any.
All right.
And so we're going to have to go through and kind of parse out from that array the variables that we
that we want.
Okay.
And then the socket SEEKA emitter.
That's called a socket.
The AC case stands for knowledge.
OK.
So here we're just going to call this data array.
And this variance.
Call it AC K..
That's the kind of the standard that you can expect to see that be called.
All right so any time you let you see that Ach that's an acknowledgement.
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
name description and channel ID and so that we can create a new channel object and then append that
to our message service channels array.
All right.
So when you say guard that channel name equal to the data array and it's going to be the zeroth item
in the array and we know that again because looking at the API code we can see that that's the first
one.
If if you're working with an API that you didn't have access to the code directly you would probably
need to rely on the DPA documentation or you know if you're working with the developer or have a chat
with him or something.
But yes we're going to this.
So remember that this comes back as type any.
So we need to cast as cast this as a string.
And when I say else return if that fails then just return the memory and say guard that data array ops
guard that channel description equal data array and this is our first item.
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
as well's return.
And this one is going to be a card alert channel Id pull data array.
And this is going to be the second one.
This is also going to be cast as a string.
Else return ups the whole street.
All right so now we have channel name description and ID that we are getting from the unit from the
API to our app which we detect with a socket dot on.
And so now we can go ahead and create a new channel objects when we say new channel is equal to channel
and we're going to initialize and we're going to the channel title is channel name channel description
and channel ID.
All right so now we have our new channel is go ahead and appended say messaging service for instance
dot channels append and the new element to append is new channel and I'm going to say completion is
true.
All right.
So just to run through that one more time we are seeing some Gadot on.
So we're listening for an event of type channel created and the data array that comes back from that
is these three objects of type and the.
And so we have to know the order that they're in which is named then description than the channel ID
we cast them as strings we create a new channel object from those variables and then we create then
we append to that new channel to our message services array of channels and then we're then we're done.
So how does it work.
You know having this function well we need to place this in the location that we want to listen for
for this change and for that for us that's in the channel Visi right because that's where we want to
be able to update the list.
So here in channel AVC is where we're going to call this function.
All right you're in general VC in the view did load We're going to say socket service dot instance dot
and get Channel am going to press enter on the completion handle say success.
And so if we successfully receive a new channel then all we need to do is say Table View dot reload
date.
I think I need a self here self-taught table.
You don't reload data.
OK.
So I think that is all we need to do.
We have created our socket service.
We are establishing a connection when we when we launched the app were able to send a new channel to
the API.
And then when it processes that information it will then send out that new channel to all of the apps
that are currently connected and if they have their socket dot on function sending for the event of
channel created We're going to parse out the information create a new channel appended and then channel
visi.
If successful we're just going to reload the data and we'll show that new channel.
So let's go ahead and test this.
All right.
So here we are.
We're logged in at this point.
We have we don't have a lot of logic handling being logged in and logged out and the stuff we're going
to be working on that.
So if you're if you're not logged in then go ahead and log in before you try doing this.
So what we're going to do is we are going to click on the Add a channel button.
And that reminds me we should probably add a check to see if you're logged in before allowing this model
to pop up.
We'll fix that in just a second.
And so we're going to see a socket test description.
Sockets are who I'm going to say create Channel and this will send that emit to the API with this information
Succot test and sockets are cool name and description.
It will create a new channel object to the database and then emit and then do an image of its own.
Out to all of the apps that are connected and they say create channel and hey there it is already socket
test.
All right so that's pretty cool.
But the cool thing is when we have two of these open some I'm going to be back in just a second after
I open up a second simulator.
All right.
So now the cool thing.
So we sought out a channel on our own but now check this out.
So I'm over here and Johnny B's account and let's go select our Random Moment click here and say we're
going to create a new channel say sockets are bomb
DVD
No I don't mean Dick All right.
And so watch over here.
So this is a completely different app.
This could be a person across the continent across the world.
And when I press create channel boom it shows up in the other person's app immediately.
And so that's the power of web sockets and that's what's so exciting about this is that you know we
what we did is we sent sent a new channel from this app to the server and then it came back to both
of these apps and then we were able to tell the app what to do by updating the table.
All right.
So super exciting stuff.
If that doesn't excite you as a developer I don't know what will be.
I mean this is some cool stuff.
So yeah in this lesson we we learned about Suck-Ass we created our socket service could our first couple
of functions that allow us to create and update our table view based on creating and receiving new channels.
And in the next lessons we're going to keep on truckin with some more socket stuff getting the message
functionality and more so we're excited for that.
And just to finish this off I'm going to go ahead and commit and add my changes and I will see you all
in the next one.