WEBVTT

00:00.920 --> 00:02.520
Hi everyone.

00:02.960 --> 00:12.320
In this video I will show you how we can inject the message gateway and when we send a message, I want

00:12.320 --> 00:13.800
it real, real time, right?

00:14.680 --> 00:16.320
So how to do that?

00:16.560 --> 00:17.720
Let's think a little bit.

00:18.360 --> 00:22.720
So the question right now is how we can inject the gateway.

00:25.080 --> 00:26.160
It's very easy.

00:26.640 --> 00:30.600
The gateway right here is just a class for a reason.

00:30.600 --> 00:33.480
We can inject class like usual.

00:44.120 --> 00:44.800
Class.

00:46.840 --> 00:52.880
And right now how we can send the message okay.

00:52.920 --> 01:03.660
If you remember, if you see the normal socket we will use something like this I will not admit.

01:03.700 --> 01:04.220
Right.

01:04.260 --> 01:11.380
We will possibly new message event and we will put the data right.

01:11.980 --> 01:19.260
So right now in order to use that we need to use the gateway.

01:19.540 --> 01:28.860
This dot gateway dot right here we can delegate that job into the gateway.

01:28.900 --> 01:34.420
It means right here we should create a method for same message.

01:34.460 --> 01:34.940
Okay.

01:40.180 --> 01:42.860
Actually right here I will call the.

01:45.260 --> 01:48.940
Handle new message like this.

01:51.620 --> 01:52.220
Okay.

01:53.660 --> 01:59.650
And right here we need to give the this Does.

02:01.930 --> 02:02.730
Not emit.

02:04.890 --> 02:09.290
We emit from the server to the client.

02:09.610 --> 02:10.130
Right.

02:13.730 --> 02:21.290
So when when the client creates the new message.

02:22.570 --> 02:28.770
But on send we need to send in here right.

02:30.250 --> 02:34.210
New message with the data.

02:35.370 --> 02:35.930
All right.

02:38.690 --> 02:42.650
But the question right now is how we can do that.

02:42.810 --> 02:46.210
Now if you remember I will show you.

02:48.370 --> 02:51.850
Right here I will call handle new message.

02:52.330 --> 02:55.650
And we need to put the sound argument right.

02:56.290 --> 02:57.890
We already had an event name.

02:57.890 --> 03:01.150
It Meanwhile, here we should have our data.

03:01.750 --> 03:04.110
I will call this will be added right now.

03:04.790 --> 03:06.350
And I will send the data.

03:06.670 --> 03:07.150
Okay.

03:07.550 --> 03:08.990
So what is the data?

03:08.990 --> 03:10.750
We want to watch it over here.

03:11.750 --> 03:21.070
Well let's take a little bit when we send a message okay.

03:21.390 --> 03:23.190
And when we get own message.

03:23.550 --> 03:27.750
Now you can say if I get own message you will say this is the object, right?

03:28.110 --> 03:29.790
I want to somehow.

03:32.230 --> 03:35.070
Send the message right here okay.

03:35.110 --> 03:36.470
I want this is the data.

03:36.470 --> 03:38.670
I want to put that over here.

03:39.070 --> 03:39.590
Okay.

03:39.830 --> 03:42.510
I want the data over here.

03:43.310 --> 03:46.030
Will be somehow we need to convert it.

03:46.670 --> 03:53.070
Now you will say this is the message we need to save into the database, right?

03:53.950 --> 04:00.490
And from this same message, I want to somehow convert it into a data structure.

04:01.010 --> 04:01.370
Okay.

04:01.410 --> 04:09.370
It will retain and send it to client in real time.

04:09.410 --> 04:09.850
Right.

04:10.290 --> 04:13.970
So the question right now is how we can convert it.

04:14.450 --> 04:15.770
If we remember.

04:18.010 --> 04:24.250
In the read on message we already have something called Jotform DTO.

04:24.650 --> 04:27.330
And we have a response message video.

04:27.490 --> 04:27.930
Right.

04:30.210 --> 04:41.250
Well, with the interceptor for the transform video, it only converts the return statement right here

04:41.730 --> 04:42.930
into the video.

04:43.690 --> 04:44.090
Okay.

04:44.130 --> 04:47.250
Right now I want it to somehow, somehow convert.

04:50.890 --> 04:56.880
The submitted into the response message video.

04:57.520 --> 04:59.520
Okay, that's what I want, right?

04:59.520 --> 05:00.040
Right now.

05:00.960 --> 05:02.560
How we can convert us.

05:04.560 --> 05:07.600
That's the question, right?

05:08.920 --> 05:09.440
Right now.

05:09.440 --> 05:18.120
Right now we have a save versus I will show you how we can do that in here.

05:18.520 --> 05:29.680
We can populate, if you remember, in the get all message we already populated with sender and symbol

05:29.720 --> 05:30.040
right.

05:30.080 --> 05:32.320
We need to populate that also.

05:33.160 --> 05:35.520
Let me put this over here.

05:36.200 --> 05:36.760
Okay.

05:37.360 --> 05:38.640
I will populate that.

05:41.280 --> 05:45.960
And uh right now we have some row.

05:46.840 --> 05:49.760
Actually I will remove over here.

05:50.360 --> 05:51.240
I will remove it.

05:51.240 --> 05:52.400
Highly populated.

05:54.440 --> 05:55.080
In here.

05:55.820 --> 05:57.900
I will call the.

06:00.380 --> 06:07.580
Respond method or something like that and I will convert.

06:07.860 --> 06:17.020
Well the first way we can manually convert it by hand, but I'm not a fan of this way.

06:17.460 --> 06:21.820
So for that reason we can use the plan to install.

06:22.300 --> 06:22.860
Okay.

06:23.100 --> 06:25.340
With this thing we can put the response.

06:27.580 --> 06:28.300
Ratio.

06:31.260 --> 06:36.380
And we would object to save message over here.

06:36.740 --> 06:37.180
Right.

06:38.740 --> 06:42.020
Right here we have a save method I will populate that.

06:45.980 --> 06:48.940
I will verbalize this here.

06:48.980 --> 06:50.220
Let me copy this.

06:51.460 --> 06:56.810
And I will boost over here For one hour each will mobilize the state.

06:59.330 --> 07:05.930
And the second one, we will popularize this state also.

07:06.810 --> 07:07.330
Okay.

07:08.970 --> 07:16.490
And after that we will put the same message into the video over here.

07:16.770 --> 07:17.250
Right.

07:18.010 --> 07:27.130
And the last one will be, uh, if you open the channel from video, you will see we have one more options

07:27.650 --> 07:28.330
right here.

07:28.690 --> 07:29.210
Right.

07:29.410 --> 07:33.570
I will copy that and put over here.

07:38.850 --> 07:39.330
Okay.

07:41.890 --> 07:42.690
Right here.

07:43.210 --> 07:48.090
Um, actually, because this this can be.

07:50.930 --> 07:51.530
Well.

07:54.470 --> 07:56.470
This thing can be, uh.

07:58.150 --> 08:00.630
All right.

08:05.150 --> 08:06.710
Let me say that another way.

08:10.430 --> 08:11.030
Right here.

08:11.030 --> 08:17.630
I think I can vary it to the save the message.

08:18.790 --> 08:19.430
Okay.

08:23.470 --> 08:30.150
Are you going to write this dot message model dot file binary.

08:30.550 --> 08:35.230
And I remove the save message dot over here.

08:35.950 --> 08:36.430
Okay.

08:37.270 --> 08:38.510
And move that over here.

08:43.190 --> 08:43.670
Right here.

08:43.670 --> 08:50.510
This can be known, but actually we don't need to check that because if we already create it right here

08:50.510 --> 08:52.730
we will for sure have a would I die?

08:54.010 --> 08:58.610
And right here I will put the first one over here.

08:59.130 --> 08:59.610
Right.

09:00.370 --> 09:04.170
And it will formulate a response message with your.

09:04.450 --> 09:07.250
Let me over here and put inside the data.

09:08.050 --> 09:18.970
And right now how we can test that would finally we cannot test that in the most main or the some tool

09:19.010 --> 09:19.650
over here.

09:20.810 --> 09:21.450
Okay.

09:22.930 --> 09:28.010
But we can test that using the console over here.

09:29.610 --> 09:32.330
We will call check data from.

09:34.610 --> 09:39.330
Uh check data from okay.

09:40.930 --> 09:43.370
I will call it as over here.

09:47.170 --> 09:51.920
Now you can say if I send this message.

09:55.880 --> 09:58.720
Follow is not have an error.

09:59.120 --> 10:05.760
And if you hover in here now you can see it already converts fully the sender.

10:05.800 --> 10:11.240
The sender name and sender avatar right here will be new.

10:11.480 --> 10:12.400
I don't know why.

10:12.960 --> 10:14.120
Let me try to.

10:17.240 --> 10:19.360
It means right here.

10:21.720 --> 10:22.920
We have the error.

10:24.000 --> 10:24.680
Let me say.

10:29.440 --> 10:30.400
Users.

10:36.000 --> 10:37.360
We have avatar.

10:46.320 --> 10:48.800
We have a bit of a wrong or.

10:49.600 --> 10:51.180
I don't know the reason.

10:51.180 --> 10:52.820
Because I forgot about you guys.

10:52.860 --> 10:57.300
Okay, let me copy the populis and put us over here.

