Everyone will welcome back Johnny be here with slopes dot com and in this lesson we are 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.
Other 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 were 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 are.
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 Decoud sockets from scratch be a pretty big challenge.
Luckily for 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 a socket o swift You can check out a couple of their sites.
All right so here's their here's the gate 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 limits and.
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 there's 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 coca touch class.
And this is going to be a subclass of an n s object and the class is going to be called socket service.
I'm going to say next and create
all ready and like there are other services and this is also going to be a singletons or in a static
instance equal because 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 socket.
I also import socket.
Know and now that gives us access to all of their variables functions methods etc..
Now we need to implement the socket.
And this is a slight update to the original video.
Things have changed with the socket.
So we're going to need a socket and a socket manager.
So I'm going to create a variable called manager or constant and I'm going to create a second concept
called socket.
And what's new with it socket I O is that you can now have multiple clients and one manager managing
those clients.
OK so you have a manager socket.
And what we need to do is initialize these.
The moment that this class is initialized.
And so we're going to say self that manager equals socket manager and we're going to use the socket
you're a parameter here and we're going to type in your l and we're going to use the string you are.
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
have this hardcoded as you can see here at this base you Earles hardcoded it will never crash it will
always be there.
And so we have our manager and now we just simply need our sockets to organise a self-taught socket
equals manager default socket.
And if I build this here we have a fully functional socket and socket manager.
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 popped connect and if we open up our right pain and click
right here a very simple description connects to the server.
So that's all we need.
Then we're going to want a way to disconnect so I'm going to see phunk close connection and that is
socket that 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 versus restarts and the tests that were paused while the application
was inactive has been put that right here.
So when I say socket service that instance no instance dot and see what do we even call it establish
establish connection.
All right so when did we become active We're going to establish that connection and when we're about
to terminate we are going to disconnect.
So 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 and 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 Alamo fire request
and do a post and stuff but we're actually handy handling the addition of channels and messages via
sockets.
Right.
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 MIT 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 and emit from the map to the
server if the server is 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 not on.
OK.
And then the other one is socket that you get.
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 add a channel the
so when we add a channel we are performing the emit from the app and we send that channel to the API
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 get 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 funk add channel and actually before we before we get into this let's go 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 dot J.S. 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 up 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 completion.
We close this right pain at escaping completion.
Handler can and 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 dot emit and we want this one right here emit event string and then items.
OK so we're going to say the event looks like I was showing you in the API code.
And the API code is right here.
New Channel 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 code so name and description.
And so the channel name can then channel description.
These are what does passed into into the function.
And that's it.
Completion.
True.
That's all it takes to send out to the API.
Some information super simple super easy.
So Yet now we could implement that in our ADD channel ABC over here so we can sit 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 Ware.
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 that's going to be in name text that text is not equal to an destry anything else
will just return.
And so we're going to make sure that we have a channel name.
We're not going to enforce the description those we're just going to say God let channel desk 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 Succot service dot instance dot ad channel and we're 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 Modals after we've
created the modal press the Create channel but we're just going to dismiss it's wrong to say self-taught
dismiss and I as true.
And the completion is new.
All right I'm 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 in a safe funk 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 socket document.
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 dot on and we want this one right here and we're going to say for here the event
is called Channel created and then call back just going to press enter.
And so 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.
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 this socket AC K-8 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 we're going to 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 that you see that back that's an acknowledgement.
So next up in the code we're going to do is we're going to parse out of that data array the channel
name description and channel ID 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 let 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 API developer have a chat
with him or something.
But yes we're going to 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 I 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 well 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 part of that channel.
The usual data re.
And this is going to be the second one.
This is also going to be cast as a string else returned it's 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 on.
And so now we can go ahead and create a new channel.
Objects are going to say new channel is equal to channel and we're going to initialize and we're going
to say the channel title is channel name channel description and channel ID.
All right so now we have our new channel is go ahead and pendens during the save messaging service instance
DOD channels impend 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 Socred 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 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 DC right because that's where we want to be
able to update the list.
So here in channel Visi is where we're going to call this function.
It's over in say you're in general VC in the view did load We're going to say socket service dot instance
dot get Channel am going to press enter on the completion handle success.
And so if we successfully receive a new channel then all we need to do is say table view dot reload
data.
I think I need a self here self-taught table.
You don't reload.
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.
More 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
ABC 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 tried 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 log in before allowing this model to pop up.
We'll fix that 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 this they 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 are going to be back in just a second after
I open up a second simulator.
All right.
So now the cool thing.
So we saw it 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 a random click here and say you're going to create a new
channel say sockets or
DVD
No I don't mean dig.
All right.
And so watch over here.
So it is a completely different app.
This could be a person across the continent across the world.
Now 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 soccer.
We created our socket service created our first couple of functions that allow us to create and update
our table view based on creating and receiving new channels.
And then the next lesson is we're going to keep on truckin with some more socket stuff.
Adding 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.