Websockets for Awesome on The Esp8266

Back in the dark ages of the world wide web, any time you wanted to update anything on a web page, you had to go get a whole new web page. You had to go to the server and get a new one. It's not just like connecting and getting a webpage. You have to go make a connection to the server the server says okay you're connected, you have to go send a request to the server, the server sends back the data then you have to close a connection, just to update anything on a webpage. This is just depressing. Then, someone had the idea of XMLHTTP Requestes. This was amazing. This is how ajax worked. This is how gmail went to look at the list of who you might be sending emails to. This is how so many things on the web were made so much nicer. Now, once you have a connection and you have your webpage, you can send things like a "T" or an "E" without loading the entire webpage. That's how it was, until 2011 when the W3C came out with websockets. Websockets are unbelievable. Now, you still have to do the whole thing to get the webpage to begin with, but, rather than making a whole new set of requests and doing that work every time... when your webpage loads, you connect to the server, say "hey can I talk on a websocket" server says "sure why not" now, whenever you want to say anything like "T" and "E" say we are autofilling this box. See how it says t and tee and tees and tees whatever. You can say "T" and it sends you back some stuff, or you can say "E" and it sends you back some stuff. This is so much. So so much more efficient. You may be wondering how fast this websockets is. Well, in this case, it's running at around 500 hz. What that means is right here, when the website still has to do this connection thing. It still has to pull this site from the ESP8266. Once it does though, now whenever it says "T" and it gets a response, that can happen in as little as two or less milliseconds. That's just unbelievable. So, some of the features I've been able to add to this is something like an oscilloscope. As you can see when I open up the oscilloscope, the speed slows down. This right here is using the colorchord version of this system, but I've added this same system to the WS2812 I2S driver for the ESP sorry... The ESP8266 WS2812 I2S Driver which I covered in a previous video. So, with ColorChord, we have a little ADC on the chip and that little ADC right here is being displayed, so, with websockets, I'm issuing a command, let's just see what that would look like, a CM command. I'm gonna submit it. And, the ESP8266 responds with... unfortunately I'm still not using the newer versions of websockets which allow you to respond with binary data -- but still it sends back all the oscilloscope data for that frame. And, it does this at around 200 Hz. Means it sends it back and it's updating this canvas right here, this HTML canvas. So, if I go play a song. Say this, it's off of Brendan Becker's or... Inverse Phase's Shuttle Scuttle OST Album, you can see in the browser, in real time, you can see the information coming off of my audio por here and going into the ESP8266's ADC, being updated at 16,000 Hz. Now you can see the actual wave form inside the browser. Because it is colorchord, it has to do a DFT, folded, or regular DFT which it fuzzes then it folds, and based on that it can decide on which notes it thinks are perinent. You can see here, some moving around shortly. And, from there it decides on colors of setting a whole bunch of LEDs it can use on its outputs. There's other things that this can do as well. So, certain things like this right here, you can take the system reflash and drop on new firmware, or drop on a new webpage. This is actually the same webpage but I can reload it. And, you can even do something like I have a little interface right here for controlling the GPIOs. So, here on the ESP8266 board I have here, it's my quadcopter dev board, I can click "5" and turn that little LED on or off. These are just some of the things you can do. I've added a couple of these to the other project and I'm adding it to my wiflier project. But, you may be wondering how this operates under the hood. So, under the hood, what's going on here is our javascript is running all the time, and there's this little loopback going. That whenever it gets new oscope data, it just wants more oscope data and that's what we were just looking at. So, it calls this function that we wrote called queue operation, which takes on a plain text command like "CM" and once it's done it calls the function GetOScope and adds this to the work queue. The reason that we have a work queue is on the javascript side, we have functions that execute, in this case it says "hey is anything in the work queue" if there is, go send it over to the ESP8266, then take the output and call the callback - and then keep doing this operation again. So, what we get is we firt, if there's something in the work queue we go send that thing that's in the work queue. The ESP8266 receives some data. Websockets clients actually mask their data, so there has to be some minimal processing that's done ahead of time in order to actually get a plain text message back. And then it calls custom command. Which figures out "ok this is what I figure out this is what I do with the data, in this case it says "CM" so I'm going to send back 512 samples of oscilloscope data in which case the onMessage callback gets called inside of javascript which then it says "ok I was currently working on that thing in the work queue so I'm going to go call GotOScope which then updates the HTML5 canvas, and this happens all over again. Somehow this entire operation including calling GotOScope and updating the canvas can still operate at 200 Hz which is just amazing. I love websockets so much. Isn't it just grand?