10:59.940 --> 11:00.500
Put us.

11:00.540 --> 11:01.060
Okay.

11:02.900 --> 11:05.060
And right now, it should work.

11:15.020 --> 11:16.340
Now you guys are right here.

11:16.340 --> 11:18.660
We already have a sender name, sender avatar.

11:19.100 --> 11:21.220
And we also have a sim.

11:23.380 --> 11:23.940
Right.

11:25.220 --> 11:27.500
And the media file right here.

11:28.340 --> 11:28.700
Hmm.

11:29.340 --> 11:31.700
It's already empty.

11:35.380 --> 11:35.940
Why?

11:35.980 --> 11:36.660
Like us?

11:38.460 --> 11:39.660
Media file.

11:40.620 --> 11:44.260
Let me double check over here.

11:49.520 --> 11:49.800
Here.

11:49.800 --> 11:50.920
I send a little bit.

12:08.600 --> 12:09.280
Right here.

12:09.280 --> 12:16.040
We don't have any media file right inside the body.

12:17.360 --> 12:18.320
Right here.

12:19.520 --> 12:24.120
Um, it means we already have something went wrong inside the.

12:24.120 --> 12:24.880
My --.

12:25.960 --> 12:27.480
My -- over here.

12:33.800 --> 12:36.560
Let me try to console.log.

12:37.280 --> 12:45.440
Or actually let me try to check the database to say we have a media file or not right here.

12:45.440 --> 12:54.310
Actually, we already have media files, but it's not return, it means inside a wristband message model.

12:56.230 --> 12:57.230
This array will.

12:57.230 --> 13:01.350
All right here verify all.

13:02.910 --> 13:09.870
So I forgot I completely forgot to put the media file over here.

13:10.110 --> 13:10.710
Right.

13:11.590 --> 13:19.630
So let me, uh, show you how we can do that right here.

13:20.150 --> 13:25.670
So this is Bob, and I will show you what is inside media file.

13:26.550 --> 13:27.110
Okay?

13:29.990 --> 13:30.470
Now.

13:32.870 --> 13:36.310
Let's focus right here.

13:36.310 --> 13:41.430
I will go back to the guest and remove the console.log.

13:53.130 --> 13:54.210
If I said okay.

13:56.290 --> 14:01.450
Now you will say we already have a right with the object.

14:01.930 --> 14:07.690
We need to map it and return exactly the same up here.

14:09.890 --> 14:10.370
Right.

14:10.770 --> 14:12.530
In here I will call object.

14:15.050 --> 14:15.650
Files.

14:18.210 --> 14:19.090
And will map.

14:19.650 --> 14:22.370
Will file okay.

14:22.370 --> 14:24.010
With the file right here.

14:24.730 --> 14:30.690
I can copy it in and put it over here.

14:31.730 --> 14:36.570
Right here I will replace everything into.

14:41.410 --> 14:43.530
The box.

14:49.190 --> 14:49.750
By.

14:51.510 --> 14:53.910
Okay, something like that.

14:54.710 --> 15:06.990
And let me see if I say now you will say in here, we already got the media file with this here.

15:07.630 --> 15:08.310
Very good.

15:08.350 --> 15:08.710
Right.

15:09.270 --> 15:17.390
And so this is why let me open the console over here.

15:19.710 --> 15:30.230
And let's see again I will send a message and say now let's check.

15:30.750 --> 15:34.310
We already have a media file for record okay.

15:34.350 --> 15:40.550
And we also have some, uh, exactly the same structure okay.

15:40.670 --> 15:51.660
It means right now when we call Cloned API to send a message after we already send a message successfully.

15:51.700 --> 15:54.300
We will handle that.

15:54.340 --> 15:54.740
Okay.

15:54.780 --> 16:03.420
We will delegate that job into the message gateway and message gateway it will send.

16:03.460 --> 16:05.740
It will emit a new event right?

16:06.980 --> 16:12.620
For with the new message event here with the data.

16:12.660 --> 16:22.220
But we haven't completed the same message yet because the message should belong to the conversation.

16:22.460 --> 16:22.780
Okay.

16:22.820 --> 16:26.380
It means we we need to use the room concept.

16:26.620 --> 16:27.180
Okay.

16:27.460 --> 16:32.860
If you remember inside the socket I already introduced for use the room.

16:32.980 --> 16:33.500
Okay.

16:33.820 --> 16:35.380
We should create a room over here.

16:35.420 --> 16:36.100
It means right here.

16:36.100 --> 16:40.180
We should do some how to and convert session.

16:41.260 --> 16:41.860
Right?

16:41.900 --> 16:44.460
We need to put a conversation ID over here.

16:44.460 --> 16:44.600
Yeah.

16:45.640 --> 16:46.520
Let me ask.

