Photon/node.js live streaming graph web page example

Social Project Share
1

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!

graph.png1853×738 67.4 KB

Video:

The node.js code has two parts:

A HTTP web server that serves the html/css/Javascript for the demo page and also serves Server Sent Events (SSE) for the live data updates. The SSE server sends out 10 bytes for every data sample, so the overhead is pretty low even sending out 50 samples per second.

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.

There’s also the static web page code, served up by the node.js server. It’s simple HTML and Javascript code. The graphing is done using HTML5 canvas. It receives data in real-time using Server Sent Events. And it does the whole thing without using any framework (jquery, AngularJS, etc.) - it’s that simple!

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:
node livegraph.js

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:
http://localhost:8080/

project.jpg1600×1065 341 KB

Have fun!

9 Likes
2

Thanks a million, this was extremely helpful!

3

Thanks! I have a newer version of the code in the post below. The new version is more complicated, but it eliminates the need to hardcode the IP address in the Photon code, authenticates the data connection, and combines the server functions so everything runs over a single port.

1 Like
4

Brilliant. Thanks!

5

Hello.

I tried the code and it didn’t work. My localhost just showing “Live graph” screen. I have flashed the code on to particle. Can someone help me to understand whats going on?

Thankyou
RN

6

Showing the Javascript console in your browser may be helpful to see if there are errors. Also, the example does not work on Internet Explorer or Edge because they don’t support SSE. And monitoring the USB serial output from the Photon will indicate whether it’s able to send data to the node server.

2 Likes
7

Hi rickkas,

I’ve tried the code and it works great. I was wondering if there is any way this can be done, except that the Photon and laptop are not on the same Wi-Fi network.

Thanks,
Ben

8

Asking the same question multiple times is just going to bind resources without extra value

1 Like