无法在 'WebSocket' 上执行 'send'：仍处于连接状态

Question

我是 React js 开发的新手，正在尝试将 WebSocket 集成到我的应用程序中。

但在连接期间发送消息时出现错误。

我的密码是

  const url = `${wsApi}/ws/chat/${localStorage.getItem("sID")}/${id}/`;


  const ws = new WebSocket(url);

  ws.onopen = (e) => {
    console.log("connect");
  };

  ws.onmessage = (e) => {
    const msgRes = JSON.parse(e.data);
    setTextMessage(msgRes.type);
    // if (msgRes.success === true) {
    //   setApiMessagesResponse(msgRes);
    // }
    console.log(msgRes);
  };
  // apiMessagesList.push(apiMessagesResponse);

  // console.log("message response", apiMessagesResponse);
  ws.onclose = (e) => {
    console.log("disconnect");
  };

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

  const handleSend = () => {
    console.log(message);
    ws.send(message);
  };

遇到这个错误

Failed to execute 'send' on 'WebSocket': Still in CONNECTING state

Answer 1

我猜你只有打开了才可以用ws发送数据，而且你不检查它什么时候打开。

基本上你要求打开，但你在服务器说它打开之前发送了一条消息（它不是即时的，你不知道它需要多少时间;））

我认为你应该添加一个类似 let open = false;

的变量

并重写 onopen

ws.onopen = (e) => {
    open = true;
    console.log("connect");
  };

然后在你的逻辑中你只能在 open 等于 true 时发送消息

不要忘记错误处理 ;)

Answer 2

听起来您是在套接字完成连接过程之前调用 ws.send。您需要等待 open event/callback，或检查每个 docs 的 readyState 并在 readyState 更改后排队发送，即在 [=13= 之后] 回调已触发。

不建议您这样做，但它可能会有所帮助：

const handleSend = () => {
  if (ws.readyState === WebSocket.OPEN) {
    ws.send()
  } else {
    // Queue a retry
    setTimeout(() => { handleSend() }, 1000)
  }
};

正如洛根提到的，我的第一个例子是懒惰的。我只是想让 OP 畅通无阻，我相信读者足够聪明，能够理解如何从那里获取它。因此，请确保适当地处理可用状态，例如，如果 readyState 是 WebSocket.CONNECTING 则注册一个侦听器：

const handleSend = () => {
  if (ws.readyState === WebSocket.OPEN) {
    ws.send()
  } else if (ws.readyState == WebSocket.CONNECTING) {
    // Wait for the open event, maybe do something with promises
    // depending on your use case. I believe in you developer!
    ws.addEventListener('open', () => handleSend())
  } else {
    // etc.
  }
};

无法在 'WebSocket' 上执行 'send'：仍处于连接状态

Failed to execute 'send' on 'WebSocket': Still in CONNECTING state

javascript

websocket

web

ecmascript-6

reactjs