This course has been updated! We now recommend you take the Full Stack for Front-End Engineers, v3 course.
Transcript from the "Websockets: Client-side code and observables" Lesson
[00:00:00]
>> Jem Young: This is, i am using a library called smoothie, to display real time values of any data we want to send. So, I want to send the server load data, remember that script we made way many hours ago, i want to use that to send the server load live to the website.
[00:00:16] So let us look at all that, but first let us take a look at the code, just so you know that I am not a mad man making things up.
>> Jem Young: So I am using, and this is the code that's running on your server, this is AppJS, I am using a library called WS, which is kind of a bare bones, a very, very fast version of Web Sockets for Node.
[00:00:39]
>> Jem Young: So here's where I'm requiring in, Web Socket Server, blah, blah, blah. So web socket is a space. So it's saying, when a new connection happens, here's the things that I want to do. So first, I'm gonna output how many clients are connected. This is just going through my log files, just my own knowledge.
[00:00:59] We'll talk about this in a second. But just saying, if the web socket is open for this web client, I am going to see back welcome, and that's the best we got here because on the client side, we are passing that message, saying like server saying welcome and then cancel the log welcome.
[00:01:15] Saying we are close, we gonna include because right now, I was just sending data over and over again. And here is the fun part, that script we read earlier, whatever you want to call it cracker, loader, we are gonna execute that script every two seconds, and we are gonna push that data to all the clients that are connected, and the client knows how to handle that, because it's in the client server code.
[00:01:39] Questions, if you have never seen Web Sockets before, you are probably like, what? But, questions, surely you have questions about what is about to happen. So we need to hook all this up still. And in the client side, sure the client code. That is in static, index.jx. So that's a chart that's running, this fancy chart, it's already running for you, and because our web socket things, this is picking the web socket protocol automatically for you, I did it as a courtesy you need to do it yourself, but it's just saying for HPPS, we want to use secure web sockets which is WSS, otherwise it's just WS.
[00:02:24] So web sockets in action looks something like that. So 137.0.1, It is kind of like, an FTP connection of HTP you see a bit more how the internet works on protocols and how to make requests. So websockets are just ws. ws? That's pretty cool. Now, I'm using observables, don't get too confused, now I know observables are tricky, there are two courses, I think on front of masters by Jaffar Hussain, who also works for Netflix.
[00:02:54] Who is the king of observables. He will talk to you so much about them, because he loves them. And they're actually getting pushed in the JavaScript hopefully. Everybody know what observables are? Just high level summary, observables are a faster way of responding to streaming data. Websocket is a perfect example of a observable.
[00:03:13] Because it's streaming data, it's a connection that's always open. We don't know when the data is going to come in, but we know it will at some point. And using r accept intervals, so rxjs, we can handle that data as it comes in. The old school way of doing it, is to make a promise, and then when that promise happens you then, then, then, then, then.
[00:03:33] Versus observables we can say when this happens, do this, do this, do this, do this, rather than all these problems changing. That's a better observables. I won't go to much, because again, that's like a four day course, so they get pretty complicated, but, it's gotta go back and take a look at that because that's what we're using right now.
[00:03:51] But I just want to make sure so nobody's like what's rx observable? So, what we're doing is the server is sending a message periodically. So, when that message happens it has a payload in it. The payload has a uniform structure, that I defined as it has a name.
[00:04:06] It has a JSON payload. IT has a name. It has data. And now, it's just a switch statement handling that name, so when I'm sending down load. I'm parsing that data. I'm converting it to an array, and then I'm gonna use that data down here. If it says ping, I just send back a pong.
[00:04:21] So ping pong and it will do that all day. And that's about it. Question? No questions. Yes?
>> Speaker 2: Is this how you remember where we left on the streaming? For example Netflix or Hulu?
>> Jem Young: Sort of, that's a bit more complex, but what happens in Netflix is you're streaming movie data, they do your observables for audio players things, like that, you shoot movie data every so often it makes a token that's says here is where you are, And then the server keeps track of that for your username.
[00:04:55] So the next time you come back, it automatically knows where you are again. It's really fascinating if we go into, maybe later after the class, we'll look at Netflix and we'll look at the network stack. And you just see the requests coming in and how we're handling it, how we're parsing things, it's fascinating I know.
[00:05:11] But [LAUGH] Back to WebSockets. The beginning. If you want to make you a Netflix, let's use some WebSockets. So I am saying, when I parse my data, I am going to split it in to an array. That's why that's, if we look back at the load data, way back here, why I put dashes in there, for that AWK.
[00:05:30] Remember, because I didn't have to put the dashes in there. I put it in there, so I am making a standard way of parsing data, delineating like this is load one, this is load two, this is load three. You could use commas, you can use semicolons, it doesn't really matter.
[00:05:42] But, because it's standardized, I know how to parse that data, and I know that every time I see a minus sign it's a different chunk of data. So I can just parse that into an array. So I filter that. So, I'm just saying, I want to make sure that it's an array, and it has a length, not zero.
[00:05:58] And then, I just append this all to the chart, in real-time. That's observables for you, right there. Like really useful for handling data just like this. Not good for every use case, but this particular case, it's quite good.