如何在WebSocket建立连接前干净地关闭/中止连接？

直接调用ws.close()在连接建立前会触发浏览器错误日志，核心原因是连接还处于CONNECTING状态时，close操作会触发「未建立连接即关闭」的错误。可以通过以下步骤干净处理：

• 添加中止标记：给WebSocket实例关联一个标记，区分主动中止和意外错误。
• 状态判断+事件拦截：根据当前连接状态执行对应操作，并在error事件中过滤主动中止的情况。

示例代码：

const ws = new WebSocket(`${url}`);
let isAborted = false;

// 自定义错误处理，过滤主动中止的情况
ws.onerror = (event) => {
  if (isAborted) return; // 主动中止的错误直接忽略，不输出日志
  console.error('WebSocket 意外错误:', event);
};

// 连接建立后如果已标记中止，立即关闭
ws.onopen = () => {
  if (isAborted) {
    ws.close(1000, '用户主动中止连接');
  }
};

// 中止连接的函数
function abortWsConnection() {
  isAborted = true;
  // 根据当前状态处理
  switch(ws.readyState) {
    case WebSocket.OPEN:
      ws.close(1000, '用户主动中止连接');
      break;
    case WebSocket.CONNECTING:
      // 连接还在建立中，靠后续onopen/onerror事件处理
      break;
    default:
      // 已关闭或正在关闭，无需操作
      break;
  }
}

// 模拟用户关闭视图的场景，调用中止函数
setTimeout(() => abortWsConnection(), random);

关键说明 #

1. WebSocket状态值：
   • 0 (CONNECTING): 正在连接中
   • 1 (OPEN): 连接已建立
   • 2 (CLOSING): 正在关闭
   • 3 (CLOSED): 已关闭
2. 为什么不直接在CONNECTING状态调用close？
   直接调用会触发浏览器默认的错误日志，因为此时连接还未完成握手，浏览器会判定为连接失败。通过标记+事件拦截的方式，可以避免这个日志输出。
3. 资源占用问题：
   虽然无法直接取消浏览器正在进行的TCP握手，但标记后连接建立会立即关闭，失败则忽略错误，不会额外消耗过多资源。

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