WEBVTT

1
00:00.840 --> 00:02.360
Hi everyone.

2
00:02.760 --> 00:09.200
In this video I will show you how to set up the websockets.

3
00:10.520 --> 00:11.080
Okay?

4
00:11.240 --> 00:19.640
And in order to establish the WebSocket connection, we should configure it in the client and server.

5
00:19.680 --> 00:24.680
Also, because the WebSocket is just a protocol okay.

6
00:25.080 --> 00:27.960
And protocol is just a rule.

7
00:28.280 --> 00:37.960
So for that reason we need the client server must be follow the WebSocket rules to establish that.

8
00:39.640 --> 00:49.680
And for the client we have a native WebSocket API automatic provided by the browser okay.

9
00:49.720 --> 00:55.160
We don't need to install any package right now.

10
00:57.000 --> 01:02.280
And of course later we will use in using WebSockets.

11
01:03.680 --> 01:04.640
Or socket.io.

12
01:05.040 --> 01:08.800
But right now, let's keep it simple.

13
01:08.920 --> 01:11.080
Using the native API.

14
01:12.080 --> 01:12.560
Okay.

15
01:14.320 --> 01:16.400
And how about server?

16
01:16.440 --> 01:21.000
Unfortunately, the server doesn't have any API.

17
01:22.000 --> 01:26.600
So for that reason, we need to install some packages.

18
01:28.080 --> 01:29.360
I will go to the npm.

19
01:29.680 --> 01:30.280
Com.

20
01:34.000 --> 01:38.160
And I will search for websockets.

21
01:41.880 --> 01:42.360
Okay.

22
01:42.360 --> 01:44.920
This is a simple library.

23
01:46.240 --> 01:49.640
And you can see it has a zero dependency.

24
01:49.680 --> 01:50.960
Very cool right.

25
01:51.560 --> 01:55.440
And it's much more download

26
01:57.680 --> 02:01.080
So this is just a simple library.

27
02:02.800 --> 02:03.600
the server

28
02:04.760 --> 02:05.480
Okay.

29
02:10.560 --> 02:12.600
And we need to install that.

30
02:15.080 --> 02:18.960
Let me go to the previous application using the http, okay

31
02:19.520 --> 02:24.880
We will refactor this code into the WebSocket protocol.

32
02:28.920 --> 02:32.480
I will install this package.

33
02:37.320 --> 02:39.400
And go to the Server.js.

34
02:40.320 --> 02:45.480
Firstly we need to remove everything over here.

35
02:47.640 --> 02:49.480
Okay I will remove everything.

36
02:51.520 --> 02:59.240
And in order to establish the WebSocket connection of the server.

37
03:00.040 --> 03:00.800
Let's see

38
03:03.040 --> 03:05.920
We should create a WebSocket server.

39
03:05.960 --> 03:06.320
Okay.

40
03:06.320 --> 03:10.280
Firstly we need to import the websockets.

41
03:10.680 --> 03:16.040
And inside here we have a WebSocket server right.

42
03:26.120 --> 03:30.720
And we need one more thing will be the http module.

43
03:32.880 --> 03:36.960
This is automatic provided by Node.js.

44
03:37.240 --> 03:38.880
We don't need to install.

45
03:40.000 --> 03:45.360
And let me show you why we need the http, right now.

46
03:45.400 --> 03:46.720
Let's refactor that.

47
03:48.000 --> 03:53.160
I will create a server and http.create server.

48
03:53.440 --> 03:55.040
And I will put the app over here.

49
03:56.320 --> 03:59.480
And instead of listening directly on the app

50
03:59.880 --> 04:00.520
I will.

51
04:02.960 --> 04:06.280
Use with the http

52
04:11.560 --> 04:20.160
The reason we need to separate it because in order to establish the WebSocket connection.

53
04:20.440 --> 04:26.760
We should listen in on the normal http servers.

54
04:26.920 --> 04:27.360
Okay.

55
04:27.400 --> 04:34.200
Because the WebSocket is designed to work with the HTTP okay.

56
04:34.920 --> 04:45.560
In order to establish the WebSocket, we should upgrade from the HTTP into the websocket protocol.

57
04:45.600 --> 04:46.080
Right.

58
04:46.240 --> 04:50.920
For that reason, we will create the http

59
04:55.040 --> 05:01.760
And after that I will create the WebSocket server.

60
05:02.120 --> 05:02.680
Okay.

61
05:05.800 --> 05:06.640
Click on new.