16:48.800 --> 16:49.920
Is that a conversation?

16:50.080 --> 16:52.000
I would.

16:54.720 --> 17:00.160
Hope that the message of it over here, what's in the conversation.

17:00.160 --> 17:03.200
And we can use that directly over here.

17:03.880 --> 17:04.600
Conversation.

17:05.080 --> 17:05.600
Okay.

17:06.120 --> 17:11.000
We will only send the message belong to the conversation.

17:11.920 --> 17:12.480
Okay.

17:12.520 --> 17:13.480
Very, very cool.

17:14.080 --> 17:26.480
And of course, in the front end, we also have a event for Joy's room right now, for example, is

17:26.480 --> 17:38.000
the client I will say socket dot emit sorry room with the conversation ID over here.

17:39.080 --> 17:39.560
Right.

17:40.440 --> 17:40.880
So.

17:44.350 --> 17:52.550
It means this is the new event come from the foreign foreign region.

17:52.550 --> 17:55.150
We should use the supply method.

17:55.390 --> 17:56.950
Let me show you how it works.

17:57.070 --> 17:59.550
So here I will copy the name over here.

17:59.790 --> 18:02.310
So room and handle.

18:03.990 --> 18:04.590
Sorry.

18:05.590 --> 18:06.150
Room.

18:06.710 --> 18:07.230
Okay.

18:07.470 --> 18:13.070
Or actually I think I will call handle on conversation to be better.

18:16.390 --> 18:16.830
Okay.

18:16.870 --> 18:17.950
Something like that.

18:18.590 --> 18:21.190
And right here we should have a data.

18:21.950 --> 18:22.470
Right.

18:23.750 --> 18:34.350
So we need to handle over here when the client sends emit the event over here.

18:34.670 --> 18:39.870
What we need to do we need to Xyrem.

18:40.430 --> 18:40.950
Right.

18:41.550 --> 18:43.930
It means right here we should give you the client.

18:44.250 --> 18:45.050
Client?

18:45.450 --> 18:45.890
Not.

18:48.130 --> 18:50.050
With a conversation.

18:50.090 --> 18:52.170
But here I will call the conversation.

18:52.210 --> 18:55.130
And I will save over here.

18:55.770 --> 18:56.290
Okay.

18:56.690 --> 18:59.570
With this line of code, we will design a room.

19:00.090 --> 19:01.410
And right here.

19:02.930 --> 19:09.610
This is the promise is a promise I can I can avoid over here.

19:10.690 --> 19:11.210
See?

19:12.010 --> 19:16.690
Okay, so I hope you understand.

19:16.690 --> 19:17.090
Right.

19:18.010 --> 19:24.930
And right now, let me give you one more idea when we work with Fortnite application.

19:25.170 --> 19:31.450
Furthermore, it later we have an ACL for same message, right.

19:31.930 --> 19:39.450
Same message with the some conversation with some data over here.

19:41.750 --> 19:42.430
Right?

19:44.430 --> 19:44.950
Well.

19:48.630 --> 19:54.950
After we send the message, we will receive the handle.

19:54.950 --> 19:57.830
New message over here come from there.

19:57.830 --> 20:04.310
But in the end, the socket server, it will send the data right here for me.

20:04.910 --> 20:08.350
And we will receive that immediately on the front end.

20:08.750 --> 20:09.230
Right.

20:09.470 --> 20:16.710
We already know about us, but how we can how we can send a message.

20:16.710 --> 20:17.230
Okay.

20:17.950 --> 20:24.670
Right now, whenever we click okay, whenever we click into the conversation.

20:25.070 --> 20:26.350
Let me show you what it means.

20:27.870 --> 20:29.950
Maybe you can do something like that.

20:30.790 --> 20:33.350
Let me find the image for the messengers.

20:36.310 --> 20:37.550
For example, in here.

20:43.660 --> 20:44.100
No.

20:58.860 --> 20:59.260
Okay.

20:59.260 --> 21:00.900
It's similar right here.

21:01.500 --> 21:07.540
When we get into the conversation, we will emit a metadata event.

21:07.820 --> 21:08.180
Okay.

21:08.220 --> 21:11.660
We will emit the event from the client.

21:11.700 --> 21:12.220
Okay.

21:12.580 --> 21:19.740
Make sure we emit the event right here from the client revision control session.

21:21.380 --> 21:21.820
Okay.

21:21.860 --> 21:26.180
And after that, this client right here will be inserted into the conversation.

21:26.500 --> 21:31.460
And we can easily send a message using this API.

21:31.700 --> 21:32.180
All right.

21:32.700 --> 21:33.940
So that's the idea.

21:34.860 --> 21:39.420
And so I hope you understand this video.

21:39.860 --> 21:41.260
So I will see you in the next.