javascript - websocket.send（）在reactjs中执行websocket.send时断开连接？

Question

我在我的 reactjs 应用程序中使用 WebSocket，但在使用 WebSocket.send() 时遇到问题。

如果您不知道答案，请为我的问题投票，这样 StackOverflow 不会贬低我的问题

这是我的代码

let ws;

const PushNotifications = () => {
  const [show, setShow] = useState(true);
  const [image, setImage] = useState(null);
  const [title, setTitle] = useState("");
  const [message, setMessage] = useState("");
  const [base64Image, setBase64Image] = useState("");

  ws = new WebSocket("ws://192.168.18.112:8000/ws/notification/");

  const imageUpload = async (e) => {
    setImage(e.target.files[0]);
    console.log(image);
    let base64 = await convertBase64(image);
    setBase64Image(base64);
    console.log(base64Image);
  };

  const convertBase64 = (file) => {
    return new Promise((resolve, reject) => {
      if (file) {
        const fileReader = new FileReader();
        fileReader.readAsDataURL(file);
        fileReader.onload = () => {
          resolve(fileReader.result);
        };
        fileReader.onerror = (error) => {
          reject(error);
        };
      }
    });
  };

  const sendNotification = (e) => {
    e.preventDefault();
    console.log("click");
    // let data = { image: base64Image, title: title, message: message };
    if (ws.readyState === WebSocket.OPEN) {
      ws.send("data");
      console.log("Sending notification");
    } else if (ws.readyState === WebSocket.CONNECTING) {
      ws.addEventListener("open", () => sendNotification());
      console.log("Connecting state");
      console.log("Not Send");
    } else {
      console.log("nothing happen");
    }
  };

  ws.onmessage = (e) => {
    console.log(e);
    let { data } = e;
    let messageInfo = JSON.parse(data);
    console.log(messageInfo, "msg");
  };

  ws.onclose = (e) => {
    console.log("disconnect:", e);
  };

  ws.onerror = (e) => {
    console.log(e);
  };

  useEffect(() => {
    ws.onmessage = (e) => {
      console.log(e);
      let { data } = e;
      let messageInfo = JSON.parse(data);
      console.log(messageInfo, "msg");
    };
    ws.onopen = (e) => {
      console.log("connect");
    };

    return () => {
      ws.close = (e) => {
        console.log(e);
      };
    };
  }, [image]);

  return (
<div> 
{....} 

基本上，当我按下发送消息的按钮时，控制台的响应是“发送通知”，然后 WebSocket 突然关闭。我的问题是 ws.send() 没有执行以及为什么 WebSocket 突然断开连接。它的后端也是用 Django 构建的。

标签： javascriptreactjswebsocket