62
05:08.720 --> 05:10.320
WebSocket server.

63
05:12.760 --> 05:21.440
And in here I will put the object with the server and the server over here directly.

64
05:21.960 --> 05:22.480
Okay.

65
05:23.640 --> 05:31.840
We need to put the http server into the WebSocket to establish that.

66
05:35.040 --> 05:36.240
And right now.

67
05:38.360 --> 05:41.840
We can listen in.

68
05:42.960 --> 05:43.320
Okay.

69
05:43.320 --> 05:46.040
We have some event or listening on that.

70
05:47.720 --> 05:50.960
Let me show you right here.

71
05:56.330 --> 05:58.210
I will listen in on a connection.

72
06:03.650 --> 06:14.690
And I will just console.log over here and go back to the index dot HTML or script.

73
06:17.090 --> 06:25.570
Right now inside the script I will remove everything and I will only keep the some element.

74
06:27.690 --> 06:28.930
I will remove everything.

75
06:31.610 --> 06:35.930
And let me show you how we can call that.

76
06:40.290 --> 06:44.810
We need to check our documentation from the client okay.

77
06:44.850 --> 06:47.410
Because this is clearly the client.

78
06:53.010 --> 06:58.650
We have a WebSocket constructor over here.

79
07:00.810 --> 07:01.330
Okay.

80
07:01.610 --> 07:10.290
Now, in order to create a WebSocket connection, we should create a new instance of WebSocket.

81
07:10.290 --> 07:17.890
And we need to put the URL over here with the protocol WebSocket.

82
07:28.850 --> 07:31.170
This is a native API.

83
07:31.210 --> 07:33.130
We don't need to install.

84
07:39.050 --> 07:44.890
And we need to point into that port over here.

85
07:45.490 --> 07:45.810
Okay.

86
07:45.850 --> 07:47.530
This is the endpoint of the backend.

87
07:51.530 --> 07:52.330
And let's see.

88
07:52.330 --> 07:52.450
A.

89
08:01.410 --> 08:09.370
And here is a here, let me click into the open WebSocket open event.

90
08:10.810 --> 08:19.290
You can find that, in order to open, we will use in two way.

91
08:19.410 --> 08:19.810
Okay.

92
08:19.850 --> 08:20.850
We have a two way.

93
08:22.090 --> 08:23.130
I will use this

94
08:23.170 --> 08:29.290
y'all

95
08:29.330 --> 08:34.610
open event and let me console.log.

96
08:38.010 --> 08:40.170
Maybe I will check event over here.

97
08:42.010 --> 08:45.810
And let's see I will go to the.

98
08:49.170 --> 08:51.330
Browser and I will refresh.

99
08:51.570 --> 08:59.290
You can say, feel like we already console.log event, and inside the client you can see we already

100
08:59.290 --> 09:03.290
console.log the client connect from the server.

101
09:03.890 --> 09:06.490
What is mean right now?

102
09:07.650 --> 09:13.370
Well, let me summarize, firstly.

103
09:14.010 --> 09:17.650
We will listening into the connection event.

104
09:18.250 --> 09:18.770
Okay.

105
09:19.850 --> 09:27.530
Whenever we establish the new WebSocket it will trigger the connection over here.

106
09:27.890 --> 09:34.410
Let me show you I will refresh it will trigger the connection okay.

107
09:35.410 --> 09:40.090
If we don't have this line, it will doesn't console.log anything.

108
09:42.330 --> 09:42.610
Okay.

109
09:42.650 --> 09:45.530
You can see so right here.

110
09:45.530 --> 09:55.050
We, after the HTTP handshake done, it will trigger the connection.

111
09:55.770 --> 09:57.690
Let me show you in the network tab.

112
09:58.290 --> 10:04.050
I will click into the WebSocket right here and I will refresh okay.

113
10:04.090 --> 10:05.370
I will refresh.

114
10:05.890 --> 10:12.810
You can see inside here we already switched in the protocol right.

115
10:15.170 --> 10:17.650
I will click on request header.

116
10:18.570 --> 10:19.970
So here we have a connection.

117
10:19.970 --> 10:22.730
We will upgrade and upgrade.

118
10:22.730 --> 10:30.330
We will upgrade into the WebSocket and it will return the switching protocol okay.

119
10:30.370 --> 10:36.890
It means right now we already established the websocket connection successfully.

120
10:38.770 --> 10:48.610
And in the next video we will understand some events and build a chat application.

121
10:48.810 --> 10:50.930
So I will see you in the next one.