CherryPy Recipes / web / websockets / http_traffic / index.html

<html>
    <head>
      <script type="application/javascript" src="http://ajax.googleapis.com/ajax/libs/jquery/1.7.1/jquery.min.js"></script>
      <script type="application/javascript" src="https://raw.github.com/joewalnes/smoothie/master/smoothie.js"></script>
      <script type="application/javascript">
        $(document).ready(function() {
	  var dummytimer = null;
	
	  var smoothie = new SmoothieChart({ grid: { strokeStyle: 'rgb(125, 0, 0)', fillStyle: 'rgb(60, 0, 0)', lineWidth: 1, millisPerLine: 250, verticalSections: 6 } });
	  smoothie.streamTo(document.getElementById("metrics"));
	  var worker1 = new TimeSeries();
	  var worker2 = new TimeSeries();
	  var worker3 = new TimeSeries();

          websocket = "ws://localhost:8090/metrics";
          if (window.WebSocket) {
            ws = new WebSocket(websocket);
          }
          else if (window.MozWebSocket) {
            ws = MozWebSocket(websocket);
          }
          else {
            console.log("WebSocket Not Supported");
            return;
          }

          window.onbeforeunload = function(e) {
            ws.close(1000, "Client left");
                 
            if(!e) e = window.event;
            e.stopPropagation();
            e.preventDefault();
          };
          ws.onmessage = function (evt) {
	    var now = new Date().getTime();
	    $("#data").text(evt.data);
	    var data = $.parseJSON(evt.data);
	    worker1.append(now, data[0]["Bytes Written"]);
	    worker2.append(now, data[1]["Bytes Written"]);
	    worker3.append(now, data[2]["Bytes Written"]);
          };
          ws.onopen = function() {
	    smoothie.addTimeSeries(worker1, { strokeStyle: 'rgb(0, 255, 0)', fillStyle: 'rgba(0, 255, 0, 0.4)', lineWidth: 3 });
	    smoothie.addTimeSeries(worker2, { strokeStyle: 'rgb(255, 0, 255)', fillStyle: 'rgba(255, 0, 255, 0.3)', lineWidth: 3 });
	    smoothie.addTimeSeries(worker3, { strokeStyle: 'rgb(0, 0, 255)', fillStyle: 'rgba(0, 255, 255, 0.8)', lineWidth: 3 });
	
	    var dummytimer = setInterval(function() {
	       $.ajax({url: "http://localhost:8090/dummy"})
	    }, 1000);
          };
          ws.onclose = function(evt) {
	    clearInterval(dummytimer);
          };
        });
      </script>
    </head>
    <body>
      <canvas id="metrics" width="900" height="400"></canvas>
      <p id="data" />
    </body>
    </html>
Tip: Filter by directory path e.g. /media app.js to search for public/media/app.js.
Tip: Use camelCasing e.g. ProjME to search for ProjectModifiedEvent.java.
Tip: Filter by extension type e.g. /repo .js to search for all .js files in the /repo directory.
Tip: Separate your search with spaces e.g. /ssh pom.xml to search for src/ssh/pom.xml.
Tip: Use ↑ and ↓ arrow keys to navigate and return to view the file.
Tip: You can also navigate files with Ctrl+j (next) and Ctrl+k (previous) and view the file with Ctrl+o.
Tip: You can also navigate files with Alt+j (next) and Alt+k (previous) and view the file with Alt+o.