Hi everyone!
In this video we will understand the event or interaction between the server and client of the WebSocket
protocol.
So since we already connect the WebSocket successfully, we will automatically have a WebSocket object.
And in order to interact between Server and Client, we should interact using the WebSockets in
the callback over here.
Okay, now why I know that if you click into the repository GitHub over here and you will click inside
some example, you can see inside some example over here.
Let me scroll down a little bit.
Inside a simple server
You can see when we connection we will automate have a websocket.
Okay.
And we will interact.
We will listen in on that.
For example like error event message event or we want to send the data into the client.
We will use send, all of that
And right now let me show you how we can send the data from the server to client.
In order to do that we will use the ws.send.
Okay.
And right here I will go from server
Okay, we will send the message from the server to client and inside the client.
We will listen in on that.
Okay.
We can use a socket dot on message.
Okay.
Let's go back to the documentation.
And here, inside an event tab.
We will click into the message.
Inside here, inside the message.
We will listening into the event and we got the event object.
Also let me console.log.
Let's see okay.
Let me go to the browser is expect and refresh.
Okay, now let me summarize what I mean.
Why?
Why it console.log
Firstly, we will establish the WebSocket connection.
It will auto trigger in to this thing.
And since we already connection, we will send the data back to the client.
And from the client.
Whenever we use the ws.send, we will get the Onmessage event over here.
So for that reason using event over here and let me console.log that we will see this message, we will
have a data property with the data.
Right.
So for that reason, in this case we will console.log event.data.
Also here you can see we already got the data from the server to client.
And how about the opposite side.
It means I want to send the data from the client back to the server.
How I can do that.
Well let's go to the WebSocket also.
Inside the event.
Let me go back to the WebSocket.
Inside the event.
Inside instance method right here.
We will have a send method also.
In order to send that we just need to send with the data.
Let me show you inside here.
I will use it as a socket.send and message from client to server.
Okay, we will console.log that
And how we can listen in on that.
Whenever the client is.
Using the send method we will automatically trigger.
The event will be on message.
Okay.
on message.
You can always go back over here.
Or actually we can use on with the message
It's totally the same.
Okay.
You can see over here and we will have a data.
Let me console.log that.
Okay.
Right here.
We will send the data from the client back to the server.
Whenever we use the send method, it will automatically trigger this thing
Let me go back and I will refresh and I will check over here.
We doesn't have anything.
We got the error still in connecting state.
What's it mean? The reason
Because the WebSocket server right here is asynchronous okay.
It means.
In.
When it go to this line
The connection is haven't yet set up.
Okay.
And in order to make sure it's set up, we will uncomment this thing will be the Onopen event.
Only the on open event we will send a message.
Okay.
With this way it will always make sure the send event will work on the WebSocket connection.
Already
connect
Okay.
Right here, let me refresh and right here we already got the data from the server okay.
But right now, this is a buffer.
So we can use the toString.
Now you can see, after I dot toString we will got the message from the client.
Okay.
Very very cool.
And that's how we can interact between the server and client okay.
And from client to the server.
And in here of course you can put us directly over here.
It will totally okay.
Okay.
So I think that will be enough.
Right now I will see you in the next one.