Nodebots / Hardware Add WebSockets for Real-Time

Transcript from the "Add WebSockets for Real-Time" Lesson

[00:00:00]
>> Steve Kinney: Great, so we're able to submit post requests to a regular HTML form and change the color of an LED. One of the things I don't love about this is that we submit it, we look over, we reload a page. It's not a really great experience. It's not the experience I come to expect from the ten minutes that I have been running a web server on a small little commodity hobby board, right?

[00:00:26] The thing that I keep kinda harping on over and over again is, the cool thing about programming hardware with JavaScript is obviously programming hardware in our favorite language. But then also also being able to still do all the things that we can do in JavaScript, which is being able to run servers, being able to write client code and build UIs.

[00:00:44] All of the web APIs are available to us. One project that I did at one point was just basically just using the web audio API and as I turn knobs and press buttons on the hardware device, I was able to make the browser make sounds. And I did a little bit with a thing called web sockets which is every time the button got pressed, we know that buttons have an event and so then I submitted an event over the web socket to the browser, which then made sounds using the web audio API.

[00:01:09] So you can effectively build your own network connected musical devices, all right? So then once you start to wrap your head around the fact that you have browser technologies, server technologies, and hardware, right? There's this whole new spectrum of things that you can do. It's one of those things you start making the LED blink, and that's very gratifying.

[00:01:27] And then I guarantee you, three weeks from now, you'll be walking down the street like, I could do this thing, right. That wouldn't have been possible with this kinda overlap of these three different realms. So one of the things that I did early on was I set up socket.IO, and socket.IO is a web socket library for node servers.

[00:01:46] And this is all that it took to implement web sockets on the server. Is I required socket.io and I passed it my HTTP server. And socket.io is one of those libraries that has a server side component and a client side component. Cuz that's the two things you need between for web sockets between the client and the server.

[00:02:05] One of the great things about JavaScript, you can write on the server, you can write on the client. But the kind of tricky part with that is sometimes you forget whether or not you're writing on the client or the server. And sometimes some of the APIs are slightly different.

