So we have the back end set up and we have our WebSocket set up, and now it's time to write some JavaScript
on the front end.
So of course, we're going to do that in based language HTML because I want this to be available on
every page of the site.
So down here at the bottom of the script section, what I'll do is I'll put some logic in here that
allows us to connect to Web sockets, but only if you're logged in, because if you're not logged in,
I really don't care.
So we can do that pretty easily.
We can use the same logic we did to display different menu items.
So we'll take advantage of the if in our go templates, if equals is authenticated one and then we'll
put an end here.
And in between, we'll simply put a document out of that listener for Don Content Loaded, so document
that event listener.
The condition is dom content loaded and we'll execute this function
and close that off.
So the first thing we need to do is to create a variable called Sokka.
I'll say let socket equal.
And we're going to call New WebSocket, which is built right into JavaScript, and the URL I want to
connect to is not HTP or HDB in our case, because we're in development and not using SSL certificates.
US Collins.
Now, if you're in production, it will be S.
S, because presumably if you're in production, you're running with an SSL certificate, but we're
not.
So we'll just hard code what we need in here.
And I'm just going to go to localhost Colen Port four thousand in my case, W.S., which is RWC endpoint
and I need to get those slashes in the right spot.
So let's fix that.
Now, there's an optional second parameter for this, but we don't need it right now, so that will
give us a socket variable.
Now, let's just put a little listener in here socket on open.
So when the connection is opened, we want to do something it's equal to and I'll use the S6 syntax.
And all I'll do here is just say console, dot log
successfully connected to WebSocket.
OK, so that's all I'm going to do right now.
Let's just make sure this actually works and then we'll look at the kinds of things we want to do to
actually lobby group.
So we'll save this and I'll run my application.
We start.
And there it is, so let's go back to our Web browser and reload this and see if I'm still logged in,
I'm not.
So let me log in admin at example
with a password password and I'll open the JavaScript console just so we can see anything that's printed
out.
And hopefully once I log in, I'll connect to my end point.
And there it is successfully connected to WebSocket, so we've connected properly now, obviously,
just making a connection isn't enough.
We need to do more.
So let's go back to our terminal here or to our console or to our idy got there eventually.
There are certain things you could always have available to you when you're connected to WebSocket.
One is socket dot unclosed and we can pass that an event like this and then do something.
So after the socket closes, you can do whatever you want.
I'm not going to do anything, but that's something that's available to you.
Another one socket not on error equals and we'll call this one error and pass that to whatever you want
to do here inside these curly brackets.
And again, I'm ignoring that one.
But this one socket on message, that's when you have something pass to you from the server.
So I call the variable.
I'm going to pass to the function message and I'm actually going to do something here.
And what I'm going to do is, first of all, say, let the data equal Jason pass because we're getting
our message as Jason message data and anything you get from WebSocket will be wrapped in data.
So we need to go.
Jason Persse, message dot data or you're not going to get anything correct.
So now we'll switch on whatever their spell, switch right on, whatever data action.
And if you recall, that's one of the things I specified in my Jason payload that I'm sending from WebSocket
is I have a member called Action and and Jason, it's called lowercase action.
So the first situation will be case Loga and that's the only one we're listening for.
So here I want to do something if I'm inside or if I get the action log out.
But I only want to do it if it's the current user.
If data user ID equals exactly whatever my user it is.
And if you recall, I have that past now as part of the template data so I can do that and close the
parentheses at this point.
I would love the user out and break and logging the user out is as simple as calling log the function
that we have defined right down here, logout, which will remove the token, remove the expiry and
log the user out.
OK, and we'll break at that point.
And just to make things clear, I'll put a default in here which does nothing.
Now, obviously, you can put as many cases as you want in here and do perform different actions based
upon what the value of action is in data action.
But in our case, we only want one.
So this should actually work.
But of course, now we need to broadcast that message indicating that user ID, whatever it might be,
should be logged out.
And we'll take care of that in the next lesson.