Communicating with Web Sockets

[00:00:00]
>> I'm not gonna say the circle is complete yet, because I still want to be able to push stuff. Holding down the button and refreshing the page is fine. I think what I would rather do is now press the button and watch something change on the page. I think that is gonna give me the warm and fuzzies in a deeper and nicer way.

[00:00:22]
So, going into that, and again, the for a lot of these, the only difference in those folders, is a slightly different HTML file. [LAUGH] All right? Or some setup, right? So we've got that, we are going into this button and sockets over here Cd../button with sockets. Nope, and sockets.

[00:00:52]
Cool. If we go into this directory, again, the major difference here is a slightly different HTML file where I'm going to now be able to just show live, whether or not the button has been pressed or not. That is the large difference in this case between that and the previous file.

[00:01:10]
So we'll kind of bring this all together cuz now once we have the ability to go in both directions, we can start to have some real fun and who doesn't like to have real fun? I mean, if anyone has anti real fun like please let me know now, I think that's an important note.

[00:01:29]
Only new things in here that nobody wanted to watch me type were... Some of you have probably experienced that. One time, you could just send post requests to Express and everything worked. And then another time, they decided to take out the ability to parse a JSON body and put it into its own library and made you add it back in every time.

[00:01:50]
So, I've got that in here. Other than that, it's just a create board. And then we've also set up Socket.io. For those of you not familiar, Socket.io is a super great WebSocket library that basically, again, makes working with WebSockets easy. So we're just kind of taking, and this is one of the reasons why I like doing a lot of this stuff with Node, because you do get the entire power NPM ecosystem, right?

[00:02:16]
One, also like as a JavaScript developer, I can write JavaScript faster in C++. And two, the idea that I can pull in all of these libraries that are kind of custom, bespokely built for creating really cool web things and tie them all together. And then adding in a lot of this hardware stuff as the PC resistance, if you will, to put it all together.

[00:02:37]
A lot of this is just the boilerplate for me, right now other than creating and waiting for the board, all of this is very much just boilerplate Express and Socket.IO. And to be clear, for this part, I have to look it up every single time. So I just didn't want to so here it is kind of done for us, because I can't handle that kind of stuff.

[00:03:00]
Cool. So right now if I look at my board, I've got a button wired up at two and I've got that LED at 11. So we're gonna kind of start with that as our kind of like basis in this case. I don't have a lot that I need to do with the LED just yet.

[00:03:16]
Let's start with that button that we had before. So the button is gonna be a new five button that is gonna be at 2 and we've got that in place now, we don't necessarily care that is pressed what we wanna do is, so in socket.io we know when a browser connects to us.

[00:03:35]
And so we're gonna need that. I could make another one of those wait events, but we wanna make sure that we've got the socket connection at all for starters. So I'm gonna just do this io.on connection. And before we worry too much about the button, we're just gonna make sure that we've got our web sockets hooked up appropriately because it would be really sad.

[00:03:57]
If we went through working with the Johnny-five stuff for the button, and then we found out that I messed up just the basic web socket stuff. So let's doll out our like happy dopamine hits one at a time here. And so, that's not the appropriate emoji. Hold on.

[00:04:14]
Where is it? There we go, a plug when we have a socket connection established and then we'll just kind of on a disconnect, we'll send that back. I don't even care about that right now. So the socket is going to be the individual browser that is connected to our WebSocket server in this case.

[00:04:35]
And this point, we're just simply gonna make sure that we've got that connection which at first we will not see because we have not written any of the client side code yet, right? So we will need that but this will get the server piece in place first and foremost.

[00:04:50]
So we're gonna go ahead and have that client right now we've just got that button state is a span that should be the words on or off. So we'll get that in place as well. And so we've got this button state. Let's go ahead and just figure out whether or not we've got something set up and ready to go at this point.

[00:05:14]
So same kind of basic idea, which is Socket.IO has both the client side and a server side library. So we can pull in IO from, it's slightly different than Socket.IO. At this point it is, yeah. Which one do you think it is? Wanna take a lucky guess which one goes on the client?

