WEBVTT

1
00:01.280 --> 00:02.760
How everyone.

2
00:03.120 --> 00:12.880
In this video I will show you how to create a room in Socket.io.

3
00:14.080 --> 00:20.560
Okay, in any chat application it also has a concept of rooms.

4
00:21.360 --> 00:22.960
Let me show you what it means.

5
00:22.960 --> 00:30.440
For example, inside a websockets server we have a mutiple client.

6
00:31.240 --> 00:31.800
Okay.

7
00:35.440 --> 00:41.240
We want to group this thing into the room and this thing will be another room.

8
00:41.920 --> 00:42.360
Okay.

9
00:42.400 --> 00:45.240
And we can chat within that room.

10
00:45.720 --> 00:46.200
Okay.

11
00:46.680 --> 00:52.800
Any other connection outside this room cannot see this chat okay.

12
00:52.840 --> 00:54.920
I want to build this application.

13
00:56.200 --> 00:58.720
So let's see how we can build that.

14
01:01.360 --> 01:03.800
Firstly in the UI.

15
01:03.840 --> 01:07.280
Right here I will create the one.

16
01:07.280 --> 01:09.440
More input will be room.

17
01:10.520 --> 01:11.240
Over here.

18
01:14.120 --> 01:24.680
I will go to the index.js and above the user I will create a div.

19
01:25.720 --> 01:29.120
And right here I will create input.

20
01:33.240 --> 01:38.440
I will create id will be room

21
01:42.240 --> 01:42.840
Okay.

22
01:43.880 --> 01:44.800
Maybe room

23
01:48.280 --> 01:48.760
Name.

24
01:55.880 --> 01:58.320
And placeholder.

25
01:58.640 --> 02:01.840
Enter Your room.

26
02:04.800 --> 02:05.280
That's it.

27
02:06.680 --> 02:11.200
We have enter your room and I will create one more button.

28
02:13.160 --> 02:15.800
We will join a room

29
02:17.760 --> 02:19.640
And the event.

30
02:19.680 --> 02:29.200
I will create a room over here inside the script.js.

31
02:29.440 --> 02:31.480
I will create another function.

32
02:34.560 --> 02:36.360
What we will do with this function.

33
02:36.360 --> 02:46.760
Firstly, when I type something and I click join room I want, it will emit the event into the server.

34
02:47.720 --> 02:48.240
Okay.

35
02:48.760 --> 02:54.960
And the server right here will be create the room for a particular connection.

36
02:55.960 --> 02:58.720
Let me show you what it means right here.

37
02:58.720 --> 03:00.680
I will use the socket.

38
03:00.920 --> 03:03.320
Emit and emit a new event.

39
03:03.360 --> 03:06.000
We may join room.

40
03:06.560 --> 03:08.280
Maybe join room request.

41
03:09.040 --> 03:09.520
Okay.

42
03:17.360 --> 03:20.080
With the name of room right here.

43
03:20.680 --> 03:27.600
I will create the constant with the room name element.

44
03:27.840 --> 03:28.320
Okay.

45
03:33.000 --> 03:33.720
Over here.

46
03:36.680 --> 03:39.680
And I will put directly value.

47
03:40.040 --> 03:40.560
Okay.

48
03:41.240 --> 03:44.560
We will emit the event to join a room.

49
03:45.640 --> 03:54.440
Let me copy the name inside the server in here I will create a socket.on.

50
03:56.600 --> 03:57.080
Request.

51
03:57.120 --> 04:01.160
We will listen in on that event for a particular socket.

52
04:01.560 --> 04:02.080
Okay.

53
04:03.520 --> 04:05.640
And right here we have a room name.

54
04:08.200 --> 04:09.600
In order to join the room.

55
04:10.320 --> 04:10.600
socket.join

56
04:13.560 --> 04:14.040
Okay.

57
04:17.600 --> 04:20.400
And room name.

58
04:21.200 --> 04:21.720
Okay.

59
04:22.320 --> 04:22.880
That is.

60
04:23.440 --> 04:29.240
And after we join the room successfully, we will emit the event to notify the user.

