eventlet/examples/websocket.html

   1 <!DOCTYPE html>
   2 <html>
   3 <head>
   4 <!-- idea and code swiped from
   5 http://assorted.svn.sourceforge.net/viewvc/assorted/real-time-plotter/trunk/src/rtp.html?view=markup -->
   6 <script src="http://ajax.googleapis.com/ajax/libs/jquery/1.4.1/jquery.min.js"></script>
   7 <script src="http://people.iola.dk/olau/flot/jquery.flot.js"></script>
   8 <script>
   9 window.onload = function() {
  10     var data = {};
  11     var s = new WebSocket("ws://127.0.0.1:7000/data");
  12     s.onopen = function() {
  13         //alert('open');
  14         s.send('hi');
  15     };
  16     s.onmessage = function(e) {
  17       //alert('got ' + e.data);
  18       var lines = e.data.split('\n');
  19       for (var i = 0; i < lines.length - 1; i++) {
  20         var parts = lines[i].split(' ');
  21         var d = parts[0], x = parseFloat(parts[1]), y = parseFloat(parts[2]);
  22         if (!(d in data)) data[d] = [];
  23         data[d].push([x,y]);
  24       }
  25       var plots = [];
  26       for (var d in data) plots.push( { data: data[d].slice(data[d].length - 200) } );
  27       $.plot( $("#holder"), plots,
  28               {
  29                 series: {
  30                   lines: { show: true, fill: true },
  31                 },
  32                 yaxis: { min: 0 },
  33               } );
  34
  35       s.send('');
  36     };
  37 };
  38 </script>
  39 </head>
  40 <body>
  41 <h3>Plot</h3>
  42 <p>(Only tested in Chrome)</p>
  43 <div id="holder" style="width:600px;height:300px"></div>
  44 </body>
  45 </html>