[00:02:19] So one day I put in the readme was Just Enough Express, in case you wanted to get an express server running with your hardware. And then Just Enough Socket.io, which is the kind of methods that we're going to use. So in the server, when a new browser connects, it'll be io.on('connection'.

[00:02:37] And we'll get the connection between that browser, cuz there could be many people connecting to my webserver. This is a connection between one browser and the single server. So it's a socket right there and say whenever some event. And this is a string. This could be client event, it could be color changed hypothetically.

[00:02:56] It could be sandwich. It's just a string to identify what kind of message we're sending over the web socket, and then we'll get the actual data that we can do stuff with. So this is the payload. So we can say color change, we should probably tell the server what color.

[00:03:15] That seems like relevant data that we might want. And then on the client, one of the things when we patched it into the HTTP server, is it made a client side JavaScript library available. All right so we have that as well. And then we'll go ahead and we will pull in, this is what it basically looks like to send something back to the server.

[00:03:40] Cool, and if you want to send events from the server out to all the connected clients, you can do io.sockets, which will be all of the browsers that are currently connected send a message to all of them. Earlier you saw that you have a single socket, so you can basically talk to one browser, you can talk to all the browsers.

[00:03:59] We're gonna keep it simple and basically talk to all the connected browsers at this point. You can get really fancy and tricky with this hardware if you want, we're not going to. Yeah?
>> Speaker 2: Do you have to set up multiple sockets for multiple events or is it?
>> Steve Kinney: Yeah, the socket connection is a given user and your server.

[00:04:19] With us, it's usually if we aren't the user doing it. It's got a lot of methods, so if you need to do super granular stuff, I would definitely recommend the documentation. But you can basically either talk to a connection with one browser that's connected to you, so one user, all users.

[00:04:36] You can actually do things where you can put people in rooms and a lot of crazy stuff. But we're gonna assume that everyone, cuz it's one of those things, for the example of the music that I said earlier, if I hit the button I want all the browsers to play the sound, right, not just a given one, right.

[00:04:52] But if you did want to talk a particular browser you could do that. But we're gonna assume that we'll server to everyone, everyone to the server. We're gonna keep it simple for our purposes. All right, cool. So we haven't set up on the server automatically. On the client, if you go into the example code, I have under Rainbow LED, I have one called socket-colors.

[00:05:16] The one thing that I wanna look for in there is, cuz I don't have it memorized, is this is where it basically patches the server with the client side code. So I'm gonna take this script tag. This is also in the socket.io documentation, it's just one of those things in all of the years, this relatively simple URL is not something that I can clearly remember.

[00:05:35] So I'll move that into the public index.html that we've been working with with the form. I'll just add that before the script tag, cuz it's gonna make a global io variable. So we'll just put that before the script tag. All right, cool. And now we're gonna kind of write some Bespoke code in here.

[00:05:55] So I showed you in the documentation where we could see how a client can talk to the server, so let's go take a look at that again. So we get socket admit and some data. So the data will be what color we want. So first thing we do is go ahead and see if I've got things right.

[00:06:18] So what I want to do is I wanna listen for change event on that color input that I made before. So let's go ahead and look. We know that it's gonna ID a color picker. It's gonna write some Vanilla JavaScript, const colorPicker,
>> Steve Kinney: = document.getElementById ('color-picker'). Cool, then we'll say colorPicker.addEventListerner('change',

[00:07:05]
>> Steve Kinney: And the other thing we need is the,
>> Steve Kinney: So our socket connection to the server.
>> Steve Kinney: socket.emit, we'll call the, again, this can be anything. It could be sandwich if you wanted to. color changed.
>> Steve Kinney: And we'll say that the color is,
>> Steve Kinney: colorPicker.value.
>> Steve Kinney: All right, cool.

[00:07:48] So there it will just basically tell the server. Whenever a user changes the color, we'll send that immediately to the server. Just in case I've made a boo-boo and I need to debug, we know that it does take 30, 40 seconds to deploy code to our tessel, so I'm going to be a little defensive and just say log it to the console as well.

[00:08:17]
>> Steve Kinney: So that if I have made some terrible mistake, or if I'm getting a different value than I think, or if I have the wrong thing. I at least have some information as I'm debugging rather than, no, it doesn't work. Why doesn't it work? Let me then put the console log into play.

[00:08:29] And I'm just going to- You can call me pessimistic, but,
>> Steve Kinney: Just being real. So now we just need to establish that connection. So when the browser fires up and does the client side code, it's gonna say hey server, I'm gonna make a socket connection with you. And so the server needs to know how to deal with that.

[00:08:52] So when somebody, cuz it's an onconnection,
>> Steve Kinney: Socket.
>> Steve Kinney: We'll say, when the socket sends us a color change event,
>> Steve Kinney: Take that data.
>> Steve Kinney: We will console.log the data, in case things don't go as planned.
>> Steve Kinney: And we'll say led.color and we'll say data.color. So now, every time that color input changes, right, we'll send a socket event to the server and tell it to change the LED.

[00:09:47] So no more of that post response back and forth. We'll actually be able to keep moving and changing the LED. And we'll see it work. So I'm just gonna go ahead and deploy that code.
>> Steve Kinney: I'll still be able to hit submit too as well cuz I didn't take that functionality out but it's fine.

[00:10:07] So I'm gonna deploy this code. So, I will show, right before we kind of cut, I had an issue where it wasn't working. I will show you that at this point it is changing colors as I move across the color wheel. The issue, and I'll show you in the code in one second, was basically on one end I call the event color changed like past tense and the other one I called it color change present tense.

[00:10:34] So that handshake between the client and the server was wrong so that was the issue for those things. But first, here with me as I move the cursor around the color wheel which I will show you on the client. So bascially while you saw the color change on the LED, this is what I was doing on the client.

[00:10:52] Which was just grabbing this moving it along. Each one of those sends a socket event to the server, which has access to the LED and is instantaneously changing the color of the LED. This, not unlike the button from earlier is also incredibly gratifying. But again, it's that overlap, the client side code that we wrote, server side code that we wrote, and then hardware code that we wrote.

[00:11:17] We can kind of control all three of these things.