Websockets Overview

[00:00:00]
>> So that was how to create a subdomain. That's how to do redirects in nginx. That was talking about gzip, how to adjust your compression, and what compression is, now we're gonna dive into it. Now, we're gonna start writing some code. Now we get to do probably what I consider one of the most fun things, which is WebSockets.

[00:00:15]
I think WebSockets are so much fun. WebSockets are real time communication. It's a persistent bidirectional connection between the client and the server. How is that different from HTTP?
>> HTTP is one way and it doesn't persist.
>> Yeah, it doesn't persist. So the minute the HTTP connection is done, it closes.

[00:00:40]
Whereas, WebSockets stay open, they persist. So you can enable real-time connection between the client and the server. So, for this exercise, we're going to update our nginx configuration, because it's gotta know it's a WebSocket connection or what to do with it. We need to create a new node.js server but this time we're gonna use Express to make things a little bit faster.

[00:01:01]
And then we're gonna enable WebSockets and we might have to write a little bit HTML for this one too. I know HTML, maybe a little bit of JavaScript in our HTML too, let's see, let's see. So the first thing we wanna do is, we wanna go into our default server, you remember where that was located?

[00:01:20]
/etc/nginx/sites-enabled full stack front end, fsfe, our default server. You'll know you're in the right place if you go to the default server. So I'll do that now. So sudo vi /etc/nginx/sites-enabled fsfe, and here I'm in my default server. Next, I wanna adjust the location block down here. So we're just gonna jump into insert mode here, and we're gonna add some more directives.

[00:02:09]
First thing we're gonna say is we're gonna proxy, we're gonna set a header. So that means when we proxy connection, we're just gonna add a header to that. And we wanna say it's an upgrade, upgrade, up, grade. Because WebSockets are considered an upgrading the connection, it's not just HTTP.

[00:02:36]
WebSockets do run over HTTP, but it's an upgrade to it, so it's a little add-on. So we have to tell nginx to add that header so node.js knows what to do. Next, we're gonna set another header to the proxy itself or to the connection itself, not just the HTP request, so we're gonna set another header.

[00:02:58]
And the connection is an upgrade. That's it, not too bad, I remember earlier someone asked, why do we use nginx instead of node? And I'm said you could use node, but nginx just makes it much easier. So two lines, we added the ability to have WebSockets to our at least connecting to WebSockets.

[00:03:27]
We still need to enable them with our server and of course we command right quits and it's good practice to double check our configuration, syntax looks okay, so now we can restart nginx, great. But it's still not gonna do anything, it's just saying nginx has the ability to handle WebSockets, we still need to create a server to do this for us.

[00:03:51]
So now we can jump back to our laptops, you can jump out of the server or you can do this on the server if you want totally up to you. You might be a little faster coding, not in vi, I'm not gonna judge you either way. So we're gonna create a new server, and this time we're gonna use something called Express.

[00:04:17]
Express is probably the most popular node server out there, I like it cuz there's tons of documentation that's relatively fast, it's been around for along, long time. So we can't go wrong when using Express, if you're saying what sort of node servers should I write? And the reason we are using Express is, because the things we're gonna have to do get a little more complicated than that simple server we wrote a little bit earlier which is just node with no other libraries.

[00:04:46]
Express is just gonna make the link WebSockets a little bit easier. Is there a question there?
>> I was just curious your opinion on Fastify?
>> Fastify is fun, is that the one that's more API driven? I forget, I'm thinking of a different library.
>> A lot of people have been saying that since Express isn't maintained too much, Fastify is kind of the standard, but anyways go ahead.

[00:05:17]
>> I've not looked at Fastify.
>> [INAUDIBLE]
>> Yes, we could. I mean, I think for learning Express is probably the best because it's been around for so long. You're not gonna be doing anything that hasn't already been done before that you can't find an answer on Stack Overflow.

