HTML5 Websocket 在发送消息之前等待连接和就绪状态更改

Posted 2023-02-16

【中文标题】HTML5 Websocket 在发送消息之前等待连接和就绪状态更改

【英文标题】：HTML5 Websocket wait for connection and readystate change before sending message

【发布时间】：2017-05-19 08:00:46

【问题描述】：

我在我的 React 应用程序中使用 Websockets，我必须连接到一个 Web 套接字，然后在连接后立即发送一条消息。但我的代码不同步

在这里

ws = new WebSocket(uri);
ws.send('my msg');

有没有办法等待连接建立和就绪状态改变！ 谢谢！

【参考方案1】：

来自the docs on MDN：

// Create WebSocket connection.
const socket = new WebSocket('ws://localhost:8080');

// Connection opened
socket.addEventListener('open', function (event) 
    socket.send('Hello Server!');
);

【参考方案2】：

我正在执行以下操作来准备我的 WebSocket，以便在许多其他地方使用，不仅仅是在 WebSocket readyState 更改后立即：

// https://***.com/questions/951021/what-is-the-javascript-version-of-sleep
const sleep = (ms) => 
  return new Promise(resolve => setTimeout(resolve, ms));
;

// (inside of async function)...

  const ws = new WebSocket(<webSocketServerUri>);

  let timeToConnect = 0;
  while (ws.readyState !== ws.OPEN) 
    await sleep(1);
    ++timeToConnect;
  ;

  console.log('The WebSocket took ' + timeToConnect + ' milliseconds to connect.');

// (inside of async function)...
// ...
// (some other place in the code where 'ws' is accessible)...

  ws.send('my msg');

// (some other place in the code where 'ws' is accessible)...