Hi everyone.
Welcome to the new session about the real time stuff.
Okay, since right now we already done with the summary.
Module okay.
And in the last session we already reviewed the message and conversation module.
And actually inside the message only that need to be real time okay.
Actually accept the get on method on this thing.
This way real time okay.
Like send a message should be real time.
5051 is not it?
Also let me go on on here okay.
We need the send message.
Should be real time.
We need the update should be real time also.
And remote server real time.
And Mark moccasins should be real time.
Okay, in this section I will show you how we can set up the Socket.io and do some real time stuff in
here.
Okay, if you don't know what exactly about Socket.io or you don't understand the WebSockets or the
real time stuff, please go back to the fundamental section about WebSocket and Socket.io.
Okay, in that section I already show you every the core concept you need to know about the real time.
Okay, for now I will not discuss that.
Instead of I will show you how we can set up the real time immediately.
Okay, right now, if you already watch the socket arrow session, we need to install the bucket code
Socket.io.
Right.
And would the socket at all.
We can do for example like io not emit okay.
For example like that or IO on with the collection.
And we also have a socket like this.
Right.
But I think we, you know, we should follow the rule of nature like we say injections okay.
Class base or object oriented programming okay.
Of course we can use IO emit or IO on.
You can do that.
But this is not recommended okay.
With that correct.
It should use the dependency injection concept and object oriented Programming.
So for some reason in this guide, I will show you now on the web page from the documentation right
here and click on gateways.
Okay.
Now by the by I still use the second arrow.
And what you get under the hood.
Okay.
Now let me show you what we need to install this bucket.
So set up the WebSocket.
Now let's install that bucket and enter.
Now after it installed, I will show you how we can generate the.
The gateway.
Okay.
So click on save and click on new size.
I will show you what exactly does click on next.
Then rest.
With the schematics, we can use the something called gateway.
Okay.
We can generate the gateway for real time stuff.
Okay, let me show you how we can do that.
Let's generate the gateway.
And with gateway right here, we can name for it with the current module.
First of all, I want we can create the gateway for message.
I will name it message right here.
Okay.
Let's enter that.
Now after that it will generate for you the message gateway and it will update the module.
Let me open the message right here.
Right now we don't need the spec file for testing.
Let's remove this.
Okay.
Now, if you take a look at the gateway you can follow.
It will prepare for you some gateway over here and inside the module.
It will also improve the gateway inside the provider for dependency injection.
Okay.
In order to mark the gateway will become dependency injection is to inject it inside the provider.
Okay.
I hope you very clear right now.
So what exactly does.
Firstly we need to use the WebSocket gateway decorator.
So we set up the gateway and do the dependency injection and configuration stuff over here.
Now for example if you click inside the example right here, you can uh click this an example to say.
Click on for those events and good inside the event gateway.
Now you can say right here it has something called configuration.
We need to enable cars.
Okay.
Like that.
Let me show you right here I will enable cars for funny.
Cars and origin.
Something like that okay.
We can create that.
And right here you can say we need to create several folders and several right here.
Come from the Zucchero.
Okay.
Now let me show you what exactly does right here I will create a WebSocket.
Server he brought us and initialize the several.
Recover several from.
Uh.
We need to invoke manually.
Several.
So now let us.
Okay.
So that is with this why we can inject the, uh, socket IO server.
Okay.
And you may ask me what exactly does mean?
Well, it is exactly the same lies io in the socket in a normal socket.
Io.
Okay, this one right here will be exactly the same with the IO.
Okay.
And because this is the class by constructor, we can supply the general.
Okay.
I will show you what exactly the supply message.
Eliza.
Don't worry about that right now.
Okay, so let me show you what?
What you mean right here.
If you click inside documentation, you will see we have one more topic for lifecycle hook.
Let's click on that.
Now you can see in here we have a sum on gateway in it.
When we init it will trigger inside hook inside lifecycle over here on gateway connection and on gateway
disconnect.
Okay it very much the same with the IO dot on and connection.
Over here.
Okay.
And I ordered on this connection.
Okay.
It's exactly the same.
So let me show you.
This here is interface.
For that reason, we need to implement the interface with based on gateway connection.
Okay.
I don't care about gateway in it right now.
Let's focus inside on gateway connection.
Connection.
And on gateway disconnect okay.
And because we already implement we should implement the method also.
Let me go here and click on with face and implement with the fly on connection.
And one more time.
Everyone on gateway disconnect.
Okay, so right here we already have a connection and disconnect.
Let me move this thing on on top.
Okay.
So we have a client and we have a summary argument right now let me remove the argument in the collection.
When we collect I will console.log the.
Client collect with the id right.
Pretty much the same with the normal socket at all.
Right.
Here.
This is the enclave.
We can improve now.
So get over here.
Okay.
And let me console.log Ion.
Nuclear clock.
Ah.
Okay.
Right now, we cannot test that because in order to handle the collection and disconnect, we should
have a friend.
Okay.
When a friend connects, it will, uh, you will say.
But right now, we are not clear about us.
Let me move this thing on top of that.
Okay.
I just want to show you it will be exactly the same with the IO connection.
Okay.
That's the whole point right now.
And what is the supply message?
Well, let me show you what you mean with the supply message.
It pretty much the same with the event name.
Okay.
You can take this event name from the client.
Okay.
For example, from the front end, we want to emit event with no new message.
Okay.
It means right now in subscribe message.
We will listen on new message.
Okay.
Easy.
Like us.
And subscribe message right here.
We only need a subscribe message if this is the message come from the client.
Okay.
Only come from the client.
We need to use the subscribe message.
Okay.
When we emit the event from.
The client.
Let me show you what it mean.
One way immediate event.
We should add.
Emit the event.
Okay, if this is a server, we can feel free to use the something like server.
Okay, this is the server, right?
We can feel free to use for example like this server.
Right?
Okay.
Exactly the same.
It will exactly the same with the normal.
Okay.
And the server right here it will be the IO.
Okay.
You can think about us but.
If we use this server not emit the event it means the server event right.
This is clearly a server event.
And if this is the server event we just need to use in normal way okay.
But if the answer is client send event okay or client emit event, we should register it with the right
message.
Okay.
Furthermore, inside the program, we want to send the event like.
Let me show you in a reward inner rewards the the client.
It will send the event for zero.
Okay.
So we will create something like okay.com.
Join room okay.
We need so sorry.
So to get an image we want to emit an event with a zero okay.
It means in this case we should supply the message with the genre over here.
Because the message come from the client.
Okay.
Very clear right now.
Okay, I hope you very clear.
And don't worry if it's not fully wrapped in your head.
Don't worry.
When we practice, you will become understand?
Don't worry.
Okay, so I already explained for you what exactly does and how we can set up.
And let me explain.
One more thing for you will be the I o and socket.
If you remember.
What is the I o?
Now let's take away what is the I o blades below the video and answer this question.
Well, the I o is contains all the sockets.
Okay.
It will contain all sockets from the clients.
And what is the socket?
The socket for here is the socket okay.
With only single client connecting to the server.
Okay, so you already know in order to use the I o we should showed you this dot server.
Okay, so how about the single client socket over here?
How we can retrieve that.
Okay.
In order to retrieve that, we can use something like let me say, um.
We have a caller.
So get over here.
Okay.
We have socket over here.
Right here.
We can put.
The socket over here.
Message body.
Okay.
Actually, right here, we can create something like that.
Let me copy everything and put that over here in this plan for you.
Okay.
Here, here.
Okay, let's remove this.
Okay.
When we trigger the event, we will have a data.
Okay.
The data here will come from the front end.
Right.
And the client over here will be exactly the same with the socket okay.
It is exactly the same with socket over here.
So that is right now we already fully clear about what exactly about the gateway and how we can map
it with the socket concept.
Okay.
So in order to understand this lecture you should understand how we can use the socket at all in normal
application.
If you don't understand what exactly about socket error in a normal, you will not understand this video.
Right.
So I hope you understand and I will see you in the next one.