WEBVTT

1
00:01.080 --> 00:02.640
Hi everyone.

2
00:02.760 --> 00:09.600
In previous video we already talked about TCP Handshake.

3
00:10.360 --> 00:21.640
And in order to send a request using the http, we should established the TCP collection first.

4
00:21.960 --> 00:29.040
And in order to establish the TCP, we will use the three way handshake.

5
00:29.760 --> 00:33.720
Okay, I already showed in previous video.

6
00:34.760 --> 00:47.160
And right now in order to open the WebSocket connection, we should use the http handshake also.

7
00:47.760 --> 00:52.240
So let me explain for you right here.

8
00:53.080 --> 01:03.640
The reason we should establish the http handshake because the WebSocket is designed carefully to work with

9
01:04.080 --> 01:05.200
HTTP

10
01:05.240 --> 01:05.760
Okay.

11
01:06.320 --> 01:07.680
Let me show you what I mean.

12
01:08.070 --> 01:13.590
Because the WebSockets in a protocol and HTTP also the protocol.

13
01:14.590 --> 01:22.590
So we need some way to switching from the HTTP into the websockets

14
01:22.630 --> 01:23.190
Right.

15
01:23.430 --> 01:27.350
And that process we will call the HTTP handshake

16
01:27.790 --> 01:29.470
Let me show you what I mean.

17
01:29.950 --> 01:37.550
Firstly we need to send the http request into the server.

18
01:38.030 --> 01:42.110
And of course right now the TCP connection already established right.

19
01:43.550 --> 01:49.310
We will send the HTTP request into the server.

20
01:49.470 --> 01:49.950
Hi.

21
01:49.990 --> 01:59.190
Server, please switch from HTTP into the Websockets and server will respond back.

22
01:59.230 --> 02:08.390
Okay, I already switched and right now we will have a two way directional.

23
02:08.870 --> 02:13.390
Okay, we will completely become a websockets right now.

24
02:13.950 --> 02:15.190
Very very cool.

25
02:15.750 --> 02:21.870
And this process right here we will call the HTTP handshake.

26
02:22.950 --> 02:27.030
Let me show you in practical.

27
02:30.390 --> 02:36.830
Client it will send the request into the server.

28
02:37.430 --> 02:43.670
You see the WebSocket API from the browser like WebSocket.

29
02:48.030 --> 02:50.150
And it will put some URL.

30
02:51.430 --> 02:51.950
Okay.

31
02:52.710 --> 02:59.790
It will put some URL and we will send the normal http request into here.

32
03:00.950 --> 03:02.750
Inside here what we need to do.

33
03:04.110 --> 03:10.950
What we send during the request of the client.

34
03:13.110 --> 03:15.870
Well, we will send something called "upgrade".

35
03:20.870 --> 03:22.110
We will tell.

36
03:22.750 --> 03:24.990
Upgrade into the WebSocket.

37
03:25.270 --> 03:25.670
Okay.

38
03:25.670 --> 03:26.670
We will tell the server.

39
03:26.670 --> 03:27.270
Please.

40
03:27.550 --> 03:31.110
Upgrades the HTTP into the WebSocket.

41
03:31.750 --> 03:44.230
And after we send the request in the server we will send the server will respond with the status 101.

42
03:44.270 --> 03:52.070
In order to switch in protocol and from now we will achieve the WebSocket protocol.

43
03:54.150 --> 03:54.670
Okay.

44
03:55.230 --> 03:57.550
That's it, that's about the.

45
03:59.630 --> 04:02.350
HTTP handshake process.

46
04:03.190 --> 04:05.310
Well let me show you in practical.

47
04:07.790 --> 04:11.550
Right now I will go to the WebSockets right here.

48
04:13.310 --> 04:16.590
And I will click something.

49
04:17.950 --> 04:23.230
And inside the tool right here we have something called WebSockets Echo Server.

50
04:23.950 --> 04:27.750
We can easily do that right now.

51
04:28.390 --> 04:29.660
We don't need to

52
04:30.020 --> 04:32.780
Set up server or something like that.

53
04:32.860 --> 04:34.580
I just want to demo for you.

54
04:34.780 --> 04:41.340
The HTTP handshake, inside a network that I will click on filter.

55
04:42.300 --> 04:48.340
Filter over here and click on the WebSocket and WebSocket.

56
04:48.580 --> 04:58.860
I will clear everything and inside the console I will establish the socket using a new web socket.

57
04:59.860 --> 05:05.140
And we need to put the url of the WebSocket server.

58
05:07.100 --> 05:14.660
Right now I will copy paste this URL right here and I will put that over here.

59
05:17.380 --> 05:18.660
And I will enter.

60
05:19.180 --> 05:23.780
After that we will go back to the network tab and click on this thing right here.

61
05:24.260 --> 05:25.300
Now you can see.

62
05:29.820 --> 05:42.170
Right now we will send the header using the collection will be "upgrade" and we upgrade into the

63
05:42.210 --> 05:43.650
WebSocket protocol.

64
05:45.050 --> 05:50.650
And of course, it have some WebSocket related right now.

65
05:51.210 --> 05:53.250
But I don't care about that right now.

66
05:53.290 --> 05:53.730
Okay.

67
05:54.450 --> 06:01.610
The only thing we care right now is the "upgrade" will be the connection with this field.

68
06:01.810 --> 06:09.850
We will tell the server please update from the HTTP into the WebSocket protocol.

69
06:10.850 --> 06:14.290
And after that we will respond.

70
06:14.890 --> 06:15.490
Okay.

71
06:15.690 --> 06:20.170
We will respond back into the 101 will be switching protocol.

72
06:21.210 --> 06:32.730
And right now we will have the ability to talk from the client with the server using the WebSocket protocol.

73
06:33.170 --> 06:33.690
Okay.

74
06:34.010 --> 06:37.690
That's about to be HTTP handshake.

75
06:39.490 --> 06:41.970
So I hope you are very clear right now.

76
06:42.690 --> 06:43.650
I will see you in the.