Получать неправильные предметы, используя веб-сокеты и PlotlyJs

Question

я пытаюсь реализовать граф, который получает данные из веб-сокета в py:

async def wsjson(websocket, path):
    while True:

        data = datetime.datetime.now()

        randomSPO2 = random.randint(1,101)
        randomBPM =  random.randint(1,200)
        randomPI = random.randint(1, 20)
        randomDESAT = random.randint(1,101)
        sensors_data = {'type': {
                    'Saturimetro' :  {
                            'property': {
                                'SPO2': randomSPO2,
                                'BPM' : randomBPM,
                                'PI' : randomPI,
                                'DESAT' : 2,
                                'Port' : "",
                                'Datetime': data.strftime("%x"),
                                'status' : 1,
                                }
                            }
                        }       
                }         
        with open("websockets.json","w") as json_file:
            json.dump(sensors_data, json_file)
        print_json = json.dumps(sensors_data)
        await websocket.send(print_json)
        await asyncio.sleep(random.random() * 3)
start_server = websockets.serve(wsjson, '127.0.0.1', 5678)
asyncio.get_event_loop().run_until_complete(start_server)
asyncio.get_event_loop().run_forever()

и это моя функция js, которая получает данные и реализует график в реальном времени, используя Plotly js:

function createGraphFiO2(flag) {

  var ws = new WebSocket("ws://127.0.0.1:5678/");

  var fio2 = 0;
  var obj = [];
  if (!flag) {   
    ws.onmessage = function (event) {
      obj = JSON.parse(event.data);
      fio2 = parseFloat(obj.type.Ossimetro.property.O2);
    };
  }
  else {
    ws.close()
    fio2 = 0;
  }
  var time = new Date();

  FiO2data = [{
    x: [time],
    y: [fio2],
    mode: 'lines',
    line: { color: '#80CAF6' }
  }],

    FiO2layout = {
      autosize: true,
      //  width: 1200,
      // height: 400,
      /*   margin: {l: 50, r: 50, b: 20, t: 20, pad: 4 },*/
      yaxis: {
        fixedrange: true //disabilita zoom
      },
      xaxis: {
        fixedrange: true
      }

    };


  Plotly.plot('graphFiO2', FiO2data, FiO2layout);


    var cnt = 0;

    var interval = setInterval(function () {

      var time = new Date();

      var update = {
        x: [[time]],
        y: [[fio2]]
      }

      var olderTime = time.setMinutes(time.getMinutes() - 1);
      var futureTime = time.setMinutes(time.getMinutes() + 1);

      var minuteView = {
        xaxis: {
          type: 'date',
          range: [olderTime, futureTime]
        }
      };

      Plotly.relayout('graphFiO2', minuteView);
      Plotly.extendTraces('graphFiO2', update, [0])

      if (cnt === 100) clearInterval(interval);
    }, 6000);
}

Вызывается с помощью нажатия кнопки html:

<script type="text/javascript">

    flag = false;

    function startTest() {


      if (!flag) {
        document.getElementById('pauseBtn').classList.remove("disabled");
        createGraphFiO2(flag);
        flag = true;
        document.getElementById('startBtn').innerText = "Stop"
      }
      else {
        document.getElementById('pauseBtn').classList.add("disabled");

        createGraphFiO2(flag);
        flag = false;
        document.getElementById('startBtn').innerText = "Start"
      }

    }
  </script>

Я знаю, что кода много, но я не понимаю, в чем проблема.

Каждый раз, когда я нажимаю кнопку «Пуск», я получаю множество трасс вместо одной трассы, и когда я нажимаю «Стоп», веб-розетка не заканчивается.

Вот мой вывод: