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

websocket 在 React 中多次连接

websocket connecting multiple times in React

websocket

reactjs

react-hooks

use-effect