WEBVTT

00:00.400 --> 00:02.040
Hi everyone.

00:02.040 --> 00:09.600
In previous video we already added real time for create a new message, right?

00:10.880 --> 00:15.120
Well in this video let's do similar for update.

00:16.200 --> 00:20.960
Now if you can see right here we already have a message right.

00:23.880 --> 00:30.800
And right here we have a sub way to do that.

00:33.880 --> 00:34.440
Right.

00:40.640 --> 00:43.040
Right here we can do that.

00:43.040 --> 00:45.200
Similar with this thing.

00:46.040 --> 00:46.760
This thing.

00:50.120 --> 00:51.080
Now let me show you.

00:51.120 --> 00:53.760
We have two ways right now.

00:57.200 --> 01:02.120
Let me just copy paste this thing and put that over here.

01:02.680 --> 01:03.200
Okay.

01:04.280 --> 01:06.360
And I will put the message.

01:06.480 --> 01:07.840
And we need to multiply.

01:07.840 --> 01:12.120
And we also need to convert to radio.

01:12.560 --> 01:15.120
And we will create a gateway.

01:17.600 --> 01:22.960
Will handle public message.

01:23.280 --> 01:23.760
Right.

01:27.560 --> 01:35.480
In order to update the message what we need let's say right here we only need the.

01:38.080 --> 01:39.840
Radio message right here.

01:39.840 --> 01:41.280
Let's remove the composition.

01:41.960 --> 01:44.080
We don't need that also.

01:44.120 --> 01:44.880
Oh sorry.

01:45.080 --> 01:52.760
But actually we are we still need the composition because we need to update the message inside the conversation.

01:52.800 --> 01:53.240
Right.

01:53.760 --> 02:00.360
So for that reason in this case we will add the real time stuff over here.

02:01.280 --> 02:02.210
Let me show you.

02:03.610 --> 02:03.890
Mm.

02:04.970 --> 02:14.850
After we saved us, we will find the message and add the real time.

02:16.970 --> 02:17.650
Over here.

02:18.490 --> 02:23.970
Relay channel of that message.

02:24.170 --> 02:24.690
Right.

02:24.970 --> 02:28.650
And right here, we need to emit the event.

02:31.170 --> 02:32.650
We will update message.

02:37.010 --> 02:37.890
What is here?

02:37.890 --> 02:39.970
We need to move the conversation away.

02:40.010 --> 02:43.410
Well the conversation are they come from the message.

02:43.410 --> 02:43.890
Right.

02:44.850 --> 02:46.130
Not convert.

02:46.770 --> 02:47.770
Session dot.

02:51.130 --> 02:54.250
10.23.

02:56.050 --> 02:56.490
Okay.

02:56.490 --> 03:00.570
That's about how we can handle the update message.

03:01.330 --> 03:01.850
Okay.

03:04.690 --> 03:06.770
And this is the first one.

03:07.250 --> 03:09.210
So let me show you the second one.

03:10.010 --> 03:10.370
Okay.

03:10.370 --> 03:11.690
Let me explain it for you.

03:12.410 --> 03:14.610
Let me run the code and explain for you.

03:14.650 --> 03:19.530
Now you can see right here we only update the test and media files.

03:19.570 --> 03:25.570
Okay, so for that reason, we actually can send the message like that.

03:26.010 --> 03:28.730
Let me show you this dot.

03:31.570 --> 03:35.970
Versus y dot handle update message.

03:36.010 --> 03:38.890
Maybe I will create the handle of that message.

03:40.090 --> 03:43.650
Version two okay.

03:44.610 --> 03:51.450
And right here we need to put some data over here.

03:52.330 --> 03:55.930
Now you can say right here we need the data.

03:56.930 --> 04:01.970
Maybe I will send with the object like ID okay.

04:02.340 --> 04:04.940
Firstly, we read a message a day, right?

04:06.500 --> 04:14.260
We read the message.id and you can see right here we need to convert.

04:14.300 --> 04:22.020
Session ID will be message dot.

04:24.060 --> 04:26.340
Session dot underscore array over here.

04:27.420 --> 04:39.740
And maybe we need a test because we update the test right first right here we will message dot test.

04:43.300 --> 04:44.460
And modify.

04:52.020 --> 04:53.700
This y okay.

04:54.300 --> 04:56.500
And right here is an update message.

04:57.020 --> 05:01.420
So we only need the data okay.

05:01.580 --> 05:07.980
And right here we still need to conversation when we come from the data dot convert session.

05:08.220 --> 05:11.100
And let me change my name right now.

05:14.300 --> 05:19.340
And right here we need to put the update message okay.

05:19.380 --> 05:22.420
Maybe version two or something like that.

05:22.420 --> 05:27.500
And with the data over here and okay you know the error.

05:28.140 --> 05:30.620
Let me show you why it's work.

05:31.180 --> 05:40.740
Now you can remember right here we we send exactly the new object.

05:43.420 --> 05:44.500
Let me show you what I mean.

05:44.580 --> 05:45.180
Right here.

05:46.660 --> 05:48.940
We actually send the entire object.

05:48.940 --> 05:56.980
If we use this way right into the front end and the front end, it will somehow update the spec.

05:57.180 --> 05:57.660
Okay.

05:58.260 --> 05:59.620
With the new information.

05:59.620 --> 06:07.830
Well, here, what you can do in this is, uh, we will need to see everything.

