WEBVTT 00:00.400 --> 00:02.000 Hi everyone. 00:02.000 --> 00:06.080 Welcome to the new session about the real time stuff. 00:06.120 --> 00:12.800 Okay, since right now we already done with the summary. 00:14.880 --> 00:16.160 Module okay. 00:16.680 --> 00:22.280 And in the last session we already reviewed the message and conversation module. 00:22.840 --> 00:28.240 And actually inside the message only that need to be real time okay. 00:28.920 --> 00:34.840 Actually accept the get on method on this thing. 00:34.880 --> 00:38.760 This way real time okay. 00:38.800 --> 00:41.720 Like send a message should be real time. 00:41.760 --> 00:46.440 5051 is not it? 00:46.480 --> 00:50.000 Also let me go on on here okay. 00:50.560 --> 00:51.800 We need the send message. 00:51.840 --> 00:53.600 Should be real time. 00:55.240 --> 00:57.760 We need the update should be real time also. 00:57.760 --> 00:59.640 And remote server real time. 00:59.920 --> 01:02.250 And Mark moccasins should be real time. 01:02.290 --> 01:11.650 Okay, in this section I will show you how we can set up the Socket.io and do some real time stuff in 01:11.650 --> 01:12.050 here. 01:12.730 --> 01:21.610 Okay, if you don't know what exactly about Socket.io or you don't understand the WebSockets or the 01:21.610 --> 01:30.010 real time stuff, please go back to the fundamental section about WebSocket and Socket.io. 01:32.010 --> 01:40.890 Okay, in that section I already show you every the core concept you need to know about the real time. 01:41.410 --> 01:45.250 Okay, for now I will not discuss that. 01:45.410 --> 01:49.370 Instead of I will show you how we can set up the real time immediately. 01:49.770 --> 01:58.050 Okay, right now, if you already watch the socket arrow session, we need to install the bucket code 01:58.370 --> 01:59.370 Socket.io. 01:59.730 --> 02:00.250 Right. 02:02.660 --> 02:04.540 And would the socket at all. 02:04.580 --> 02:11.700 We can do for example like io not emit okay. 02:11.980 --> 02:16.740 For example like that or IO on with the collection. 02:16.740 --> 02:19.420 And we also have a socket like this. 02:19.460 --> 02:19.860 Right. 02:20.580 --> 02:31.420 But I think we, you know, we should follow the rule of nature like we say injections okay. 02:31.460 --> 02:36.860 Class base or object oriented programming okay. 02:38.580 --> 02:43.220 Of course we can use IO emit or IO on. 02:44.300 --> 02:45.660 You can do that. 02:45.660 --> 02:48.380 But this is not recommended okay. 02:49.020 --> 02:49.980 With that correct. 02:50.020 --> 03:00.870 It should use the dependency injection concept and object oriented Programming. 03:01.310 --> 03:07.870 So for some reason in this guide, I will show you now on the web page from the documentation right 03:07.870 --> 03:10.350 here and click on gateways. 03:10.390 --> 03:10.910 Okay. 03:11.590 --> 03:16.710 Now by the by I still use the second arrow. 03:16.710 --> 03:18.670 And what you get under the hood. 03:19.110 --> 03:19.590 Okay. 03:20.870 --> 03:25.270 Now let me show you what we need to install this bucket. 03:26.310 --> 03:28.670 So set up the WebSocket. 03:30.790 --> 03:33.870 Now let's install that bucket and enter. 03:37.310 --> 03:43.790 Now after it installed, I will show you how we can generate the. 03:46.350 --> 03:47.190 The gateway. 03:47.910 --> 03:48.390 Okay. 03:49.390 --> 03:53.510 So click on save and click on new size. 03:54.630 --> 03:58.070 I will show you what exactly does click on next. 03:58.110 --> 03:59.030 Then rest. 04:01.360 --> 04:08.800 With the schematics, we can use the something called gateway. 04:09.560 --> 04:10.040 Okay. 04:10.280 --> 04:15.360 We can generate the gateway for real time stuff. 04:15.480 --> 04:17.640 Okay, let me show you how we can do that. 04:19.440 --> 04:22.960 Let's generate the gateway. 04:23.680 --> 04:30.640 And with gateway right here, we can name for it with the current module. 04:30.960 --> 04:36.760 First of all, I want we can create the gateway for message. 04:36.960 --> 04:39.240 I will name it message right here. 04:39.960 --> 04:40.160 Okay. 04:40.160 --> 04:41.280 Let's enter that. 04:43.720 --> 04:51.400 Now after that it will generate for you the message gateway and it will update the module. 04:51.640 --> 04:53.280 Let me open the message right here. 04:53.880 --> 04:57.000 Right now we don't need the spec file for testing. 04:57.040 --> 04:58.200 Let's remove this. 05:00.170 --> 05:00.690 Okay. 05:00.890 --> 05:07.490 Now, if you take a look at the gateway you can follow. 05:07.490 --> 05:12.570 It will prepare for you some gateway over here and inside the module. 05:12.770 --> 05:18.690 It will also improve the gateway inside the provider for dependency injection. 05:18.890 --> 05:19.410 Okay. 05:19.690 --> 05:26.730 In order to mark the gateway will become dependency injection is to inject it inside the provider. 05:27.050 --> 05:27.530 Okay. 05:28.610 --> 05:30.650 I hope you very clear right now. 05:31.170 --> 05:32.650 So what exactly does. 05:32.810 --> 05:36.610 Firstly we need to use the WebSocket gateway decorator. 05:36.610 --> 05:46.930 So we set up the gateway and do the dependency injection and configuration stuff over here. 05:47.530 --> 05:55.050 Now for example if you click inside the example right here, you can uh click this an example to say. 05:58.370 --> 06:06.780 Click on for those events and good inside the event gateway. 06:07.420 --> 06:11.740 Now you can say right here it has something called configuration. 06:12.620 --> 06:15.900 We need to enable cars. 06:16.180 --> 06:16.700 Okay. 06:17.940 --> 06:18.300 Like that. 06:18.300 --> 06:21.700 Let me show you right here I will enable cars for funny. 06:25.340 --> 06:27.260 Cars and origin. 06:30.260 --> 06:31.500 Something like that okay. 06:31.540 --> 06:33.220 We can create that. 06:33.860 --> 06:43.340 And right here you can say we need to create several folders and several right here. 06:43.380 --> 06:45.100 Come from the Zucchero. 06:45.620 --> 06:46.180 Okay. 06:46.700 --> 06:53.300 Now let me show you what exactly does right here I will create a WebSocket. 06:57.500 --> 07:02.630 Server he brought us and initialize the several. 07:03.390 --> 07:05.310 Recover several from. 07:05.350 --> 07:05.630 Uh. 07:07.390 --> 07:08.950 We need to invoke manually. 07:12.630 --> 07:13.310 Several. 07:17.470 --> 07:21.790 So now let us. 07:23.470 --> 07:24.030 Okay. 07:27.710 --> 07:37.310 So that is with this why we can inject the, uh, socket IO server. 07:37.830 --> 07:38.350 Okay. 07:39.230 --> 07:41.830 And you may ask me what exactly does mean? 07:41.830 --> 07:49.030 Well, it is exactly the same lies io in the socket in a normal socket. 07:49.030 --> 07:49.350 Io. 07:49.390 --> 07:54.230 Okay, this one right here will be exactly the same with the IO. 07:55.150 --> 07:55.710 Okay. 07:56.710 --> 08:03.880 And because this is the class by constructor, we can supply the general. 08:03.920 --> 08:04.160 Okay. 08:04.200 --> 08:07.800 I will show you what exactly the supply message. 08:08.080 --> 08:08.880 Eliza. 08:09.160 --> 08:10.840 Don't worry about that right now. 08:11.800 --> 08:15.680 Okay, so let me show you what? 08:15.680 --> 08:18.040 What you mean right here. 08:18.040 --> 08:26.360 If you click inside documentation, you will see we have one more topic for lifecycle hook. 08:26.680 --> 08:27.840 Let's click on that. 08:28.600 --> 08:33.720 Now you can see in here we have a sum on gateway in it. 08:34.280 --> 08:43.800 When we init it will trigger inside hook inside lifecycle over here on gateway connection and on gateway 08:43.840 --> 08:44.600 disconnect. 08:45.000 --> 08:52.160 Okay it very much the same with the IO dot on and connection. 09:01.690 --> 09:02.370 Over here. 09:02.610 --> 09:03.130 Okay. 09:03.490 --> 09:05.810 And I ordered on this connection. 09:05.850 --> 09:06.290 Okay. 09:07.650 --> 09:09.570 It's exactly the same. 09:10.770 --> 09:11.930 So let me show you. 09:13.290 --> 09:17.890 This here is interface. 09:18.050 --> 09:26.210 For that reason, we need to implement the interface with based on gateway connection. 09:26.250 --> 09:26.610 Okay. 09:26.650 --> 09:29.490 I don't care about gateway in it right now. 09:29.810 --> 09:32.850 Let's focus inside on gateway connection. 09:35.170 --> 09:35.850 Connection. 09:36.210 --> 09:41.250 And on gateway disconnect okay. 09:41.810 --> 09:47.410 And because we already implement we should implement the method also. 09:48.210 --> 09:57.850 Let me go here and click on with face and implement with the fly on connection. 09:59.990 --> 10:01.870 And one more time. 10:02.870 --> 10:05.950 Everyone on gateway disconnect. 10:06.430 --> 10:10.510 Okay, so right here we already have a connection and disconnect. 10:10.830 --> 10:14.710 Let me move this thing on on top. 10:15.550 --> 10:16.070 Okay. 10:16.710 --> 10:25.310 So we have a client and we have a summary argument right now let me remove the argument in the collection. 10:25.310 --> 10:29.150 When we collect I will console.log the. 10:32.710 --> 10:36.750 Client collect with the id right. 10:38.790 --> 10:45.110 Pretty much the same with the normal socket at all. 10:46.150 --> 10:46.350 Right. 10:46.350 --> 10:46.550 Here. 10:46.550 --> 10:47.750 This is the enclave. 10:47.750 --> 10:49.470 We can improve now. 10:49.870 --> 10:50.910 So get over here. 10:54.030 --> 10:54.550 Okay. 10:55.470 --> 10:58.960 And let me console.log Ion. 11:09.320 --> 11:11.000 Nuclear clock. 11:11.280 --> 11:11.560 Ah. 11:12.560 --> 11:13.000 Okay. 11:13.040 --> 11:20.960 Right now, we cannot test that because in order to handle the collection and disconnect, we should 11:21.040 --> 11:22.480 have a friend. 11:22.800 --> 11:23.320 Okay. 11:23.600 --> 11:27.200 When a friend connects, it will, uh, you will say. 11:28.600 --> 11:31.600 But right now, we are not clear about us. 11:31.680 --> 11:33.800 Let me move this thing on top of that. 11:35.080 --> 11:35.600 Okay. 11:35.840 --> 11:42.560 I just want to show you it will be exactly the same with the IO connection. 11:43.440 --> 11:43.800 Okay. 11:43.840 --> 11:45.520 That's the whole point right now. 11:46.120 --> 11:48.520 And what is the supply message? 11:49.960 --> 11:53.520 Well, let me show you what you mean with the supply message. 11:53.560 --> 11:57.680 It pretty much the same with the event name. 11:57.720 --> 11:58.200 Okay. 11:58.290 --> 12:01.450 You can take this event name from the client. 12:01.650 --> 12:02.210 Okay. 12:02.650 --> 12:12.810 For example, from the front end, we want to emit event with no new message. 12:13.370 --> 12:13.850 Okay. 12:14.010 --> 12:16.170 It means right now in subscribe message. 12:16.210 --> 12:18.490 We will listen on new message. 12:18.810 --> 12:19.330 Okay. 12:19.810 --> 12:20.290 Easy. 12:20.290 --> 12:20.810 Like us. 12:23.930 --> 12:25.970 And subscribe message right here. 12:27.090 --> 12:32.930 We only need a subscribe message if this is the message come from the client. 12:32.970 --> 12:33.490 Okay. 12:34.130 --> 12:36.050 Only come from the client. 12:36.250 --> 12:38.970 We need to use the subscribe message. 12:40.370 --> 12:40.890 Okay. 12:41.170 --> 12:43.450 When we emit the event from. 12:45.970 --> 12:46.850 The client. 12:50.690 --> 12:51.890 Let me show you what it mean. 12:52.490 --> 12:55.490 One way immediate event. 12:55.530 --> 12:56.290 We should add. 12:56.810 --> 12:58.540 Emit the event. 12:59.100 --> 13:06.140 Okay, if this is a server, we can feel free to use the something like server. 13:06.180 --> 13:08.140 Okay, this is the server, right? 13:08.620 --> 13:13.900 We can feel free to use for example like this server. 13:15.900 --> 13:16.340 Right? 13:16.380 --> 13:16.860 Okay. 13:17.060 --> 13:18.100 Exactly the same. 13:18.620 --> 13:20.820 It will exactly the same with the normal. 13:21.580 --> 13:22.020 Okay. 13:22.420 --> 13:25.540 And the server right here it will be the IO. 13:25.940 --> 13:26.180 Okay. 13:26.220 --> 13:28.780 You can think about us but. 13:31.460 --> 13:37.740 If we use this server not emit the event it means the server event right. 13:37.940 --> 13:40.340 This is clearly a server event. 13:40.980 --> 13:48.940 And if this is the server event we just need to use in normal way okay. 13:49.540 --> 13:59.790 But if the answer is client send event okay or client emit event, we should register it with the right 13:59.830 --> 14:00.270 message. 14:00.590 --> 14:00.950 Okay. 14:00.990 --> 14:06.950 Furthermore, inside the program, we want to send the event like. 14:08.350 --> 14:14.310 Let me show you in a reward inner rewards the the client. 14:14.670 --> 14:19.710 It will send the event for zero. 14:21.150 --> 14:21.670 Okay. 14:22.150 --> 14:27.390 So we will create something like okay.com. 14:30.390 --> 14:32.550 Join room okay. 14:32.870 --> 14:34.390 We need so sorry. 14:34.430 --> 14:40.110 So to get an image we want to emit an event with a zero okay. 14:40.150 --> 14:47.070 It means in this case we should supply the message with the genre over here. 14:47.230 --> 14:51.750 Because the message come from the client. 14:52.150 --> 14:52.630 Okay. 14:52.670 --> 14:54.030 Very clear right now. 14:54.430 --> 14:55.950 Okay, I hope you very clear. 14:56.510 --> 15:00.680 And don't worry if it's not fully wrapped in your head. 15:01.040 --> 15:01.600 Don't worry. 15:01.600 --> 15:06.120 When we practice, you will become understand? 15:06.160 --> 15:06.720 Don't worry. 15:07.000 --> 15:14.400 Okay, so I already explained for you what exactly does and how we can set up. 15:14.760 --> 15:16.000 And let me explain. 15:16.040 --> 15:19.640 One more thing for you will be the I o and socket. 15:20.160 --> 15:21.440 If you remember. 15:24.160 --> 15:25.480 What is the I o? 15:25.760 --> 15:31.960 Now let's take away what is the I o blades below the video and answer this question. 15:33.080 --> 15:37.760 Well, the I o is contains all the sockets. 15:37.960 --> 15:38.280 Okay. 15:38.320 --> 15:40.960 It will contain all sockets from the clients. 15:41.720 --> 15:43.120 And what is the socket? 15:43.160 --> 15:46.920 The socket for here is the socket okay. 15:47.400 --> 15:50.680 With only single client connecting to the server. 15:51.200 --> 15:59.330 Okay, so you already know in order to use the I o we should showed you this dot server. 16:00.370 --> 16:06.450 Okay, so how about the single client socket over here? 16:07.330 --> 16:08.930 How we can retrieve that. 16:09.850 --> 16:10.250 Okay. 16:10.290 --> 16:20.650 In order to retrieve that, we can use something like let me say, um. 16:25.530 --> 16:26.530 We have a caller. 16:26.570 --> 16:27.570 So get over here. 16:27.770 --> 16:28.290 Okay. 16:28.450 --> 16:29.970 We have socket over here. 16:30.690 --> 16:31.530 Right here. 16:32.730 --> 16:33.930 We can put. 16:36.250 --> 16:39.050 The socket over here. 16:41.730 --> 16:43.170 Message body. 16:43.770 --> 16:44.170 Okay. 16:44.210 --> 16:47.730 Actually, right here, we can create something like that. 16:47.850 --> 16:51.930 Let me copy everything and put that over here in this plan for you. 16:52.890 --> 16:53.370 Okay. 16:54.610 --> 16:55.330 Here, here. 16:56.900 --> 16:58.420 Okay, let's remove this. 17:00.020 --> 17:00.540 Okay. 17:00.740 --> 17:05.820 When we trigger the event, we will have a data. 17:05.860 --> 17:06.140 Okay. 17:06.140 --> 17:08.740 The data here will come from the front end. 17:08.740 --> 17:09.180 Right. 17:09.780 --> 17:17.580 And the client over here will be exactly the same with the socket okay. 17:17.620 --> 17:20.340 It is exactly the same with socket over here. 17:20.900 --> 17:30.420 So that is right now we already fully clear about what exactly about the gateway and how we can map 17:30.420 --> 17:32.820 it with the socket concept. 17:33.100 --> 17:33.620 Okay. 17:34.420 --> 17:43.380 So in order to understand this lecture you should understand how we can use the socket at all in normal 17:43.420 --> 17:44.260 application. 17:44.660 --> 17:51.940 If you don't understand what exactly about socket error in a normal, you will not understand this video. 17:51.980 --> 17:52.500 Right. 17:52.940 --> 17:57.740 So I hope you understand and I will see you in the next one.