Nodebots / Hardware Update Web Page with Device Data Solution

Transcript from the "Update Web Page with Device Data Solution" Lesson

[00:00:00]
>> Steve Kinney: So our mission was to kind of marry two of our previous attempts. So earlier, we set up an express server. And we were able to kind of communicate over web sockets. Then just now, we just were doing the command line interface with the temperature data. So we wanna kinda bring those two things together.

[00:00:20] We'll be working with two major files today, playground.js which is just like a pretty empty file, and the server.js. And the only reason I really had two files is cuz I didn't wanna write that express code over again. So I do need to make the choice of, do I bring all that express code to the playground.js or do I bring all the weather station code I wrote into server.js.

[00:00:43] I am going to go with the path of least resistance which is to take the very little code from the weather and bring it over into the server.js. So what I'll do is I'll simply kinda take this code right now,
>> Steve Kinney: And copy it.
>> Steve Kinney: Cool, and bring it over to server.js.

[00:01:08]
>> Steve Kinney: Paste it in there. Now, I don't have these graphs anymore. Let's get rid of those. And it seems to be all, I need to get rid of that LED. There's only two things I need to get rid of. So when the board's ready, we'll fire up our web server.

[00:01:23] It's got socket.io installed. We'll get all the server up and running, and then we'll get our weather monitor with handle change. We'll do all of our readings every 470 milliseconds and we'll call that. So with the socket io, I can say io.sockets.emit, and this will take all connected clients and send them a message.

[00:01:53] And we'll say that the weather has been updated.
>> Steve Kinney: Cool, and go ahead and do that. And the payload is gonna be the temperature.
>> Steve Kinney: The pressure, and the relative humidity that I read. So now every time the weather changes, this server running on the Tessel is gonna go in and emit this data to all the connected clients.

[00:02:24] And it is one of those things where if a server sends out a web socket and no one's listening, did it ever really happen? Yes, technically, I mean that's hard, that's a really deep philosophical question, right? Did anything go over web socket? No, there's no connections, it's hard.

[00:02:40] [LAUGH] We can talk about that later, I was like, obviously, it happened, maybe it hasn't. Cool, and earlier I showed you that index.html held the weather data. We'll go into the weather station, socket weather, and grab that, and put in the index.html for my public.
>> Steve Kinney: And now what we need to do is write the client side code.

[00:03:06] So in this case, we'll do,
>> Steve Kinney: const socket = io,
>> Steve Kinney: And we'll say socket.on('weather updated'). I'm not gonna make the same mistake twice, and I am definitely going to verify that. So it was weather updated, cool.
>> Steve Kinney: And I'm just gonna start by console logging to do a sanity check before I get too far ahead of myself.

[00:03:50]
>> Steve Kinney: So it is a whole object. We were setting a plain old JavaScript object. I can destructure it here if I really want to. Either way is fine, we'll just console log it for now.
>> Steve Kinney: And I'll go ahead and deploy that.
>> Steve Kinney: t2 run, in this case, I moved it to server, so it's gonna be t2 run server.

[00:04:12] Give it a second to load and deploy and we'll see what we have. So I had a quick issue that I needed to resolve, which is when I did that copy and paste job, I did not bring over load ashes throttle. So I do need to rectify that real quick.

[00:04:36]
>> Steve Kinney: Throttle = require.
>> Steve Kinney: And we will go ahead and we will endure the wait as we push out to the device again. Wait for the server to start up.
>> Steve Kinney: Go directly to that.
>> Steve Kinney: So we can see about every half second or so, just slightly under a half a second, we're getting those temperature, pressure and relative humidity readings.

[00:05:13] So we know that we figured out the web socket part. Really all that's left for us is a little bit of down manipulation, right? So let's go ahead and look at that index.html.
>> Steve Kinney: We can see I've got some very, very well-named paragraph tags that I can go ahead and grab, or actually,

[00:05:43]
>> Steve Kinney: Grab the three of those. Go back over into my script and I'll say.
>> Steve Kinney: Cool, so I've got a paragraph text for each of those. And so what we'll do next is we'll simply say, we'll grab these, actually, again.
>> Steve Kinney: .textContent = data., whatever that was. All right, let's go ahead and redeploy this.

[00:06:50]
>> Steve Kinney: So the only bad part we do here, we gotta have the speed of local host if you're making those client-side changes. You do have to send everything back over to the device.
>> Steve Kinney: But honestly, for everything that we gain, I'm willing to [LAUGH] pay that cost.
>> Steve Kinney: Now we can see that we're updating a web page with this data, which is great.

[00:07:18] We figured out earlier how to send web socket requests where we did the RGB LED, we could send web socket requests from the browser to the Tessel board and change the LED. And now we have the opposite, we have the ability to get data from the sensors hooked up to our Tessel and send in to the browser.

[00:07:36] So now we can build UIs with node and client side JavaScript for all of our hardware really easily.