WEBVTT

1
00:01.160 --> 00:02.560
Hi everyone!

2
00:02.560 --> 00:16.120
In this video we will understand the event or interaction between the server and client of the WebSocket

3
00:16.160 --> 00:16.920
protocol.

4
00:18.000 --> 00:30.600
So since we already connect the WebSocket successfully, we will automatically have a WebSocket object.

5
00:31.360 --> 00:39.200
And in order to interact between Server and Client, we should interact using the WebSockets in

6
00:39.200 --> 00:40.400
the callback over here.

7
00:41.520 --> 00:55.120
Okay, now why I know that if you click into the repository GitHub over here and you will click inside

8
00:55.160 --> 01:01.810
some example, you can see inside some example over here.

9
01:03.570 --> 01:06.250
Let me scroll down a little bit.

10
01:06.290 --> 01:07.690
Inside a simple server

11
01:08.250 --> 01:15.170
You can see when we connection we will automate have a websocket.

12
01:17.130 --> 01:17.730
Okay.

13
01:17.770 --> 01:19.090
And we will interact.

14
01:19.090 --> 01:20.850
We will listen in on that.

15
01:21.450 --> 01:30.090
For example like error event message event or we want to send the data into the client.

16
01:30.770 --> 01:33.410
We will use send, all of that

17
01:35.170 --> 01:43.730
And right now let me show you how we can send the data from the server to client.

18
01:44.370 --> 01:48.610
In order to do that we will use the ws.send.

19
01:49.690 --> 01:50.250
Okay.

20
01:50.570 --> 01:56.690
And right here I will go from server

21
01:59.900 --> 02:06.140
Okay, we will send the message from the server to client and inside the client.

22
02:06.700 --> 02:09.180
We will listen in on that.

23
02:10.100 --> 02:10.580
Okay.

24
02:10.620 --> 02:15.300
We can use a socket dot on message.

25
02:15.580 --> 02:16.140
Okay.

26
02:16.180 --> 02:18.380
Let's go back to the documentation.

27
02:22.220 --> 02:25.460
And here, inside an event tab.

28
02:25.900 --> 02:28.580
We will click into the message.

29
02:31.900 --> 02:33.700
Inside here, inside the message.

30
02:34.940 --> 02:42.420
We will listening into the event and we got the event object.

31
02:43.460 --> 02:46.860
Also let me console.log.

32
02:47.860 --> 02:49.460
Let's see okay.

33
02:52.500 --> 02:58.260
Let me go to the browser is expect and refresh.

34
02:58.660 --> 03:01.660
Okay, now let me summarize what I mean.

35
03:01.700 --> 03:02.180
Why?

36
03:02.180 --> 03:03.300
Why it console.log

37
03:03.820 --> 03:07.460
Firstly, we will establish the WebSocket connection.

38
03:07.460 --> 03:10.540
It will auto trigger in to this thing.

39
03:11.620 --> 03:20.140
And since we already connection, we will send the data back to the client.

40
03:20.700 --> 03:22.420
And from the client.

41
03:23.380 --> 03:32.500
Whenever we use the ws.send, we will get the Onmessage event over here.

42
03:32.500 --> 03:45.100
So for that reason using event over here and let me console.log that we will see this message, we will

43
03:45.100 --> 03:48.580
have a data property with the data.

44
03:48.860 --> 03:49.340
Right.

45
03:49.660 --> 03:54.550
So for that reason, in this case we will console.log event.data.

46
03:54.590 --> 04:00.990
Also here you can see we already got the data from the server to client.

47
04:01.750 --> 04:05.190
And how about the opposite side.

48
04:06.230 --> 04:11.310
It means I want to send the data from the client back to the server.

49
04:11.750 --> 04:12.830
How I can do that.

50
04:13.550 --> 04:16.630
Well let's go to the WebSocket also.

51
04:19.630 --> 04:21.470
Inside the event.

52
04:22.910 --> 04:24.830
Let me go back to the WebSocket.

53
04:28.950 --> 04:30.070
Inside the event.

54
04:40.390 --> 04:42.430
Inside instance method right here.

55
04:43.190 --> 04:46.030
We will have a send method also.

56
04:46.710 --> 04:50.870
In order to send that we just need to send with the data.

57
04:56.640 --> 04:58.280
Let me show you inside here.

58
04:58.760 --> 05:08.160
I will use it as a socket.send and message from client to server.

59
05:08.280 --> 05:11.160
Okay, we will console.log that

60
05:12.600 --> 05:15.560
And how we can listen in on that.

61
05:17.040 --> 05:19.320
Whenever the client is.

62
05:21.520 --> 05:26.880
Using the send method we will automatically trigger.

63
05:26.880 --> 05:29.520
The event will be on message.

64
05:30.120 --> 05:30.640
Okay.

65
05:30.880 --> 05:31.600
on message.

66
05:32.080 --> 05:36.720
You can always go back over here.

67
05:38.080 --> 05:42.960
Or actually we can use on with the message

68
05:43.000 --> 05:44.400
It's totally the same.

69
05:44.880 --> 05:45.320
Okay.

70
05:45.360 --> 05:50.810
You can see over here and we will have a data.

71
05:56.330 --> 05:58.570
Let me console.log that.

72
05:59.210 --> 05:59.730
Okay.

73
06:01.450 --> 06:02.090
Right here.

74
06:02.330 --> 06:07.730
We will send the data from the client back to the server.

75
06:08.010 --> 06:13.290
Whenever we use the send method, it will automatically trigger this thing

76
06:16.930 --> 06:21.290
Let me go back and I will refresh and I will check over here.

77
06:21.290 --> 06:24.410
We doesn't have anything.

78
06:25.210 --> 06:30.290
We got the error still in connecting state.

79
06:31.250 --> 06:34.930
What's it mean? The reason

80
06:35.450 --> 06:44.290
Because the WebSocket server right here is asynchronous okay.

81
06:46.810 --> 06:47.850
It means.

82
06:47.850 --> 06:47.930
In.

83
06:52.250 --> 06:54.450
When it go to this line

84
06:55.050 --> 06:58.690
The connection is haven't yet set up.

85
06:59.610 --> 07:00.170
Okay.

86
07:00.450 --> 07:07.490
And in order to make sure it's set up, we will uncomment this thing will be the Onopen event.

87
07:08.210 --> 07:14.010
Only the on open event we will send a message.

88
07:14.290 --> 07:14.890
Okay.

89
07:14.930 --> 07:27.250
With this way it will always make sure the send event will work on the WebSocket connection.

90
07:27.290 --> 07:27.970
Already

91
07:28.890 --> 07:29.530
connect

92
07:30.050 --> 07:30.570
Okay.

93
07:32.170 --> 07:43.130
Right here, let me refresh and right here we already got the data from the server okay.

94
07:44.970 --> 07:48.420
But right now, this is a buffer.

95
07:49.860 --> 07:53.060
So we can use the toString.

96
07:59.660 --> 08:07.980
Now you can see, after I dot toString we will got the message from the client.

97
08:08.100 --> 08:08.660
Okay.

98
08:08.700 --> 08:09.860
Very very cool.

99
08:10.180 --> 08:20.220
And that's how we can interact between the server and client okay.

100
08:20.740 --> 08:23.220
And from client to the server.

101
08:23.500 --> 08:27.260
And in here of course you can put us directly over here.

102
08:27.740 --> 08:29.340
It will totally okay.

103
08:33.100 --> 08:33.660
Okay.

104
08:35.540 --> 08:41.020
So I think that will be enough.

105
08:41.380 --> 08:45.580
Right now I will see you in the next one.