websocket在React中多次连接

Question

我在 react 中使用 Websocket 构建了一个聊天应用程序，但是，每次我刷新页面 F5 时都会建立一个新连接。它完全按预期工作，但消耗的比应有的要多得多。 有没有办法在用户刷新页面时删除现有连接？ （避免多个无用的连接）这里是我建立连接的地方：

  useEffect(() => {
    if (!userInfo) {
      history.push("/login");
    } else {
      if (receiver_id && typeof receiver_id == "number") {
        const url =
          "ws://localhost:8000" +
          "/ws/chat/" +
          receiver_id +
          "/?token=" +
          userInfo.token;
        ws.current = new WebSocket(url);
        if (!connected) {
          ws.current.onopen = function (event) {
            console.log("Connected");
          };
          setConnected(true);
        }

        ws.current.onmessage = function (event) {
          console.log(event);
          console.log("Recieved");
          const dataFromServer = JSON.parse(event.data);
        
        };

        ws.current.onclose = function (event) {
          console.log("Disconnected");
        };

        ws.current.onerror = function (event) {
          console.log("Something is not working, retry.");
        };
      }
    }
  }, [receiver_id, history, userInfo]);

Answer 1

您应该在清理功能中终止连接。

类似这样的：

return () => {
      ws.current.disconnect();
    };