Full Stack for Front-Ends Part 2 Websockets: Setup
This course has been updated! We now recommend you take the Full Stack for Front-End Engineers, v3 course.
Transcript from the "Websockets: Setup" Lesson
>> Jem Young: All right, so now our site should be flying along. We're caching on the client side, we're caching on the server side. These are, I wouldn't say easy optimizations cuz you still have to think about it, but the actual code to do it is pretty straightforward. And at this point you should be able to take this home to your company or whatever you do, and implement some of these.
[00:00:18] And I guarantee you, the speed of your side just a little bit faster. So now let's talk about WebSockets. We've finished caching, we're pretty optimized at this point. Let's talk about how we run a WebSocket through our Nginx server, cuz websockets are awesome. Anyone tell me what WebSocket is?
[00:00:34] Somebody? Nobody at all. Yes?
>> Speaker 2: Allows two sites,
>> Speaker 2: [LAUGH] To, like, yeah, runs simultaneously basically. So if someone makes a change on, let's say you have a card game happening, if one person, or whatever, I've seen that example. If someone moves a card one browser, like on the other person's browser they will instantly see the card.
>> Jem Young: Yeah.
>> Speaker 2: That was a roundabout way.
>> Jem Young: That's right. That's more what WebSockets are used for, kind of like their utility. But anybody else, WebSockets, you use them all the time, most sites use them or some sort, all right? So from first course, you remember how an HTTP connection works.
[00:01:21] You make request a server, it comes back, it does some stuff and it sends it back down. The problem is that's all client driven. The client has to do that for you, but what if we can just push data to the client? So we just have a persistent connection, and we just pipe stuff into the client cuz he's listening for that, and that's at the core of what a WebSocket is.
[00:01:38] It's just a long running connection that's open, and I just send data down, you can send data to me and we don't have to handshake every single time. That's the beauty of WebSocket, is that's why things are in real time cuz you don't need to do that constant pulling for change.
[00:01:52] Did I a question, just stretch them, yeah. So if you're talking about how to have fast data, so how do you things in real time? Let's say real time cuz it's always some latency, WebSockets are the way to go. There's also such things as Server Push which is a bit more advanced and that's pushing data to the client using a service worker which is fantastic.
[00:02:14] But WebSockets have been around for a long time whereas server push is just a bit newer, but let's see if we can find an example of a WebSocket right now. I bet GitHub is probably running one. Let's see if we can open up our, console, nothing happened here.
[00:02:40] See from memory cache beautiful, do they have a WebSocket open? They do have a web socket open. So if you want to see the web socket connection in particular in Chrome, you can just go to WS, and it's gonna show you the web socket that it's making. And if we can look.
[00:03:02] Don't think it's really sending that much. But in GitHub I've noticed over the past couple of years things seem to happen much faster. Like your pull requests are approved that's what makes the change and that's instantly that's WebSockets for you. It's just the data is pushed automatically, you don't have to refresh the page anymore.
[00:03:17] So I like to think of it as Ajax on steroids, it's not. They're completely different technologies but It's a good way of thinking about things.
>> Speaker 3: Supported by all browsers?
>> Jem Young: Yes, great question. It is supported by all browsers now. WebSockets are a pretty old technology at this point.
[00:03:33] By old, I mean five or six years. That's old in Internet land. But the problem is, how do we want to tunnel a WebSocket to our node application? We can do that with Nginx. And if you're thinking why do we have tunnel three Nginx at this point, why not just hit node directly?
[00:03:49] Like open up a port and hit it, Nginx does all these powerful things like caching certain headers, we can do that node but it'd be a lot more work, and it'd be a lot more set up. Letting Nginx handle it, we just let it handle it cuz that's what it's good at.
[00:04:02] But if you wanted to, you can tunnel directly to your node application. But that's not a best practice. So let's suit it in Nginx.
>> Jem Young: I did it again. I just need to find all of these. You are all learning where the Nginx configuration is not. So in our location block, which we already set our proxy to node, just add in two new directors in there, we'll say proxy_set_header and proxy Connection upgrade.
[00:04:32] So a WebSocket connects on, I forget the exact protocols, but it requires an upgrade. It's like 101 or something like that. So we have to upgrade that connection if it's a WebSocket request. And it's just gonna upgrade it and send it straight to Node. And then now we have a real-time pipe into Node itself.
[00:04:51] So if you add those directives in there, all right.
>> Jem Young: set_header. Set, upgrade request,
>> Jem Young: To,
>> Jem Young: Web connection.
>> Speaker 4: Quotes around that grid.
>> Jem Young: Which one?
>> Speaker 4: Quotes around that grid.
>> Jem Young: Thank you.
>> Speaker 4: On the other side.
>> Jem Young: That would have got me.
>> Jem Young: Perfect, yeah.
>> Speaker 4: No dollar sign, too.
>> Jem Young: Thank you, where did I probably use these connected variables? All right, so your coach looks something like this, at this point, very good, making sense what we're doing, all we're just tunneling, a website connection through Nginx, directly to node. And that's right, quit, sanity check it, cool, let's restart Nginx.
[00:06:28] All right,
>> Jem Young: But your saying, where is the payoff, Joe? That was a lot of work. Well, if we go to slash load, probably nothing happening, we need to make some changes. But we see that our WebSocket connection is live and well. The server just sent me a message saying welcome, and I'll show you the code that is handling this in a second.
[00:06:53] But essentially, we have a live stream from the server. So, I can send data as much as I want. I can send data back to the server and it's just gonna to handle it in real time without the user having to do all that much work.