[00:05:31]
That's right. [LAUGH] I'm gonna just take the smiling and nodding to assume that it was the client one. And then we just get an instance of that. Very similar to what we did on the server, but this will just give us that socket connection. And we'll say socket.on connect.

[00:05:51]
Let's see if I can spell right socket.on connect. Let's go ahead and just say Set up on the client side. And this should hopefully just make sure that we've got everything in place in either direction. All right, so what I should be able to do now is I pull up my terminal, I'm just gonna do node index.js.

[00:06:23]
So nothing special happening in here. Unless I have a giant error message. The board starts up. Server starts, I'm gonna go grab it in Chrome. The button is currently off. If I press the button, it will stay off because there is no code to update that at all.

[00:06:44]
So ideally, when the button is happening, rather than before we were going and hitting a request and that was telling us whether the button was on or off, right now, I wanna press that button I wanna see the webpage change. I don't wanna ask if the button is there.

[00:06:56]
I just wanna press the button. And I wanna see, right? And so we kind of have to take a bunch of the stuff that we've done previously and tie it all together. So we'll go back in server and say, all right when the button is pressed, we're gonna wanna do is send a message to a given socket that we are ready to rock and roll.

[00:07:20]
So we'll say when we've got the socket, we'll say the reason I've got two socket connections is because Safari is still running. So button on, on down. So I can emit button down. I like it, yeah. And then button on up. Well, we'll say that the button went up, so basically, the server will now listen to Johnny Five for those events on whether or not the button is being pressed or not.

[00:07:54]
And it's going to send a message to any and all connected browsers that the button is pressed or not. So if I could have a ton of windows open, they would all receive the message. They don't do anything with that message yet. But then they can theoretically all see the DOM together.

[00:08:09]
So we'll have that in place. So here we're just saying when the button goes down, emit that the button went down. And when the button comes back up we'll emit that the button went up. Actually, if I wanted to buttons currently off, I like up and down more so we'll probably change this cuz I'm gonna make some like very pedantic decisions in the heat of the moment.

[00:08:31]
So now in that client code, we can listen for those two things as well. So we've got that connection here. And we're just gonna say socket on any message. We have different channels and messages, we don't really care that much. Whenever we get a message from the server, let's start out by just console, logging the message.

[00:08:53]
We'll build up from there. So ideally, I don't know if I have to kill the server or not. We'll find out together. Yep, I will actually want that. Let's park it in digitalized bottom right. Cool, we're set up on the client side. I might have to kill that server because I think I changed the server code as well, so we'll do that.

[00:09:24]
Awesome. Nope, I guess nothing just yet, so let's check it out. What we've got going on.
>> I have it listening to button and then it is doing it on the client side. So instead of message, I just switch that to button. And it started getting the button messages.

[00:09:48]
>> On the button channel, or?
>> So it admits button.
>> Yeah, cuz I'm sitting on the button channel, and so instead of just admitting it or sending it, I actually put it on the button channel, you're right. So this one right here?
>> Yeah.
>> Yeah, silly, let's go back to my console log.

[00:10:08]
There it is. Silly typing, this is why you should pair program with like six of your friends simultaneously because as you were talking and coding and you make silly boo boos you have friends that will catch you and help you out. Okay, so now we just need to basically tie it all together, which is to say, instead of logging into the console, we'll say, We'll just change that.

[00:10:43]
Let's not totally [LAUGH] make our lives worse than they need to be. All right, moment of truth. I can press the button as it goes up and down, the website changes. So now the Arduino go all the way through node all the way to my browser. So now we've got a bunch of different sensors.

[00:11:04]
Like I said before, the Arduino starter kit comes with temperature sensors, light sensors, a tilt sensor, which is exercise, sometimes in frustration, but like it's there, a bunch of these sensors that can now theoretically emit the stuff that we can see in the browser. And from the browser, we can go all the way to the board, right?

[00:11:27]
So now we've got the entire power of the web and all of its API's. And we've got the ability to do stuff from the other direction as well.