WEBVTT 00:01.950 --> 00:06.600 So we have the back end set up and we have our WebSocket set up, and now it's time to write some JavaScript 00:06.600 --> 00:07.430 on the front end. 00:07.650 --> 00:12.930 So of course, we're going to do that in based language HTML because I want this to be available on 00:12.930 --> 00:14.270 every page of the site. 00:14.790 --> 00:20.070 So down here at the bottom of the script section, what I'll do is I'll put some logic in here that 00:20.070 --> 00:25.950 allows us to connect to Web sockets, but only if you're logged in, because if you're not logged in, 00:25.950 --> 00:26.760 I really don't care. 00:27.420 --> 00:28.660 So we can do that pretty easily. 00:28.710 --> 00:31.910 We can use the same logic we did to display different menu items. 00:31.950 --> 00:41.430 So we'll take advantage of the if in our go templates, if equals is authenticated one and then we'll 00:41.430 --> 00:42.420 put an end here. 00:44.650 --> 00:50.830 And in between, we'll simply put a document out of that listener for Don Content Loaded, so document 00:51.610 --> 00:52.560 that event listener. 00:56.020 --> 01:02.890 The condition is dom content loaded and we'll execute this function 01:07.870 --> 01:08.840 and close that off. 01:09.820 --> 01:13.610 So the first thing we need to do is to create a variable called Sokka. 01:13.870 --> 01:16.450 I'll say let socket equal. 01:17.760 --> 01:25.470 And we're going to call New WebSocket, which is built right into JavaScript, and the URL I want to 01:25.470 --> 01:33.060 connect to is not HTP or HDB in our case, because we're in development and not using SSL certificates. 01:33.570 --> 01:34.300 US Collins. 01:35.430 --> 01:37.720 Now, if you're in production, it will be S. 01:37.800 --> 01:42.390 S, because presumably if you're in production, you're running with an SSL certificate, but we're 01:42.390 --> 01:42.710 not. 01:42.720 --> 01:44.610 So we'll just hard code what we need in here. 01:44.880 --> 01:52.590 And I'm just going to go to localhost Colen Port four thousand in my case, W.S., which is RWC endpoint 01:53.010 --> 01:55.050 and I need to get those slashes in the right spot. 01:55.060 --> 01:56.010 So let's fix that. 01:59.020 --> 02:03.490 Now, there's an optional second parameter for this, but we don't need it right now, so that will 02:03.490 --> 02:05.020 give us a socket variable. 02:05.800 --> 02:09.460 Now, let's just put a little listener in here socket on open. 02:09.880 --> 02:16.780 So when the connection is opened, we want to do something it's equal to and I'll use the S6 syntax. 02:19.360 --> 02:24.610 And all I'll do here is just say console, dot log 02:27.730 --> 02:31.330 successfully connected to WebSocket. 02:33.560 --> 02:36.430 OK, so that's all I'm going to do right now. 02:36.640 --> 02:41.260 Let's just make sure this actually works and then we'll look at the kinds of things we want to do to 02:41.260 --> 02:42.600 actually lobby group. 02:43.000 --> 02:45.700 So we'll save this and I'll run my application. 02:45.850 --> 02:46.390 We start. 02:51.390 --> 02:56.990 And there it is, so let's go back to our Web browser and reload this and see if I'm still logged in, 02:57.000 --> 02:57.540 I'm not. 02:57.690 --> 03:01.140 So let me log in admin at example 03:05.850 --> 03:13.680 with a password password and I'll open the JavaScript console just so we can see anything that's printed 03:13.680 --> 03:13.830 out. 03:13.830 --> 03:17.120 And hopefully once I log in, I'll connect to my end point. 03:19.560 --> 03:25.020 And there it is successfully connected to WebSocket, so we've connected properly now, obviously, 03:25.020 --> 03:26.900 just making a connection isn't enough. 03:26.910 --> 03:27.820 We need to do more. 03:27.840 --> 03:33.770 So let's go back to our terminal here or to our console or to our idy got there eventually. 03:34.950 --> 03:38.790 There are certain things you could always have available to you when you're connected to WebSocket. 03:38.910 --> 03:48.960 One is socket dot unclosed and we can pass that an event like this and then do something. 03:49.020 --> 03:51.830 So after the socket closes, you can do whatever you want. 03:51.870 --> 03:54.730 I'm not going to do anything, but that's something that's available to you. 03:55.200 --> 04:03.270 Another one socket not on error equals and we'll call this one error and pass that to whatever you want 04:03.270 --> 04:05.270 to do here inside these curly brackets. 04:05.490 --> 04:06.810 And again, I'm ignoring that one. 04:08.190 --> 04:13.700 But this one socket on message, that's when you have something pass to you from the server. 04:13.890 --> 04:14.940 So I call the variable. 04:14.940 --> 04:19.590 I'm going to pass to the function message and I'm actually going to do something here. 04:19.800 --> 04:27.120 And what I'm going to do is, first of all, say, let the data equal Jason pass because we're getting 04:27.120 --> 04:35.040 our message as Jason message data and anything you get from WebSocket will be wrapped in data. 04:35.310 --> 04:36.510 So we need to go. 04:36.510 --> 04:40.210 Jason Persse, message dot data or you're not going to get anything correct. 04:41.250 --> 04:49.800 So now we'll switch on whatever their spell, switch right on, whatever data action. 04:50.180 --> 04:56.340 And if you recall, that's one of the things I specified in my Jason payload that I'm sending from WebSocket 04:56.340 --> 04:59.840 is I have a member called Action and and Jason, it's called lowercase action. 05:01.080 --> 05:08.280 So the first situation will be case Loga and that's the only one we're listening for. 05:09.780 --> 05:14.520 So here I want to do something if I'm inside or if I get the action log out. 05:14.760 --> 05:17.100 But I only want to do it if it's the current user. 05:17.340 --> 05:24.900 If data user ID equals exactly whatever my user it is. 05:24.900 --> 05:30.690 And if you recall, I have that past now as part of the template data so I can do that and close the 05:30.690 --> 05:33.250 parentheses at this point. 05:33.870 --> 05:42.150 I would love the user out and break and logging the user out is as simple as calling log the function 05:42.150 --> 05:48.150 that we have defined right down here, logout, which will remove the token, remove the expiry and 05:48.150 --> 05:49.200 log the user out. 05:49.350 --> 05:51.990 OK, and we'll break at that point. 05:52.000 --> 05:56.290 And just to make things clear, I'll put a default in here which does nothing. 05:56.820 --> 06:03.090 Now, obviously, you can put as many cases as you want in here and do perform different actions based 06:03.090 --> 06:06.660 upon what the value of action is in data action. 06:07.170 --> 06:08.790 But in our case, we only want one. 06:09.330 --> 06:11.400 So this should actually work. 06:11.400 --> 06:18.750 But of course, now we need to broadcast that message indicating that user ID, whatever it might be, 06:19.110 --> 06:20.370 should be logged out. 06:20.520 --> 06:22.560 And we'll take care of that in the next lesson.