06:08.270 --> 06:08.750
The reason?

06:08.750 --> 06:14.310
Because in order to update, we only need to update the test and modify.

06:14.310 --> 06:18.190
And we need the some code, some ID and conversation.

06:19.070 --> 06:27.630
So the conversation right here will be required because in order to update we need to know which the

06:27.630 --> 06:32.030
conversation to join into the room right now.

06:32.950 --> 06:35.830
Let me show you how it works okay.

06:36.550 --> 06:37.110
With this?

06:37.110 --> 06:37.590
Why?

06:38.390 --> 06:39.150
Let me show you.

06:39.190 --> 06:42.710
For example, it lights up inside the react application.

06:42.950 --> 06:45.030
We have a state, right?

06:45.430 --> 06:50.550
Possible icons and set messages over here.

06:50.950 --> 06:53.870
We will use that with the right.

06:54.710 --> 06:56.470
And what is that?

06:56.470 --> 06:58.470
State the message right here.

06:58.470 --> 07:01.390
It will contain the array like this.

07:01.390 --> 07:01.710
Right.

07:01.750 --> 07:05.270
It will contain an array of the object right here.

07:05.550 --> 07:06.070
Right.

07:06.390 --> 07:06.870
Let me try.

07:11.110 --> 07:13.110
And add in a reboot over here.

07:13.630 --> 07:13.870
Okay.

07:13.910 --> 07:18.270
For example, we have a stack like that.

07:18.590 --> 07:19.110
Okay.

07:20.670 --> 07:26.990
And in order to update the stack of the front end, what we need to do.

07:27.190 --> 07:27.710
Okay.

07:28.070 --> 07:30.230
Right here we need to find the message.

07:30.550 --> 07:31.110
Okay.

07:31.470 --> 07:32.910
This is just the front end okay.

07:32.950 --> 07:34.190
You don't need to write copy.

07:34.670 --> 07:38.830
For example, like file message will be for message right here.

07:39.350 --> 07:40.110
Not file.

07:40.270 --> 07:40.670
Okay.

07:40.710 --> 07:44.550
We will find the message with the underscore ID.

07:46.670 --> 07:51.510
Equal with the ID from the data of the socket okay.

07:51.870 --> 07:56.750
For example eye socket data underscore over here.

07:57.110 --> 07:57.590
Okay.

07:57.870 --> 08:05.480
If it match what we need to do, we just need to update the file message right here with the best will

08:05.480 --> 08:07.160
be the new test write.

08:09.600 --> 08:15.560
Test and file versus media file.

08:16.160 --> 08:19.120
Data dot media file.

08:19.160 --> 08:19.480
Okay.

08:19.520 --> 08:21.120
We just need to do something like that.

08:21.160 --> 08:32.480
And we will set the new style with the possible I o versus and file message.

08:32.480 --> 08:34.280
Or we can replay it here.

08:34.600 --> 08:38.200
But you got the idea right okay.

08:38.560 --> 08:43.720
With this approach you should handle the front end a little bit okay.

08:47.040 --> 08:53.040
And with this why we need to query into the database again.

08:53.040 --> 09:00.280
But you don't need to uh, to uh write it in the front end.

09:00.320 --> 09:02.040
So how about your solution?

09:02.760 --> 09:03.320
Okay.

09:03.400 --> 09:04.920
with my with my.

09:04.960 --> 09:07.280
I prefer using this solution.

09:07.600 --> 09:08.120
Okay.

09:08.520 --> 09:15.280
I prefer using this solution because I on one hand on some lose it in the front end.

09:15.440 --> 09:18.960
Okay, so I will comment this one for you.

09:19.440 --> 09:19.840
Okay.

09:19.880 --> 09:21.720
You still need to know.

09:21.760 --> 09:25.160
Whereas with me I prefer using this way.

09:25.560 --> 09:27.400
I want it will.

09:30.760 --> 09:39.160
It will send entirely respond message and I want it to update with new information inside the startup

09:39.200 --> 09:39.840
react.

09:40.120 --> 09:42.640
Okay, so you got the idea right.

09:43.120 --> 09:44.240
Let's test that.

09:49.720 --> 09:50.200
Message.

09:51.720 --> 09:52.800
We will update.

09:52.840 --> 09:53.360
Right.

09:54.440 --> 09:55.080
Let me.

09:57.560 --> 10:00.200
Go to the react on message.

10:02.120 --> 10:04.090
I got the idea over here.

10:08.330 --> 10:08.850
Okay.

10:09.770 --> 10:17.850
Collect all of that message and both the ID and half of that also.

10:18.290 --> 10:22.650
And I will check the console log from the gateway over here.

10:23.810 --> 10:24.330
Right.

10:28.490 --> 10:31.730
Now you can see what we have.

10:33.370 --> 10:34.770
We have media files.

10:34.810 --> 10:35.330
Okay.

10:35.730 --> 10:38.530
We have some sender information.

10:38.970 --> 10:45.970
And since my information's over here, it means we already correctly.

10:46.330 --> 10:46.850
Okay.

10:47.290 --> 10:52.530
Let me go last and I will keep the here for you.

10:52.730 --> 10:53.250
Okay.

10:53.490 --> 10:56.330
If you prefer this way, feel free to do that.

10:57.450 --> 10:57.930
Okay.

10:58.610 --> 11:01.050
So that's for the video.

11:01.290 --> 11:03.370
And I will see you in the next one.