websocket.html 1.5 KB

1234567891011121314151617181920212223242526272829303132333435363738394041424344454647484950
  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. var on_message_read = function(e) {
  17. var lines = e.target.result.split('\n');
  18. for (var i = 0; i < lines.length - 1; i++) {
  19. var parts = lines[i].split(' ');
  20. var d = parts[0], x = parseFloat(parts[1]), y = parseFloat(parts[2]);
  21. if (!(d in data)) data[d] = [];
  22. data[d].push([x,y]);
  23. }
  24. var plots = [];
  25. for (var d in data) plots.push( { data: data[d].slice(data[d].length - 200) } );
  26. $.plot( $("#holder"), plots,
  27. {
  28. series: {
  29. lines: { show: true, fill: true },
  30. },
  31. yaxis: { min: 0 },
  32. } );
  33. s.send('');
  34. };
  35. s.onmessage = function(e) {
  36. //alert('got ' + e.data);
  37. var reader = new FileReader();
  38. reader.addEventListener("loadend", on_message_read);
  39. reader.readAsText(e.data);
  40. };
  41. };
  42. </script>
  43. </head>
  44. <body>
  45. <h3>Plot</h3>
  46. <p>(Only tested in Chrome)</p>
  47. <div id="holder" style="width:600px;height:300px"></div>
  48. </body>
  49. </html>