Creating a Websocket Connection

[00:00:00]
>> You're like, great, does it work now? No, cuz we created it on nginx. We created the server itself to handle the WebSocket. But the client, the people actually using our web page, don't know anything about this, cuz we didn't send them any data. So we need to create a WebSocket connection in the index.html page that allows it to deal with our WebSocket connection.

[00:00:21]
And this one is pretty, I won't say straightforward, but it's not as complex, and we'll walk through it right now. So in index.html, I actually do need to write it proper HTML right here, because I need to write a script tag. It's html, you don't have to get fancy.

[00:00:38]
You can give it a head. You don't have to use it, give it a body. But really all we need is the script tag. So what I want to do is, all we have to do is, we've set the protocol for the WebSocket connection. There's a difference between a WebSocket connection over HTTP versus HTTPS.

[00:01:11]
So we want it to work on both. And then all we have to do is say, where's the WebSocket connecting to? That's actually it. And then we'll add a bonus we want to respond to our messages, as in the console log everything, otherwise that data just gets dropped.

[00:01:25]
That sounds complicated? It's not too bad. So we'll say let ws, And let's say const proto, cuz we want to choose the protocol we're connecting to at this point. And we can pull the protocol from the window.location objects, Which has the protocol. It'll tell us if it's HTTPS or HTTP.

[00:01:54]
And we'll say if it's https, We wanna say WebSocket Secure, WSS, that's the actual name for it Sorry, that's wss, is the protocol. Otherwise it's just a regular Websocket connection over HTTP. And that's how we should choose a protocol for WebSocket, and it'll work on either port 80 or port 443.

[00:02:20]
All right, next, we need to create the WebSocket, which is a built-in object in the window, in the dom. So we'll say ws, that thing we created earlier, we'll say new WebSocket. Pretty cool, it's already built in. Next, we wanna give it the protocol and where to connect to.

[00:02:38]
So we're just gonna use the proto object we created earlier. Proto, it's just a string telling us how to connect,:// And because we're not doing anything fancy, we're just connecting to the WebSocket at the route. We're gonna say window, .location. And our host, which is just gonna give us our domain name back And close it all up.

[00:03:22]
And the very last thing we need to do is we just need to get our WebSocket to respond to any messages we get from the server. Other than that, we can send messages all day. How is the client ever gonna know about it? And this isn't necessarily, it doesn't have to be a step.

[00:03:38]
So what's something we can do with WebSocket? We could, say, trigger an action on the page, like a page update or page render or something like that. In that case, the client doesn't really need to know, the WebSocket is just controlling that connection. But for this really simple example, we just wanna log out any messages that come from the server, just to let us know that our connection is working.

[00:03:57]
So we do that by saying onmessage, And it's gonna take an event. Don't need a parentheses, but stickler. And we're just gonna say console.log the event.data.
>> Should onmessage be camelcase?
>> No, that's just a shorthand. You can also say ws.onfunction message. The onmessage is just a shorthand for doing that.

[00:04:40]
Okay, now the moment of truth where we see where Jem made a mistake in his coding somewhere. So let's go ahead and fire up our server. Hopefully, it won't complain about anything. All right, no complaints so far, but we didn't actually use any WebSockets, so we won't know if it works until we try it out.

[00:04:57]
Let's give it a shot. I'm gonna open my console. Hey, worked the first time, that almost never happens. So congratulations to everybody if you got it the first time. If not, you're in good company, it took me a while to get this down path to make it work the first time.

[00:05:16]
We see it's messaging, hey, our current servers, because we told the client to broadcast that. We message that, welcome to my server. But now, what if we try something like this? We see there are now two visitors, cool, pretty cool. And that's the power of a WebSocket, is, one, it's all real-time.

[00:05:43]
We don't have to force refresh or force an HTTP update or push it to the client. It's all happening real time. You can control the entire client via the server, which is a really powerful idea. We're just touching on it here. But you see, the WebSockets aren't too hard once you understand it needs a protocol, it needs to know what to happen when it opens and closes, things like that.

[00:06:05]
Beyond that, it's on you, you can build anything you want now. Yeah, Brian Holt has a course on real time. I've used socket.io. It's really powerful, but it's probably a little more complex we need for this. But if you're building real, real WebSockets, it's a really great library, that's usually my go-to.

[00:06:22]
So the last thing we need to do is we need to push this, so the server can pull it down, and we need to see if this actually works on our domain. So we need to tie it all together. And this is where it gets interesting. If we made any mistakes along the way, it won't work.

[00:06:36]
Let's see, you never know, you never know if I left a semicolon out somewhere. So we'll jump back to VS Code. I'm gonna start my server, Ctrl+C, clear. Just do a git status so I can see what I'm adding. So I don't wanna add my node modules. So what I'm going to do is I'm gonna create a new file.

[00:07:00]
I'm gonna create a new gitignore file. And you don't have to do this. You're welcome to add your node modules. I'm just a stickler. And we're gonna say node modules. We're gonna ignore that. And I probably don't need to commit my package lock either. It's not super necessary.

[00:07:24]
Actually, I'll leave that in there. I don't know what the server's gonna do. So I'm just gonna say git add., I know people, if I post this on Twitter, people will get upset I do git add., but I know what I'm doing. So gitadd., is the lazy way of adding all the files we just modified.

[00:07:40]
And then we're just gonna commit it, git commit-am if we're adding all those files we just added. And then the m is the message, so Created a WebSocket server. And clients. And then we're gonna just push it up. And remember, we have that cron job running, so it should automatically pull in these changes within a minute or two.

[00:08:25]
So I'm gonna jump back to my server. I'm gonna ls, and I'll wait, rm foo. And there we go. It pulled in automatically, so our script is working just fine. We're not quite there yet, because remember, what's the server that's running? It's our simple server we wrote, not our node server.

[00:08:56]
So we're gonna say pm2. Remember the process manager? We're just gonna stop app.js, and it stopped, and we're just gonna start it back up with our new server, pm2 start. And we're gonna use the index.ws file. This time, I'm gonna say watch on it. That way if we make any changes to our code, to our server on our local and then it pulls into our server, pm2 will restart on watches, on changes to that And cuz pm2 is awesome, it's saying, hey this is something new, these things aren't gonna restart, we need to add it to the restart.

[00:09:38]
So we're gonna say pm2 save. There we go. So now our server should stay up and running and it'll restart on load. So now, the moment of truth, does this all work? Does this all hook together? Let's find out. So I'm going on my regular one here, Bad Gateway.

[00:10:05]
I did something wrong here, let's figure out what's going on. Check my console, nothing obvious. So what did I do that's incorrect? Let's check it out. So pm2 status. So there's an error in my index.ws, I wonder what that is? So let me try running it by hand.

[00:10:34]
I forgot to npm install after we did all that work. It's the little things that will get you, it's the little things. So if we wanted to, we can update our github.script to say pull and then npm i every time. Actually, let's go ahead and do that now, just so we don't run into this error again.

[00:10:58]
So I'm just gonna vi our github.script. So once it's done pulling, I'm just gonna npm i Then right-click. That way, from now on, it'll always stay in sync with package json. So now, address in use, something else using it. That's probably pm2 is still using it. So I'm gonna say pm2 status, yeah.

[00:11:34]
So the minute we modified our file or any of the file system itself, pm2 is like, hey, you're not erroring anymore. Let me bring it back online, because that's what it's supposed to do. So now let's check it out. Hey, it's working. And ignore the favicon, that's just browsers, they're gonna do that to you.

[00:11:58]
So did everybody get this far? What are the errors you run into? There's always the common errors. Remember, I've done this a few times, so I've made most of the mistakes. Any errors you all are running into?
>> Those extra logs are me hitting your server.
>> What's that?

[00:12:17]
>> The extra logs in there are me hitting your server.
>> Nice, I didn't even notice. Yes, if you go to jemstock.lol, we'll see more people on the server. Now, if we really wanna spend more time on WebSockets, we can make it so we can message each other.

[00:12:33]
So I type the message and it goes out to everybody, connect to the server. And then in that way, you just build a real time chat application in just a few lines of code. But we're not gonna go that deep today cuz I wanna spend a little bit more time on databases and docker, and then load balancers.

[00:12:48]
But hopefully, you all are this far. Did everything work?
>> So my console says there's six current visitors, and yours still says five, so I wonder why the difference.
>> I wonder why the difference. Mine says seven now.
>> If you refreshed, would it say eight?
>> It shouldn't.

[00:13:10]
>> Mine says seven as well.
>> Cuz it immediately drops that connection and re-adds it. Yours is at seven?
>> Yep.
>> All right, All right, look at you. That's incredible. You never probably would have thought this earlier that you could create a WebSocket connection, Update your nginx, and now you have a real time connection running through your very own domain name on a brand new server.

[00:13:34]
And you wrote it all by hand. So that's a very difficult accomplishment, so good job.