index.html

<!DOCTYPE html>
<html>
  <head>
    <meta charset="UTF-8" />
    <meta name="viewport" content="width=device-width, initial-scale=1" />
    <title>Layer7 - DSTAT</title>
    <style>
      html,
      body {
        height: 100%;
        margin: 0;
      }

      body {
        display: flex;
        align-items: center;
        justify-content: center;
        flex-direction: column;
      }

      body > div {
        width: 100%;
      }

      #chart {
        width: 80%;
        margin: auto;
      }

      #info {
        margin-top: 2em;
        text-align: center;
        font-family: Arial, Helvetica, sans-serif;
      }
    </style>
  </head>

  <body>
    <div>
      <h2 id="info"></h2>
      <div id="chart"></div>
    </div>
    <script src="https://code.highcharts.com/highcharts.js"></script>
    <script src="https://code.highcharts.com/modules/exporting.js"></script>
    <script>
      window.onload = () => {
        let info = document.getElementById("info");

        let chart = Highcharts.chart("chart", {
          exporting: {
            enabled: true,
          },
          chart: {
            type: "area",
          },
          title: {
            text: "Layer7 DSTAT",
          },
          xAxis: {
            type: "datetime",
          },
          yAxis: {
            title: {
              text: "",
            },
          },
          series: [
            {
              name: "Requests",
              data: [],
            },
          ],
        });

        info.innerText = "Capturing requests from " + location.host + "/dstat";

        let ws = new WebSocket(
          (location.protocol === "https:" ? "wss" : "ws") + "://" + location.host + "/"
        );

        ws.onmessage = (event) => {
          let requests = Number(event.data);
          let time = new Date().getTime();
          chart.series[0].addPoint([time, requests], true, chart.series[0].points.length > 60);
        };
      };
    </script>
  </body>
</html>