Question

我有一个带有前端代码的web应用程序，当用户单击复选框时，该代码会连接到websocket。当他们再次单击它时，复选框选中的值变为false，我想断开WebSocket的连接。用户可以在ul中列出多个项目，并且每个项目都有自己的复选框，因此他们可以连接多个项目以在websocket上进行流式传输。我将websocket收集在一个数组中并对其进行索引。当用户单击复选框时，客户端将连接到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();
    }
});

断开网络套接字的单独功能

1 个答案: