javascript - 在单独的函数中断开 websocket

Question

我有一个带有前端代码的 Web 应用程序，当用户单击复选框时，它会连接到 WebSocket。当他们再次单击它并且复选框选中的值变为 false 时，我想断开 websocket 的连接。用户可以在 ul 中列出多个项目，每个项目都有自己的复选框，因此他们可以连接多个项目以在 websocket 上进行流式传输。我将 websockets 收集在一个数组中并对其进行索引。当用户单击复选框时，客户端会正常连接到 websocket。当用户单击复选框断开连接时，出现以下错误

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();
    }
});