如何通过JavaScript列出所有WebSocket连接并拦截其收发的消息？

原生JavaScript没有提供直接获取页面所有已创建WebSocket实例的内置API，我们可以通过劫持WebSocket全局构造函数的方式，实现对新创建连接的跟踪、以及收发消息的拦截。该方案仅对劫持逻辑执行后新创建的WebSocket生效，如果你需要捕获页面全部连接，需要在页面初始化加载前执行以下代码，再加载页面。

核心劫持代码 #

将以下代码粘贴到控制台执行即可生效：

// 保存原生WebSocket构造函数
window.OriginalWebSocket = window.WebSocket;
// 存储所有活跃WebSocket连接的全局数组
window.activeWebSockets = [];

// 重写WebSocket构造函数
window.WebSocket = function(url, protocols) {
  // 调用原生构造函数创建实例
  const wsInstance = protocols ? new OriginalWebSocket(url, protocols) : new OriginalWebSocket(url);
  // 将新实例加入活跃连接列表
  activeWebSockets.push(wsInstance);

  // 拦截发送消息
  const originalSend = wsInstance.send;
  wsInstance.send = function(data) {
    // 此处可自定义发送消息的处理逻辑，比如打印、修改
    console.log('[WebSocket 发送消息]', '目标地址：' + url, '内容：', data);
    // 调用原生send方法执行实际发送
    return originalSend.call(this, data);
  };

  // 拦截接收消息（onmessage回调形式）
  const originalOnMessage = wsInstance.onmessage;
  wsInstance.onmessage = function(event) {
    // 此处可自定义接收消息的处理逻辑，比如打印、修改event.data
    console.log('[WebSocket 接收消息]', '来源地址：' + url, '内容：', event.data);
    // 调用原有的onmessage回调
    if (originalOnMessage) return originalOnMessage.call(this, event);
  };

  // 拦截接收消息（addEventListener绑定形式）
  const originalAddEventListener = wsInstance.addEventListener;
  wsInstance.addEventListener = function(type, listener, options) {
    if (type === 'message') {
      const wrappedListener = function(event) {
        // 自定义接收消息处理逻辑
        console.log('[WebSocket 接收消息(事件绑定)]', '来源地址：' + url, '内容：', event.data);
        return listener.call(this, event);
      };
      return originalAddEventListener.call(this, type, wrappedListener, options);
    }
    return originalAddEventListener.call(this, type, listener, options);
  };

  // 连接关闭时从活跃列表移除
  wsInstance.addEventListener('close', () => {
    const index = activeWebSockets.indexOf(wsInstance);
    if (index > -1) activeWebSockets.splice(index, 1);
  });

  return wsInstance;
};

// 继承原生WebSocket的静态属性与方法
Object.assign(window.WebSocket, window.OriginalWebSocket);

常用操作 #

• 列出所有当前活跃的WebSocket连接：执行console.log(window.activeWebSockets)，数组内的每个实例都包含原生WebSocket的所有属性，比如url、readyState、bufferedAmount等
• 手动给指定连接发送消息：执行window.activeWebSockets[对应索引].send(你要发送的内容)，索引对应activeWebSockets数组里的连接位置
• 恢复原生WebSocket逻辑，停止拦截：执行window.WebSocket = window.OriginalWebSocket; window.activeWebSockets = []

注意：如果需要劫持页面加载阶段就创建的WebSocket，需要在页面资源加载前执行上述劫持代码，可通过用户脚本管理器配置注入时机实现。

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