WEBVTT 1 00:00.840 --> 00:02.320 Hi everyone. 2 00:02.320 --> 00:13.480 In previous video we already understand how to send and receive the data in Socket.io, right? 3 00:14.320 --> 00:19.680 In this video let's build the chat application. 4 00:19.960 --> 00:20.480 Okay. 5 00:23.440 --> 00:26.600 Right here, let me remove everything. 6 00:29.080 --> 00:29.640 Okay. 7 00:31.360 --> 00:34.560 And inside the script I will remove also. 8 00:40.560 --> 00:50.640 When I click into the button I will create the send message function okay. 9 01:03.380 --> 01:04.820 Inside the send function. 10 01:04.820 --> 01:11.180 Firstly, we need to query the some stuff over here. 11 01:49.180 --> 01:51.340 In here I will use the socket. 12 01:51.380 --> 01:53.980 I will emit the event okay. 13 01:53.980 --> 01:58.140 When I click into the button I will emit. 14 01:58.140 --> 02:04.870 The event will send message is okay. 15 02:05.750 --> 02:10.070 And in here I will send with the object. 16 02:12.190 --> 02:19.030 Firstly the username will be user element dot value. 17 02:21.870 --> 02:29.110 And message will be text element dot value also. 18 02:31.030 --> 02:37.310 And inside the server we will listen on that event inside here right. 19 02:42.670 --> 02:44.630 I will listen on the socket. 20 02:46.270 --> 02:52.070 Because I only listening on particular connection. 21 02:55.750 --> 02:57.110 I will send the message. 22 02:57.110 --> 02:58.830 I will listen on the event. 23 02:58.870 --> 02:59.950 Then message over here. 24 03:02.150 --> 03:02.670 And. 25 03:06.330 --> 03:09.890 In here, we will have a message callback. 26 03:10.530 --> 03:12.050 And let me console.log. 27 03:16.210 --> 03:22.090 I will click send and let check here. 28 03:24.010 --> 03:26.530 We doesn't have anything. 29 03:27.250 --> 03:28.610 Let me see why. 30 03:29.050 --> 03:30.210 Let me refresh. 31 03:34.770 --> 03:35.610 Over here. 32 03:35.610 --> 03:39.810 We already got the data. 33 03:41.130 --> 03:46.530 After we have a message, I will use destructuring that 34 03:48.170 --> 03:51.850 Or actually, I will not. 35 03:53.250 --> 03:53.890 Right now. 36 03:54.610 --> 03:57.530 I will send back the 37 03:59.650 --> 04:04.050 Message into particular client 38 04:05.130 --> 04:05.650 Okay. 39 04:06.100 --> 04:08.140 And now I will show you the bad way. 40 04:08.900 --> 04:09.180 Okay. 41 04:09.220 --> 04:10.060 The bad way. 42 04:10.060 --> 04:10.740 We will use 43 04:10.740 --> 04:11.780 The socket right here. 44 04:12.140 --> 04:17.540 And we will emit the event to send back to the client. 45 04:17.900 --> 04:18.900 Maybe you can. 46 04:19.860 --> 04:22.740 You can use exactly the same emit right here. 47 04:22.780 --> 04:23.140 Okay. 48 04:23.140 --> 04:30.620 It's totally different because this event on the server and this is the event on the client, you can 49 04:30.660 --> 04:34.420 send with the same event name. 50 04:34.460 --> 04:36.260 It's totally okay in this case. 51 04:36.660 --> 04:40.740 And I will send back entirely message over here. 52 04:41.820 --> 04:42.380 Right. 53 04:45.540 --> 04:52.380 After we already send the data into the client we will listening on that. 54 04:59.300 --> 05:02.020 I will console.log a message from the client. 55 05:06.220 --> 05:07.020 I will send. 56 05:07.020 --> 05:07.280 Now 57 05:07.280 --> 05:09.560 You can see we already got the message. 58 05:10.160 --> 05:10.720 Okay. 59 05:11.040 --> 05:17.840 And right now, what we will do, we will apeend into the chat box. 60 05:18.040 --> 05:18.480 Right. 61 05:31.280 --> 05:39.480 Right here I will append that, chat box element dot append ,before append that 62 05:39.520 --> 05:43.560 We need to create the p element. 63 06:12.810 --> 06:14.050 And append that over here. 64 06:20.330 --> 06:30.730 Right now you can see when I click here and I send, now you can see it already have, let me open another 65 06:30.730 --> 06:38.330 client and send, now you can see right here in another client we don't have any message. 66 06:38.610 --> 06:39.130 Why? 67 06:39.690 --> 06:49.050 Because in the server we use bad way, we directly send event for particular socket. 68 06:50.610 --> 06:55.810 It means we only send back into that socket connection over here. 69 06:56.690 --> 06:57.250 Okay. 70 06:57.410 --> 07:03.290 We not send the data into that socket right here. 71 07:03.690 --> 07:04.170 Right. 72 07:04.690 --> 07:16.510 So for that reason, in order to send back for all sockets has connect to the server. 73 07:16.710 --> 07:20.550 We need to directly manipulate the io over here. 74 07:21.230 --> 07:27.830 Okay, we will send back that into the io, this is a the good way. 75 07:27.870 --> 07:30.510 Okay, let me show you how it works. 76 07:30.870 --> 07:31.910 I will refresh. 77 07:34.470 --> 07:41.470 I will send a message and now you can see in the another client we already got the new message. 78 07:43.350 --> 07:43.910 Okay. 79 07:50.750 --> 07:55.110 I will send, now you can see, it's already work. 80 07:57.390 --> 07:58.150 And. 81 08:00.430 --> 08:06.550 Make sure right here we can use a text. 82 08:07.270 --> 08:11.200 Value will be empty for reset 83 08:15.920 --> 08:17.960 Okay, it's already work. 84 08:18.760 --> 08:24.920 That's it, that's how we can build a chat application using the Socket.io. 85 08:25.280 --> 08:30.640 And you can see with this way we don't need the if else block. 86 08:30.720 --> 08:31.440 Instead of. 87 08:31.480 --> 08:34.600 We will use the event based API, right? 88 08:35.040 --> 08:39.800 We will register the event and many that 89 08:40.080 --> 08:44.640 And make sure you understand what different between the socket and IO. 90 08:45.280 --> 08:46.720 Let me summarize, the socket. 91 08:46.760 --> 08:53.080 is just the one single socket for a particular connection. 92 08:54.600 --> 09:02.560 And io right here is for all the sockets has connect to the. 93 09:05.280 --> 09:05.960 Server. 94 09:06.080 --> 09:09.600 Okay that's it. I hope you understand this video. 95 09:09.960 --> 09:11.640 I will see you in the next one.