运行http4s WebSocket示例后，Chrome控制台发送消息报错：仍处于CONNECTING状态

这个问题我碰到过好多次啦，本质是WebSocket的异步连接特性导致的——你刚创建WebSocket实例就立刻调用send，此时连接还处于CONNECTING状态（还没进入OPEN就绪状态），浏览器自然会抛出这个DOM异常。

快速修复方案 #

你需要等待WebSocket连接成功建立后，再发送消息。利用WebSocket的onopen事件就能实现这一点，修改你的代码如下：

var ws = new WebSocket("ws://localhost:8080/http4s/wsecho");
// 当连接成功打开后再发送消息
ws.onopen = function() {
  ws.send("Hi");
  console.log("消息已成功发送到服务器");
};

进阶调试与监听 #

为了更清晰地掌握连接状态，你可以添加完整的事件监听，方便排查后续可能出现的问题：

var ws = new WebSocket("ws://localhost:8080/http4s/wsecho");

// 连接成功打开
ws.onopen = function() {
  console.log("WebSocket连接就绪，当前状态：", ws.readyState); // readyState=1代表OPEN
  ws.send("Hi");
};

// 收到服务器消息
ws.onmessage = function(event) {
  console.log("收到服务器回复：", event.data);
};

// 连接关闭
ws.onclose = function() {
  console.log("WebSocket连接已关闭");
};

// 连接出错
ws.onerror = function(error) {
  console.error("WebSocket发生错误：", error);
};

额外检查点 #

别忘了确认你的http4s WebSocket服务确实在ws://localhost:8080/http4s/wsecho端点正常运行，如果服务没启动或者路径配置错误，连接会一直卡在CONNECTING状态，甚至直接触发error事件。

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