I got a request this morning for a tutorial/example of streaming data from a Photon to a local node.js server, and then graphing it on a web page. I thought that sounded interesting, so here it is. It’s currently sending a sample every 20 milliseconds (50 samples per second) though it can go faster than that. My demo has a potentiometer and when you adjust it, the graph updates in real time!
The node.js code has two parts:
A TCP server that accepts a connection from the Photon and receives raw data values, 1 byte per sample. When a new data value is received it’s sent out to all of the web browsers that are currently graphing. Since it’s the node.js server replicating the data you can have many web browsers simultaneously graphing the data without bogging down the Photon.
To run it, download the source from Github:
The firmware directory contains the code for your Photon. Be sure to update the server IP address and flash the Photon.
Then run the node.js server, for example:
You must be in the directory containing livegraph.js and the public folder, because the files in the public folder, index.html, main.js, and main.css need to be sent to the web browser.
Then open up a web browser. If you’re doing it on the computer running the node server and the default port, you’d just use: