如何在JavaScript中监听所有已打开WebSocket连接的消息

以下是可直接在浏览器开发者工具控制台运行的脚本，能捕获页面中已存在和后续新建的WebSocket连接的消息：

// 存储所有WebSocket实例的集合
const wsInstances = new Set();

// 重写WebSocket构造函数，自动记录并监听新创建的连接
const OriginalWebSocket = window.WebSocket;
window.WebSocket = function(...args) {
  const ws = new OriginalWebSocket(...args);
  wsInstances.add(ws);
  setupMessageListener(ws);
  return ws;
};

// 为WebSocket实例添加消息监听的通用逻辑
function setupMessageListener(ws) {
  // 保留页面原有消息回调，避免破坏网站功能
  const originalOnMessage = ws.onmessage;
  
  ws.onmessage = function(event) {
    // 在控制台打印捕获到的消息
    console.log(`[WebSocket消息] 连接地址: ${ws.url}`, event.data);
    
    // 执行页面原本的消息处理逻辑
    if (typeof originalOnMessage === 'function') {
      originalOnMessage.call(this, event);
    }
  };
}

// 扫描页面中已存在的WebSocket实例并添加监听
function collectExistingWSInstances() {
  // 遍历上下文查找WebSocket实例
  function scanContext(context) {
    try {
      Object.getOwnPropertyNames(context).forEach(key => {
        const value = context[key];
        if (value instanceof OriginalWebSocket && !wsInstances.has(value)) {
          wsInstances.add(value);
          setupMessageListener(value);
        }
      });
      
      // 扫描同域iframe内的实例（跨域iframe受同源策略限制无法访问）
      if (context.frames) {
        for (let i = 0; i < context.frames.length; i++) {
          try {
            scanContext(context.frames[i]);
          } catch (e) {
            // 跨域访问失败，忽略
          }
        }
      }
    } catch (e) {
      // 权限或上下文访问错误，忽略
    }
  }
  
  scanContext(window);
}

// 启动监听逻辑
collectExistingWSInstances();
console.log(`已监听 ${wsInstances.size} 个WebSocket连接`);

关键说明： #

• 已存在连接捕获：通过遍历全局上下文（主页面+同域iframe），定位所有已创建的WebSocket实例并绑定监听。
• 新连接自动监听：重写原生WebSocket构造函数，后续新建的连接会自动加入监听队列。
• 无侵入性：保留页面原有消息处理逻辑，不会干扰网站正常运行。
• 跨域限制：跨域iframe内的WebSocket实例受浏览器同源策略保护，无法捕获。

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