Back in the dark ages of the world wide web, any time you wanted to update anything on
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.
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.
You had to go to the server and get a new one.

It's not just like connecting and getting a webpage.
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
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
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.
close a connection, just to update anything on a webpage.

This is just depressing.
This is just depressing.

Then, someone had the idea of XMLHTTP Requestes.
Then, someone had the idea of XMLHTTP Requestes.

This was amazing.
This was amazing.

This is how ajax worked.
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 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.
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"
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.
or an "E" without loading the entire webpage.

That's how it was, until 2011 when the W3C came out with websockets.
That's how it was, until 2011 when the W3C came out with websockets.

Websockets are unbelievable.
Websockets are unbelievable.

Now, you still have to do the whole thing to get the webpage to begin with, but, rather
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
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
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
why not" now, whenever you want to say anything like "T" and "E" say we are autofilling this

box.
box.

See how it says t and tee and tees and tees whatever.
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
You can say "T" and it sends you back some stuff, or you can say "E" and it sends you

back some stuff.
back some stuff.

This is so much.
This is so much.

So so much more efficient.
So so much more efficient.

You may be wondering how fast this websockets is.
You may be wondering how fast this websockets is.

Well, in this case, it's running at around 500 hz.
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.
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.
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
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.
in as little as two or less milliseconds.

That's just unbelievable.
That's just unbelievable.

So, some of the features I've been able to add to this is something like an oscilloscope.
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.
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
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...
to the WS2812 I2S driver for the ESP sorry...

The ESP8266 WS2812 I2S Driver which I covered in a previous video.
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
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
is being displayed, so, with websockets, I'm issuing a command, let's just see what that

would look like, a CM command.
would look like, a CM command.

I'm gonna submit it.
I'm gonna submit it.

And, the ESP8266 responds with... unfortunately I'm still not using the newer versions of
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
websockets which allow you to respond with binary data -- but still it sends back all

the oscilloscope data for that frame.
the oscilloscope data for that frame.

And, it does this at around 200 Hz.
And, it does this at around 200 Hz.

Means it sends it back and it's updating this canvas right here, this HTML canvas.
Means it sends it back and it's updating this canvas right here, this HTML canvas.

So, if I go play a song.
So, if I go play a song.

Say this, it's off of Brendan Becker's or...
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,
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
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.
ADC, being updated at 16,000 Hz.

Now you can see the actual wave form inside the browser.
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
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.
it folds, and based on that it can decide on which notes it thinks are perinent.

You can see here, some moving around shortly.
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.
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.
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
So, certain things like this right here, you can take the system reflash and drop on new

firmware, or drop on a new webpage.
firmware, or drop on a new webpage.

This is actually the same webpage but I can reload it.
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
And, you can even do something like I have a little interface right here for controlling

the GPIOs.
the GPIOs.

So, here on the ESP8266 board I have here, it's my quadcopter dev board, I can click
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.
"5" and turn that little LED on or off.

These are just some of the things you can do.
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.
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.
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
So, under the hood, what's going on here is our javascript is running all the time, and

there's this little loopback going.
there's this little loopback going.

That whenever it gets new oscope data, it just wants more oscope data and that's what
That whenever it gets new oscope data, it just wants more oscope data and that's what

we were just looking at.
we were just looking at.

So, it calls this function that we wrote called queue operation, which takes on a plain text
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
command like "CM" and once it's done it calls the function GetOScope and adds this to the

work queue.
work queue.

The reason that we have a work queue is on the javascript side, we have functions that
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
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
over to the ESP8266, then take the output and call the callback - and then keep doing

this operation again.
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
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.
in the work queue.

The ESP8266 receives some data.
The ESP8266 receives some data.

Websockets clients actually mask their data, so there has to be some minimal processing
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.
that's done ahead of time in order to actually get a plain text message back.

And then it calls custom command.
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
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 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
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
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.
then updates the HTML5 canvas, and this happens all over again.

Somehow this entire operation including calling GotOScope and updating the canvas can still
Somehow this entire operation including calling GotOScope and updating the canvas can still

operate at 200 Hz which is just amazing.
operate at 200 Hz which is just amazing.

I love websockets so much.
I love websockets so much.

Isn't it just grand?
Isn't it just grand?