Hi everyone.
In this video I will show you how to set up the websockets.
Okay?
And in order to establish the WebSocket connection, we should configure it in the client and server.
Also, because the WebSocket is just a protocol okay.
And protocol is just a rule.
So for that reason we need the client server must be follow the WebSocket rules to establish that.
And for the client we have a native WebSocket API automatic provided by the browser okay.
We don't need to install any package right now.
And of course later we will use in using WebSockets.
Or socket.io.
But right now, let's keep it simple.
Using the native API.
Okay.
And how about server?
Unfortunately, the server doesn't have any API.
So for that reason, we need to install some packages.
I will go to the npm.
Com.
And I will search for websockets.
Okay.
This is a simple library.
And you can see it has a zero dependency.
Very cool right.
And it's much more download
So this is just a simple library.
the server
Okay.
And we need to install that.
Let me go to the previous application using the http, okay
We will refactor this code into the WebSocket protocol.
I will install this package.
And go to the Server.js.
Firstly we need to remove everything over here.
Okay I will remove everything.
And in order to establish the WebSocket connection of the server.
Let's see
We should create a WebSocket server.
Okay.
Firstly we need to import the websockets.
And inside here we have a WebSocket server right.
And we need one more thing will be the http module.
This is automatic provided by Node.js.
We don't need to install.
And let me show you why we need the http, right now.
Let's refactor that.
I will create a server and http.create server.
And I will put the app over here.
And instead of listening directly on the app
I will.
Use with the http
The reason we need to separate it because in order to establish the WebSocket connection.
We should listen in on the normal http servers.
Okay.
Because the WebSocket is designed to work with the HTTP okay.
In order to establish the WebSocket, we should upgrade from the HTTP into the websocket protocol.
Right.
For that reason, we will create the http
And after that I will create the WebSocket server.
Okay.
Click on new.
WebSocket server.
And in here I will put the object with the server and the server over here directly.
Okay.
We need to put the http server into the WebSocket to establish that.
And right now.
We can listen in.
Okay.
We have some event or listening on that.
Let me show you right here.
I will listen in on a connection.
And I will just console.log over here and go back to the index dot HTML or script.
Right now inside the script I will remove everything and I will only keep the some element.
I will remove everything.
And let me show you how we can call that.
We need to check our documentation from the client okay.
Because this is clearly the client.
We have a WebSocket constructor over here.
Okay.
Now, in order to create a WebSocket connection, we should create a new instance of WebSocket.
And we need to put the URL over here with the protocol WebSocket.
This is a native API.
We don't need to install.
And we need to point into that port over here.
Okay.
This is the endpoint of the backend.
And let's see.
A.
And here is a here, let me click into the open WebSocket open event.
You can find that, in order to open, we will use in two way.
Okay.
We have a two way.
I will use this
y'all
open event and let me console.log.
Maybe I will check event over here.
And let's see I will go to the.
Browser and I will refresh.
You can say, feel like we already console.log event, and inside the client you can see we already
console.log the client connect from the server.
What is mean right now?
Well, let me summarize, firstly.
We will listening into the connection event.
Okay.
Whenever we establish the new WebSocket it will trigger the connection over here.
Let me show you I will refresh it will trigger the connection okay.
If we don't have this line, it will doesn't console.log anything.
Okay.
You can see so right here.
We, after the HTTP handshake done, it will trigger the connection.
Let me show you in the network tab.
I will click into the WebSocket right here and I will refresh okay.
I will refresh.
You can see inside here we already switched in the protocol right.
I will click on request header.
So here we have a connection.
We will upgrade and upgrade.
We will upgrade into the WebSocket and it will return the switching protocol okay.
It means right now we already established the websocket connection successfully.
And in the next video we will understand some events and build a chat application.
So I will see you in the next one.