This course has been updated! We now recommend you take the Full Stack for Front-End Engineers, v3 course.

Check out a free preview of the full Full Stack for Front-Ends Part 2 course:
The "Websockets: Exercise" Lesson is part of the full, Full Stack for Front-Ends Part 2 course featured in this preview video. Here's what you'd learn in this lesson:

As an example using websockets, Jem uses a script created earlier to create a real-time resource graph for the web server on the client.

Get Unlimited Access Now

Transcript from the "Websockets: Exercise" Lesson

[00:00:00]
>> Jem Young: If you notice, there's nothing coming through, darn it, why is that? We need to modify this node file a little bit, because I don't know where you put that shell script. Remember that one we created earlier for getting loads? Let's just point to that, so let's go to /var/www/fsfw2/.

[00:00:20] And let's modify app.js, everybody with me? So we're gonna vi app.js and let's find out where we put that file. Where did we put it? That's at home, all right.
>> Jem Young: So whatever you call that bash script, you can give it whatever name you want. I believe I called it load.

[00:00:47] Let's call it load.sh and I wanna point to that file, it's in my home directory. So the tilde, of course, is short for /home/your username.
>> Jem Young: Yeah, let's give that a whirl.
>> Jem Young: Everybody with me so far? This is where it gets a little tricky, cuz we're building on the work we did much earlier in class.

[00:01:12] That you thought was just idle work, but it was real work, useful work.
>> Jem Young: And you're saying, why are we using the shell scripts and not the node scripts? Dealer's choice, I kind of like the shell scripts. It's a little bit simpler to read if you need to fix it later.

[00:01:35] So I'm gonna go ahead and save this, but I need to restart my server. So forever and we're just gonna say, restartall cuz we only have one job running, so it's not too bad. All right, it should be up and running. Let's see if that worked, should be getting some data hopefully

[00:02:01]
>> Jem Young: If not, we will debug together.
>> Jem Young: It's still not sending data, so let me dig into this. If I want to just make sure this works.
>> Jem Young: Check home,
>> Jem Young: That's probably why.
>> Jem Young: There we go, I mistyped.
>> Jem Young: Just take out that period there and whatever the filename is.

[00:02:59]
>> Jem Young: And it's gonna restart,
>> Jem Young: Feel a little better?
>> Jem Young: Right, now we have low data, there is nothing happening on my server. So it's not terribly useful at this point. Let's see if I can make it do something, heat up some resources. Let's say, /ma, I'm just gonna make a node script real quick for.

[00:04:00]
>> Jem Young: Just make it a long running loop to hopefully eat up some CPU cycles so we can see some load data and just kill this. So did htp and I'm still not generating any load, hm. What can we do to add load to our server, more for loops maybe?

[00:04:24]
>> Jem Young: Maybe I'll make a console log. So if you are following at home, you don't have to do this. This is just so you can see data on your graph. So you'll see some shininess, but 10000. We'll say i++, we'll make it console.log cuz that will eat up memory.

[00:05:01]
>> Jem Young: Was that enough to move the needle?
>> Jem Young: No, yeah, it did, barely, our load average went up just slightly. And there we go, cool. Sorry, that was totally a useless demo, but the graph does work. I just wanna make sure [LAUGH] we all knew that. And now we have a live streaming graph of what's happening on our server, our load times.

[00:05:27] You can make an entire dashboard of every server you have, the load, things like that. And we do it all in real time with web sockets, that's pretty cool. All right, questions on web sockets, things like that? Streaming data, anybody have any trouble still? It's okay if you are.

[00:05:46] All right, cool, no questions? Nobody, it works for everybody, yes?
>> Speaker 2: What happens if the IP address of the client changed, to the WebSocket?
>> Jem Young: It will disconnect, so you'd have to make a new connection automatically. Cuz it's not smart enough to know that, hey I should stay connected.

[00:06:02] It's just gonna drop the connections and then that's the end of it. Now if you use a library, the library people usually use is socket.io, which is a much more powerful library in AWS. Socket.IO you may have heard of because it does things like, if the client doesn't support web sockets.

[00:06:17] It'll switch to long polling, which is just a very long HP request that just stays open a long time, not as efficient. It does things like caching for you and making sure keep alive to make sure the socket stays open, things like that. But we're just using ws cuz it's bare bones, it's middle, it works.

[00:06:36] And overtime, we see that because of our load averages, it averages out to 1 minute, 5 minute, 15 minute, it's just dropping over time. All right, WebSockets are cool, we could build way cooler demos with WebSockets. And I can talk to you in real time and things like that, but that's for another class.