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?
While this is cool on its own, I think you are missing the most exiting aspect of WebSockets; namely the fact that now servers can send/push data to the client without the client explicitly requesting for it. That is what really differentiates WS from AJAX calls and other previous methods, because previously there wasn't really any good ways (i.e. not polling) of server telling that "hey, I got new data for you".
If we take your oscope as an example, I think more idiomatic way of using websockets would be to the server to constantly push new data over the WS and the client-side JS to update the canvas based on the new data as it comes. That would kinda invert the control from JS-polling to server-push.
I'm using Websockets for a new version of my company's call center software suite. Our management app now displays live call statistics via websockets and our operator applications are much faster too. It's made the entire suite feel much more responsive.
X-Post referenced from /r/esp8266 by /u/cnlohr
WebSockets for awesome on the ESP8266
I am a bot made for your convenience (Especially for mobile users).
Contact | Code
That's cool, I didn't think the performance of ESP8266 is good enough to handle tasks like this.