WEBVTT

1
00:00.760 --> 00:02.400
Hi everyone.

2
00:02.400 --> 00:12.400
In this video let's set up the socket io okay, right here in previous section.

3
00:12.400 --> 00:16.320
I already prepared for you the chat http, right?

4
00:16.520 --> 00:18.920
Right now let's reuse that.

5
00:20.200 --> 00:29.560
Let me try to rename the previous project, and I will drag this project over here and I will rename

6
00:29.560 --> 00:30.720
it to chat.

7
00:31.600 --> 00:33.240
socket io, okay

8
00:33.520 --> 00:34.760
Something like that.

9
00:35.480 --> 00:37.520
And let's open the project.

10
00:53.960 --> 00:57.200
Right here, it's totally.

11
00:57.200 --> 00:58.520
something like that.

12
01:01.800 --> 01:05.720
Now let's see how we can set up the socket.io

13
01:06.880 --> 01:12.600
In order to set up the socket io, we need to set up for the client.

14
01:13.880 --> 01:14.440
Okay.

15
01:15.640 --> 01:17.760
And the server.

16
01:20.480 --> 01:21.320
In this.

17
01:24.920 --> 01:35.800
Client, we cannot use the native WebSocket APIs like previous section anymore because right here we

18
01:35.800 --> 01:38.320
We use the socket.io and socket.

19
01:38.360 --> 01:46.480
IO is an enhanced version of the WebSocket, right.

20
01:46.880 --> 01:51.600
So for that reason we need to use the socket IO for the client.

21
01:51.640 --> 01:54.720
Also we will install that manually.

22
01:55.200 --> 01:58.640
And of course we will install for the server.

23
02:00.530 --> 02:08.650
Now let's go to here and short for socket io and click on the first page.

24
02:10.690 --> 02:11.210
Right here.

25
02:11.210 --> 02:13.570
Let's click on Get Started.

26
02:15.930 --> 02:21.010
And you can see right here inside the project initialization.

27
02:21.810 --> 02:23.130
We already set up.

28
02:25.250 --> 02:26.130
The project.

29
02:26.170 --> 02:26.690
Right.

30
02:28.490 --> 02:30.970
And let's click on step three.

31
02:31.010 --> 02:32.890
Integrate the socket.io

32
02:32.890 --> 02:37.450
Firstly inside the server we need to install this package.

33
02:37.690 --> 02:40.650
Let me copy this go here.

34
02:44.850 --> 02:47.490
And install.

35
02:47.850 --> 02:48.730
Socket.io

36
02:48.810 --> 02:49.370
The socket.io

37
02:49.370 --> 02:49.970
Right

38
02:49.970 --> 02:52.570
Here is about the server socket.io

39
02:55.290 --> 02:59.810
And we need to set up the client socket.io

40
02:59.810 --> 03:02.050
Right? In here.

41
03:02.090 --> 03:04.530
Let's copy this script right here.

42
03:04.530 --> 03:08.690
This is a library of the socket.io from the client.

43
03:09.450 --> 03:13.410
Let's copy that and put that inside the index.html.

44
03:15.970 --> 03:20.850
Put that before the my script.

45
03:22.650 --> 03:24.010
Let's scroll a little bit.

46
03:24.730 --> 03:28.770
Right now we need to set up the socket io.

47
03:29.010 --> 03:29.570
Right.

48
03:32.810 --> 03:35.850
Go back to the server right here.

49
03:37.530 --> 03:42.890
Firstly we will use the server from Socket.io.

50
03:43.250 --> 03:45.490
Let me follow the documentation.

51
03:53.450 --> 03:57.130
We need the server right.

52
03:58.530 --> 03:58.930
And.

53
04:02.660 --> 04:03.460
Right here.

54
04:03.460 --> 04:07.020
We also need use the http module.

55
04:17.380 --> 04:18.380
Right here. Let's

56
04:18.380 --> 04:19.540
Refactor that.

57
04:25.420 --> 04:29.660
Server and pass the app over here and change the.

58
04:29.660 --> 04:30.260
Listen.

59
04:31.460 --> 04:32.060
Okay.

60
04:32.580 --> 04:39.540
And we need to create, establish the WebSocket.

61
04:41.500 --> 04:46.540
In order to do this we will create a new server model server over here.

62
04:49.780 --> 04:58.420
We will call that will be a "io" equal new server and pass option will be.

63
05:00.900 --> 05:01.500
Let me see.

64
05:02.020 --> 05:05.260
Oh, we we just need pass directly the server over here.

65
05:07.340 --> 05:07.900
Okay.

66
05:08.260 --> 05:10.100
And inside the io connection.

67
05:11.260 --> 05:18.140
We can listen in into the connection event.

68
05:21.780 --> 05:23.660
And I will console.log.

69
05:34.020 --> 05:39.540
And inside the script right here we need the way to establish.

70
05:39.540 --> 05:40.140
Right.

71
05:40.180 --> 05:44.700
Let me scroll down a little bit in here.

72
05:44.700 --> 05:49.220
We just need to call the socket io

73
05:55.460 --> 05:55.940
Okay.

74
05:56.300 --> 06:03.270
io something like that and let's see we need to run the server.

75
06:09.390 --> 06:11.110
Let me go to this screen.

76
06:11.150 --> 06:12.950
And I will refresh.

77
06:14.030 --> 06:16.510
And you can see right here we already connect.

78
06:17.150 --> 06:17.550
Okay.

79
06:17.550 --> 06:22.190
Right here you can put the URL right here you want.

80
06:25.870 --> 06:29.590
Because right here we already use the same domain.

81
06:29.590 --> 06:31.990
For that reason we don't need to put.

82
06:34.070 --> 06:39.310
The URL over here it will automatically use this URL.

83
06:44.230 --> 06:55.030
So that's how we can establish the WebSockets connection using the Socket.io.

84
06:57.550 --> 07:00.790
And that's for the video I will see you in the next.