如何在浏览器中识别并强制终止挂起的WebSocket连接？

方法1：通过猴子补丁跟踪并强制关闭WebSocket实例 #

浏览器没有原生API直接获取所有活跃的WebSocket连接，我们可以通过重写原生WebSocket构造函数来跟踪目标连接：

// 全局存储AWS Transcribe相关的WebSocket实例
const activeTranscribeWS = new Set();

// 保存原生WebSocket构造函数
const OriginalWebSocket = window.WebSocket;

// 重写WebSocket，仅记录Transcribe相关连接
window.WebSocket = function(...args) {
  const ws = new OriginalWebSocket(...args);
  // 通过URL判断是否为Transcribe的连接（根据实际URL调整匹配规则）
  if (args[0].includes('transcribe')) {
    activeTranscribeWS.add(ws);
    // 连接关闭/出错时自动移除实例
    ws.addEventListener('close', () => activeTranscribeWS.delete(ws));
    ws.addEventListener('error', () => activeTranscribeWS.delete(ws));
  }
  return ws;
};

需要强制关闭时，遍历集合调用close方法：

// 批量关闭所有挂起的Transcribe WebSocket连接
function forceCloseTranscribeWS() {
  activeTranscribeWS.forEach(ws => {
    if (ws.readyState === WebSocket.OPEN || ws.readyState === WebSocket.CONNECTING) {
      ws.close(1000, 'Forced close due to SDK bug');
      activeTranscribeWS.delete(ws);
    }
  });
}

你可以在组件卸载时（比如语音转文本组件的useEffect清理函数）调用这个方法，或者在需要终止连接的时机触发。

方法2：结合SDK客户端尝试手动终止 #

虽然SDK存在bug，但可以尝试调用客户端的销毁方法或取消命令：

// 假设已创建TranscribeStreamingClient实例
const client = new TranscribeStreamingClient({ /* 你的配置 */ });

// 尝试销毁客户端
client.destroy();

// 如果发送了StartStreamTranscriptionCommand，可尝试取消命令Promise
const command = new StartStreamTranscriptionCommand(/* 参数 */);
const commandPromise = client.send(command);

// 部分场景下可通过abort取消请求
if (commandPromise.abort) {
  commandPromise.abort();
}

方法3：开发环境手动调试关闭 #

在Chrome开发者工具的Network面板，筛选WS类型，找到对应的Transcribe连接，右键选择Cancel即可手动关闭单个挂起的连接，适合开发阶段临时处理。

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