Nodebots / Hardware Update Web Page with Device Data Exercise

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

[00:00:00]
>> Steve Kinney: Now, I have a challenge for you. The challenge for you is previously we implemented WebSockets in a server. Then we switched gears and we went ahead and just played around with the weather sensor. What I would love to do is bring those two together. So I kind of show you little quick.

[00:00:20] If you remember earlier, I said I did leave some clues in the read me about, I don't need that color picker any more. Some of the Socket.IO stuff that is available for sending messages back and forth. In this case, last time we sent messages from the client to the server.

[00:00:45] We are gonna have to flip that this time, because all of the action is happening on our tessal. So every 470 milliseconds, whenever we get a new change event. Rather, we can still update the bar charts if you want, but rather than updating the bar charts, what we wanna do is send a message to all of the connected clients, right?

[00:01:10] So we will send a message from our tessal, to all the connected browsers, right? And so in that case.
>> Steve Kinney: This one over here is your friend. io.sockets.omit. You'll give it some name. You can be like whether changed, or whether change. Just make sure you get the [LAUGH] past tense and present tense straight and don't do the mistake I did with the color change.

[00:01:35] And then on the client we will receive those events, right? And so that will be a socket on whatever that event was and then we'll update the DOM. You can configure the HTML yourself. I do have a, if we go into the directory and we go to the project and we go up to the example code for the weather station.

[00:02:01] See this one called socket weather. You could also go into public directory and grab this HTML, which is not amazing but it's basically some paragraph tags where you could update those values. So if you don't wanna write an HTML, you can grab that and move it in yourself.

[00:02:17] And then we'll just write the JavaScript to receive those events and get real time updates in the browser. So let's spend 20 minutes, put that together and then we'll review it together as a group and do it and get it working.