Отключите веб-сокет в отдельной функции

Question

У меня есть веб-приложение с внешним кодом, которое подключается к веб-сокету, когда пользователь нажимает на флажок. Когда они снова щелкают по нему и значение флажка становится ложным, я хочу отключить веб-сокет. У пользователя может быть несколько элементов, перечисленных в ul, и у каждого элемента есть свой флажок, чтобы они могли подключать несколько элементов к потоку через веб-сокет. Я собираю веб-сокеты в массив и индексирую их. Когда пользователь нажимает на флажок, клиент подключается к веб-сокету нормально. Когда пользователь нажимает на флажок для отключения, я получаю следующую ошибку

WebSocket connection to 'ws://localhost:4000/' failed: WebSocket is closed before the connection is established.

  let tronToggle = Array.from(document.querySelectorAll("#tron-toggle"));
  tronToggle.forEach((item, index) => {
    let children = Array.from(item.children);
    let toolSet = {
      checkBox: children[0],
      map: children[1]
    };
    toolSet.checkBox.addEventListener("click", e => {
      loading();
      ws[index] = new WebSocket('ws://localhost:4000');
      ws[index].onopen=function(event){
        ws[index].send(e.target.parentNode.parentNode.dataset.id);
      }
      if (e.target.checked === true) {
        toolSet.map.classList.toggle("hidden");
        setMarkerPosition(e, index);
      } else {
        toolSet.map.classList.toggle("hidden");
        ws[index].close();
        loaded();
      }
    });
  });
});

Когда я помещаю логику websocket.close () в onopen (поэтому после ее запуска), websocket закрывается без проблем. Как я могу закрыть его на снятый флажок?

Answer 1

Вы открываете соединение каждый раз, когда устанавливается флажок.Итак, сначала вы проверите это и установите соединение.Затем вы щелкаете его снова, создаете другое соединение и немедленно закрываете его.

toolSet.checkBox.addEventListener("click", e => { 
    if (e.target.checked === true) {
        loading();
        ws[index] = new WebSocket('ws://localhost:4000');
        ws[index].onopen=function(event){
            ws[index].send(e.target.parentNode.parentNode.dataset.id);
        }
        toolSet.map.classList.toggle("hidden");
        setMarkerPosition(e, index);
    } else {
        toolSet.map.classList.toggle("hidden");
        ws[index].close();
        loaded();
    }
});