WebSocket同步连接场景下onmessage事件未触发问题求助

你遇到的核心问题是JavaScript的单线程事件循环机制：你的while(!msgAck)死循环会持续霸占主线程，浏览器根本没有机会去处理WebSocket的消息事件——也就是说，onmessage回调完全没被执行的机会，msgAck永远不会变成true，循环自然停不下来。

想要实现"等待预期消息再继续流程"的效果，不能用同步阻塞的循环，得用JavaScript的异步机制来实现。最直观的方式是用Promise结合async/await，让代码写法看起来像同步，但实际是异步非阻塞的。

改造后的代码示例 #

const connection = new WebSocket('ws://' + location.hostname + ':8888/');

// 封装一个等待指定消息的函数
function waitForMessage(expectedMsg) {
  return new Promise((resolve) => {
    // 定义临时的消息处理函数
    const handler = (event) => {
      if (event.data === expectedMsg) {
        // 收到预期消息后，移除监听并resolve
        connection.removeEventListener('message', handler);
        resolve();
      }
    };
    connection.addEventListener('message', handler);
  });
}

async function requestOk() {
  connection.send("somecmd");
  // 等待服务器返回"ok"后再继续
  await waitForMessage("ok");
  console.log("收到服务器的ok响应，继续执行后续流程");
}

// 执行流程
requestOk().catch(err => console.error("请求出错:", err));

代码说明 #

1. waitForMessage函数：返回一个Promise，当WebSocket收到指定消息时，会触发resolve，同时移除对应的消息监听（避免内存泄漏）。
2. async/await：让requestOk函数可以"等待"Promise完成，写法上和同步代码类似，但不会阻塞主线程，浏览器能正常处理WebSocket的消息事件。
3. 错误处理：用.catch捕获可能的异常（比如连接断开、超时等情况，你还可以给Promise加上超时逻辑，避免无限等待）。

可选的超时优化 #

如果担心服务器一直不返回消息导致程序卡住，可以给Promise加上超时限制：

function waitForMessage(expectedMsg, timeout = 5000) {
  return new Promise((resolve, reject) => {
    const timer = setTimeout(() => {
      connection.removeEventListener('message', handler);
      reject(new Error(`等待消息超时（${timeout}ms）`));
    }, timeout);

    const handler = (event) => {
      if (event.data === expectedMsg) {
        clearTimeout(timer);
        connection.removeEventListener('message', handler);
        resolve();
      }
    };
    connection.addEventListener('message', handler);
  });
}

这样如果超过指定时间没收到"ok"，Promise会reject，你可以在.catch里处理超时情况。

内容的提问来源于stack exchange，提问作者Lucas Bacelo