WEBVTT 00:01.530 --> 00:07.290 So it's time to actually log the user out, the one we just deleted over WebSocket and initially I was 00:07.290 --> 00:11.250 going to do this one way, but the more I thought about it, the more it made sense to take advantage 00:11.250 --> 00:17.580 of all the code we wrote here in WC handlers, because we already have all the logic in place to allow 00:17.580 --> 00:24.270 us to send a request for a WebSocket message from a page to to the server and then do something. 00:24.750 --> 00:30.410 So what I'm going to do, first of all, is add one thing to US payload and that's the user I.D. So 00:30.420 --> 00:32.310 let's just add user ID 00:35.850 --> 00:38.100 and it will be Aunt and Jason. 00:39.660 --> 00:43.740 We'll call that user underscore ID format that. 00:43.930 --> 00:45.780 OK, so that's the first thing I'm going to do. 00:46.680 --> 00:53.280 Now, when we go to delete a user, where do we want to send a WebSocket request to the server? 00:53.370 --> 00:56.580 Well, I think if we go back to our application, let me start it first. 00:57.240 --> 00:57.960 Mixter. 01:02.630 --> 01:08.750 And go back to our Web browser and I'll just reload this page and see if I'm logged in, I don't think 01:08.750 --> 01:09.200 I am. 01:10.450 --> 01:13.600 Plus, so in so that example, dot com 01:16.240 --> 01:21.570 password log in and let's see what we have for users right now. 01:21.580 --> 01:23.050 So we'll go to all users. 01:23.530 --> 01:24.460 They only have me. 01:24.460 --> 01:33.010 So I'm going to add another user and I'll call this person Jack Nimble Jack at nimble dot com password 01:33.010 --> 01:36.280 is password, and I'll save that user. 01:38.060 --> 01:44.990 Now, if I go look at this newly created user, when I click this delete button and I click delete user, 01:45.290 --> 01:50.510 as soon as I do that, I want to delete the user from the database and delete all the associated tokens, 01:50.510 --> 01:51.100 if any. 01:51.620 --> 01:56.500 And then I want to fire off that request that logs the user out of WebSocket. 01:56.900 --> 01:58.490 So that's a place to do it. 01:58.490 --> 02:01.160 So I'll leave cancel so we have this user to work with. 02:02.360 --> 02:10.370 And let's go back to Visual Studio Code and let's go to that page one user, which is one dash user 02:10.610 --> 02:15.200 page to go out and write down here. 02:15.200 --> 02:22.340 I'll comment at this location if I want to have access to the WebSocket right from here. 02:22.610 --> 02:26.180 I don't have access to the variable socket because back in base layout. 02:27.470 --> 02:32.160 It only exists within this document add event listener right here, I declare it there. 02:32.180 --> 02:35.000 So what I'll do is get rid of the statement here. 02:36.600 --> 02:43.890 And put the last statement outside of that, so let it now it's available to me anywhere I need to use 02:43.890 --> 02:44.070 it. 02:44.130 --> 02:49.710 OK, so back in one user page, Doug HTML, let's go down to the elz clause. 02:49.710 --> 02:54.880 So if data error, then I fire the error message, otherwise I'm going to redirect the user. 02:54.900 --> 03:01.040 So at this point I've already called all users delete deleted the user and I'm all set. 03:01.500 --> 03:04.640 When I was doing up until I commented I was just redirecting user. 03:04.650 --> 03:06.720 So let's do this instead. 03:06.720 --> 03:12.270 Let's uncommented because I still want to do it, but I'll just move it down a bit and get rid of those 03:12.270 --> 03:13.080 blank spaces. 03:14.010 --> 03:20.940 And here I'll create some data that I can send over WebSocket let and I'll just call it JSON data equal 03:21.630 --> 03:26.180 and it'll be a JavaScript object and I'll populate the things I'm looking for on the back end. 03:27.150 --> 03:28.700 So the action is the first thing. 03:28.710 --> 03:33.960 And if you recall, the only action we're paying attention to in our WebSocket handlers and functions 03:34.440 --> 03:42.120 is delete user with a capital you and I want to delete user underscore ID and I have that. 03:42.240 --> 03:44.430 It's just ID, but I need to convert it to an end. 03:44.430 --> 03:56.730 So person ID based temp and now that I have access to the socket variable I can type socket don't send. 03:59.070 --> 04:00.330 Jason Stringer. 04:03.460 --> 04:04.180 Jason did it, 04:07.240 --> 04:12.910 and that should, in theory, work, so I believe there's one more change we need to make and that's 04:12.910 --> 04:14.590 over in US handlers. 04:15.070 --> 04:18.100 So if we scroll down to listen to W.S. Channel. 04:20.410 --> 04:26.020 Here, when I get the case delete user, I actually need to send the user ID back along with it, which 04:26.020 --> 04:28.200 is why I put it in the payload that the client sends. 04:28.210 --> 04:29.380 So we'll say response. 04:29.740 --> 04:35.790 The user I.D. is equal to the user ID. 04:37.300 --> 04:39.670 OK, so let's stop our application. 04:40.600 --> 04:43.690 Make stop, make start. 04:48.870 --> 04:55.620 And let's give this a try, so go back to my Web browser, and first thing I'll do is go back to cancel 04:55.620 --> 04:55.940 here. 04:56.640 --> 05:04.280 I'll open a private window and go to localhost four thousand and log in as Jack Nimble. 05:05.850 --> 05:11.790 So Jack nimble dot com password and I'll log in. 05:13.700 --> 05:20.480 So Jack is now logged in and Jack is, for example, looking at all sales, and I'll just make this 05:20.480 --> 05:26.960 window narrow enough and it's on half the screen and make this window take up the other half of the 05:26.960 --> 05:27.470 screen. 05:29.990 --> 05:33.650 Now, this one, I'm logged in as Jack and this one I'm logged in as admin. 05:34.010 --> 05:40.240 So I click on Jack Nimble on all the admin users and I'll say delete and click, delete user. 05:40.250 --> 05:41.600 And if this works. 05:42.750 --> 05:44.040 Jack should be logged out. 05:45.540 --> 05:51.600 And Jack is long dead, and that happened very, very quickly, so there we now have the ability to 05:51.600 --> 05:56.190 add users, to edit users and to delete users in a very secure fashion. 05:56.730 --> 05:57.990 Let's move on to the next section.