61
04:29.480 --> 04:30.640
Right here already.

62
04:31.200 --> 04:31.960
Connect.

63
04:38.120 --> 04:38.760
Room.

64
04:38.800 --> 04:39.600
Success.

65
04:40.560 --> 04:41.040
Okay.

66
04:41.800 --> 04:42.400
Right here.

67
04:42.400 --> 04:44.720
We will emit the event on particulars socket.

68
04:44.720 --> 04:45.200
Okay.

69
04:45.240 --> 04:47.800
Will not emit into the io

70
04:47.840 --> 04:48.240
Okay.

71
04:48.280 --> 04:54.800
Because only the client right here connect to the.

72
04:54.800 --> 04:55.960
Ah okay.

73
04:56.000 --> 04:57.400
We will not do similar.

74
04:57.440 --> 04:57.960
That

75
05:00.250 --> 05:01.570
And right here.

76
05:04.130 --> 05:10.690
We will put some argument, right in this case.

77
05:10.730 --> 05:11.890
Maybe I will put.

78
05:16.050 --> 05:17.650
You has been.

79
05:18.690 --> 05:19.410
Join a

80
05:20.210 --> 05:20.530
room

81
05:23.730 --> 05:24.130
Room name

82
05:25.450 --> 05:26.050
Okay.

83
05:26.930 --> 05:32.970
And inside the script over here, we will listen in on that.

84
05:52.370 --> 05:57.770
And right here I will create a element.

85
05:58.290 --> 06:03.970
Okay with the message over here and append that okay.

86
06:03.970 --> 06:07.370
Let's see right now, I will refresh the application.

87
06:07.850 --> 06:10.250
I will join, for example, like friend.

88
06:11.530 --> 06:12.730
Click on join a room.

89
06:12.770 --> 06:18.850
Now you can see, you have been joined room friend in the chat application.

90
06:18.890 --> 06:19.330
Right.

91
06:22.170 --> 06:23.130
And uh.

92
06:25.610 --> 06:27.250
In the chat application

93
06:27.290 --> 06:28.810
Maybe in here.

94
06:31.170 --> 06:34.530
In here I will create the the room.

95
06:36.250 --> 06:42.250
The room name, inside the index dot HTML below that.

96
06:42.850 --> 06:43.530
Chat app.

97
06:43.890 --> 06:45.570
I will create h2.

98
06:46.570 --> 06:47.090
Okay.

99
06:47.530 --> 06:49.530
And I will name it will be room.

100
06:51.530 --> 06:53.410
And inside the script.

101
07:01.410 --> 07:02.570
room over here.

102
07:05.690 --> 07:10.770
And when we join successfully, we will append that also.

103
07:15.170 --> 07:18.090
To we have a room right.

104
07:18.890 --> 07:20.050
I want the room name.

105
07:20.050 --> 07:26.370
So for that reason inside the server right here maybe I will put.

106
07:26.410 --> 07:30.290
Another thing will be directly room name okay.

107
07:31.010 --> 07:35.770
Because later I want to use the something like this.

108
07:39.690 --> 07:40.090
Room.

109
07:42.730 --> 07:44.930
Right here will be room element.

110
07:47.730 --> 07:48.650
Room element.

111
07:49.290 --> 07:49.930
Dot.

112
07:49.970 --> 07:56.250
Text content will be the room name.

113
07:56.530 --> 07:57.050
Okay.

114
07:58.610 --> 08:07.730
You already notice about that, because we can send many message if you want.

115
08:08.890 --> 08:19.010
Okay, so for this case, we will create another argument to hold the result from the server.

116
08:19.570 --> 08:20.170
Right.

117
08:21.010 --> 08:24.890
So that's it, refresh.

118
08:27.330 --> 08:31.850
Click now you can see we already have a friend chat app

119
08:32.690 --> 08:38.210
So and right here you already join to that room.

120
08:39.810 --> 08:48.170
And we need one more thing will be send the message into that room.

121
08:48.170 --> 08:48.650
Right.

122
08:49.850 --> 08:57.450
So I will see you in the next video to show you how we can send a message into this room.