<!doctype html>
<html>

<body>
  <script src=" https://cdn.jsdelivr.net/npm/echarts@5.4.2/dist/echarts.min.js "></script>
  <div id="start">
    <p>Enter generated access key here</p>
    <div>
      <input id="access_key" type="text" placeholder="Access Key" required />
      <button onclick="consumer.start()">Start</button>
    </div>
  </div>
  <div id="waiting" class="hidden">Waiting for connection...</div>
  <div id="chart" class="hidden" style="width: 100%; height: 400px;"></div>
</body>

</html>
@import url("https://fonts.googleapis.com/css?family=Rubik:400,700");

body {
  font-family: Rubik, sans-serif;
}

.flex {
  display: flex;
}

.hidden {
  display: none;
}

class Consumer {
  constructor() {
    this.option = null;
    this.chart = null;
  }

  initChart() {
    // Initialize ECharts chart
    // https://echarts.apache.org/handbook/en/how-to/chart-types/scatter/basic-scatter
    this.chart = echarts.init(document.querySelector("#chart"));

    // Set chart options
    this.option = {
      dataZoom: [
        {
          type: "slider"
        },
        {
          type: "inside"
        }
      ],
      xAxis: {
        type: "value"
      },
      yAxis: {
        type: "value"
      },
      series: [
        {
          // type: 'line', // a little bit of update justter on ff
          type: "scatter",
          data: []
        }
      ]
    };
    this.chart.setOption(this.option);
  }

  start() {
    document.querySelector("#start").classList.add("hidden");
    document.querySelector("#waiting").classList.remove("hidden");

    const access_key = document.querySelector("#access_key").value;

    // Connect to WebSocket
    this.ws = new WebSocket(
      `wss://infinyon.cloud/wsr/v1/simple/consume?access_key=${access_key}`
    );

    this.ws.onopen = () => {
      document.querySelector("#waiting").classList.add("hidden");
      document.querySelector("#chart").classList.remove("hidden");
      this.initChart();
    };

    // Handle WebSocket message
    this.ws.onmessage = (event) => {
      const data = JSON.parse(event.data);
      this.option.series[0].data.push([data.x, data.y]);
      this.chart.setOption(this.option);
    };
  }
}

window.consumer = new Consumer();

External CSS

This Pen doesn't use any external CSS resources.

External JavaScript

This Pen doesn't use any external JavaScript resources.