Real-time plots using websockets, python, javascript and Google Charts

There are many examples of use of websockets out there, however most of them are cumbersome or too complex for newbies.

Here is an extremely simple example of websockets I made, which consists of a server (implemented both in PERL and Python, up to you the choice) that pushes a message (i.e. randomly generated values) to the client upon a fixed time interval:

https://github.com/albertobeta/UberSimpleWebsockets

Two clients are available in this example:

  • client-JustLog.html displays on screen the log with the messages received;
  • client-Chart.html shows a bar chart (based on Google Charts) which updates in real time with the data received.

Configuration

If you are running this code in a local host (i.e. your local machine) no configuration is needed. Otherwise, you can change ports and host from the config sections in the code.

Usage

  1. SERVER: choose either send.pl (PERL) or send.py (Python) and run ONE of them from the terminal: type eitherperl send.pl or python send.py
  2. CLIENT: Open one of the two clients (but they also work at the same time in two separate tabs) using a modern browser (e.g. tested and working with Chrome v.42+). Notice that the client must be opened after the server is running (otherwise, you will have to push the “reconnect” button).
  3. See the data pushed automatically from the server to the client via websockets :bowtie: (Optionally, you might want to use Firebug with client-Chart.html to see the console logs)

Requirements

  • PERL or Python
  • A modern browser that supports websockets (e.g. Chrome v.42+)

Notice:

  • The PERL implementation of the server requires Net::WebSocket::Server. In Mac OSX it can be installed using the command: sudo perl -MCPAN -e 'install Net::WebSocket::Server'
  • The Python implementation of the server requires Tornado that can be installed using pip (pip install tornado) or manually:
tar xvzf tornado-4.1.tar.gz
cd tornado-4.1
python setup.py build
sudo python setup.py install

Published by

Alberto Betella

http://www.betella.net

2 thoughts on “Real-time plots using websockets, python, javascript and Google Charts”

  1. Hi,

    Thanks for this extremely simple tutorial. I’ve been reading up and think that websocket is the appropriate technology for the application I’m working on. I’m trying to create a bar graph with ~30 data points that has a refresh rate that looks pretty smooth to the eye. Maybe something like 24fps or every 40ms or so. Maybe I can plot less often if there were some sort of smooth transitions. However, in testing this code, it seems as though I’m limited to around 200ms in Chrome and Firefox before memory starts growing out of bounds. Anything lower than 200ms looks like it doesn’t display and is likely buffered…. Just curious where the performance bottleneck is and if it is something that can be overcome using websockets and a browser? Perhaps this should be an applicaion instead of in browser….. Thanks in advance for any insight!

  2. Hi,

    after i run the send.py and access localhost:9000
    the browser show

    Can “Upgrade” only to “WebSocket”.

    idk what happened and how to fix it,

    Thanks

Leave a Reply

Your email address will not be published. Required fields are marked *