[00:05:33]
And that's part of what goes into software engineering is like, can you find answers when you need it? It's all great to be on the leading edge of front end masters.js, the hottest new node framework, but if nobody else using it, then you can look it up. Then, you might run into trouble unless you really know what you're doing.

[00:05:51]
>> Programming as a team sport.
>> Programming as a team sport. So I will let you get that far, and then I'm gonna jump into the code itself, and we're gonna write a WebSocket connection. I'm gonna use VS Code for this one, But we'll read it all together versus me just telling you to copy things and you're like, why am I doing this?

[00:06:13]
That's not the way to learn, the way to learn is to actually write it out yourself rather than just trust me that it works. So if you're still writing, that's okay, I'm gonna show you, I'm gonna write this code myself, so you can just follow along. I'd like to give you a chance to write the code and think about it a little bit.

[00:06:27]
Because if you're talking, if you're coding and writing, it's really hard to pay attention sometimes. So I have a link here in the slides to the WebSocket example. We're gonna right through it but just in case you can't keep up or you have to go to the restroom or something like that, we have the fully baked example here on GitHub.

[00:06:47]
So, first thing I'm going to do is, I'm gonna open a new VS Code, To join you don't want new window, there we go. We go open a terminal here. Because we're actually coding for the server, but I don't wanna write this on vi, I'm not that versed with vi, I wanna write in the terminal that I'm comfortable with.

[00:07:27]
I'm gonna clone the repo that I made earlier. So git clone. I'm just gonna use VS Code. In the wrong directory, so I'm gonna make a move into my projects directory. Now I'm gonna get clone, that should be the right place. Cd jemstack, and let's do this a lazy way.

[00:08:14]
Open a new code editor there. I should have just done it on my terminal, don't judge me. I get there eventually, even if it's not the most efficient way. So we already created our package.json earlier, not a whole lot in it. We have our old server called app js, remember this one, hand built, no express, very, very simple.

[00:08:35]
Let's create a new file and I'll call it index-ws.js. So now, I'm gonna write the server blocks that you just wrote before or the server, so I'm gonna use Express, require, express We're writing a server, we're gonna require that http, and we just shortcut it by saying create server.

[00:09:18]
Let's create a new app, that's just the Express app when executed, then assign the server to the app. So we need to create a route, just a basic route, so we'll say any requests that come in to slash get. We wanna respond, we can use a function, remember requests response?

[00:09:48]
Enclose that off, and all we wanna do is just respond with an index.html file.
>> We haven't written that file yet, but we know now that HTML is pretty forgiving, so we can just touch index.html and add a hello world in there. But for now, I wanna use the send file command, because that is one of the easier ways of sending back a static index or a static HTML file.

[00:10:13]
But as always, we need to say where this file is located, and it's located in the route which we have to specify. So the route is here, we're gonna use dirname, which is a reserve name in Node.js, but it just says, what's the directory and right now? It's just shorthand for doing that.

[00:10:40]
And then, we actually have to make the server response request, so we can say server.on request. And we're just gonna sign the app. That Express server that we created, we're just gonna make that respond to all our requests via the HTTP server. And of course, we gotta listen somewhere, give it a port.

[00:11:01]
So we're gonna say server, listen, port 3000, just our default there. And we give it a function, just a call back when it does listen, and we're just gonna say console log. Server started on port 3000. And just close it off for giggles. And last thing we need to do for error out from it can't find the file, let's just create an index.html file, index.html.

[00:11:39]
Say, WebSocket example, right? Let me just open my terminal and let's go ahead and run this application. So to run it, node index ws.js, and something's wrong cannot find module Express. I forgot the npm install express, common mistake, so npm I express. And now let's give it a shot.

[00:12:25]
And we'll navigate to our browser here, and we're going to localhost 3000, there we go. So in this course, you've already created so many different types of servers, an Ubuntu server, a Node server an express server. Servers are all around, but again, servers aren't that hard to create.

[00:12:43]
It's getting to the details of what that server supposed to do and locking it down properly, that's where the tricks come in.