WEBVTT

1
00:00.520 --> 00:01.880
Hi everyone.

2
00:02.160 --> 00:04.800
Let's continue with the room.

3
00:05.760 --> 00:06.240
Okay.

4
00:06.840 --> 00:21.560
So what we will do next right here, after we join room successfully, we want to send a message into particular

5
00:21.560 --> 00:22.000
room.

6
00:22.840 --> 00:25.960
And of course in another client.

7
00:26.680 --> 00:32.040
If we're not there, we will not see this message okay.

8
00:32.560 --> 00:34.640
We will build that application.

9
00:35.640 --> 00:39.200
Let me show you how we can build that.

10
00:39.840 --> 00:42.480
Firstly, let's think about that a little bit.

11
00:43.360 --> 00:46.600
The input right here will be for send message.

12
00:46.600 --> 00:47.080
Right.

13
00:47.120 --> 00:52.320
It means right now we should somehow modify the code inside the send message.

14
00:55.800 --> 01:00.160
So we see over here right now I will check.

15
01:02.720 --> 01:03.280
Check

16
01:05.360 --> 01:09.540
We join room or not okay.

17
01:09.700 --> 01:17.660
We need to check that, in order to check whether or not we can based on this.

18
01:17.700 --> 01:19.220
h2 over here.

19
01:19.940 --> 01:20.300
Okay.

20
01:20.340 --> 01:29.180
If it's empty, we will send the message into the global chat application.

21
01:29.460 --> 01:36.260
But if it have a room, we will send that into a particular room.

22
01:37.860 --> 01:41.020
Let me show you how we can do that right here.

23
01:41.420 --> 01:49.580
We will check if the room element dot text content if it have any value.

24
01:50.740 --> 01:54.860
We need to send the message okay.

25
01:54.900 --> 01:58.660
If and if not we will send inside the global message.

26
02:02.180 --> 02:02.700
Okay.

27
02:03.380 --> 02:05.380
And this here will be for room.

28
02:06.220 --> 02:14.710
Well in order to send room I will create another emit event will be send private message.

29
02:15.430 --> 02:16.430
Okay I will.

30
02:18.470 --> 02:21.390
Actually send room message.

31
02:21.390 --> 02:21.910
Right.

32
02:24.590 --> 02:30.470
And, we will put the object similar.

33
02:34.630 --> 02:39.350
Username and message also inside the server.js.

34
02:39.390 --> 02:43.270
Right here I will listening.

35
02:45.310 --> 02:47.870
Send message.

36
02:50.150 --> 02:52.110
Send message.

37
02:53.550 --> 02:55.950
And right here we have a message also.

38
03:00.790 --> 03:01.310
Right here.

39
03:01.350 --> 03:11.990
In order to send a message to all client connect into the particular room we will use io.to

40
03:13.150 --> 03:21.370
And right here inside the "to" we will specify the room name will be the, actually right here,

41
03:21.890 --> 03:24.250
we should put one more thing will be room

42
03:26.530 --> 03:29.250
Room element dot text content

43
03:32.130 --> 03:40.050
And inside the server right here, inside the message, we will have a room name.

44
03:40.090 --> 03:40.610
Right.

45
03:41.890 --> 03:47.330
Let's see actually only the room

46
03:47.330 --> 03:52.210
We will send the message into all connections.

47
03:52.410 --> 03:59.050
Connect into particular room and we will emit as usual

48
03:59.050 --> 04:02.770
We can change the event like that way

49
04:05.610 --> 04:06.130
Okay.

50
04:06.610 --> 04:13.090
And right here I will send back the same event for the client.

51
04:17.730 --> 04:22.910
will be the message also, similar like that okay.

52
04:24.110 --> 04:25.910
Only this thing will be different.

53
04:26.990 --> 04:31.710
And inside the Script.js we will listening also.

54
04:35.190 --> 04:43.510
Send room message and create element, put directly over here.

55
04:44.070 --> 04:44.990
So let's see.

56
04:47.910 --> 04:58.550
I will refresh and maybe I don't need this thing, I think I will remove the event broadcast event over here.

57
04:59.150 --> 04:59.550
Okay.

58
05:02.070 --> 05:03.230
Let me remove that.

59
05:10.230 --> 05:10.870
New user.

60
05:11.710 --> 05:12.470
New user.

61
05:13.590 --> 05:17.230
And let's see I will refresh, firstly.

62
05:17.470 --> 05:20.590
I will join a room with friends.

63
05:24.190 --> 05:24.870
Right now.

64
05:27.440 --> 05:35.440
I will say hi and send, now you can see in here we don't have any event.

65
05:35.920 --> 05:39.800
But when we join a room, we join a room.

66
05:40.280 --> 05:43.600
And right here I will send another thing.

67
05:45.360 --> 05:46.720
Now you will see right here.

68
05:46.720 --> 05:49.160
We already got the new message.

69
05:49.320 --> 05:50.320
Very very cool.

70
05:50.360 --> 05:50.760
Right.

71
05:51.560 --> 05:54.280
And of course, right now we can send back the event.

72
06:01.360 --> 06:01.800
Now.

73
06:02.320 --> 06:03.200
Very cool.

74
06:03.240 --> 06:03.640
Right.

75
06:04.120 --> 06:07.520
It's already work as we expected.

76
06:08.000 --> 06:10.920
And right here we have a lot of duplication.

77
06:12.440 --> 06:12.960
Okay.

78
06:13.240 --> 06:19.800
You can create a separate function to reduce duplicates also.

79
06:23.760 --> 06:24.280
Okay.

80
06:24.400 --> 06:28.160
So I think that will be enough for the video.

81
06:29.880 --> 06:31.680
I will see you in the next one.