如何获取浏览器中所有已打开的EventSource？能否全局监听其事件？

一、能否获取所有已打开的EventSource实例？ #

原生浏览器没有提供类似window.frames的原生API直接获取所有活跃的EventSource实例，但可以通过重写EventSource构造函数手动追踪所有实例：

实现代码 #

// 保存原生EventSource构造函数
const OriginalEventSource = window.EventSource;
// 全局数组存储所有活跃的EventSource实例
window.activeEventSources = [];

// 重写EventSource构造函数
window.EventSource = function(url, options) {
  const esInstance = new OriginalEventSource(url, options);
  // 将实例加入全局数组
  window.activeEventSources.push(esInstance);

  // 监听实例关闭事件，从数组中移除已关闭的实例
  esInstance.addEventListener('close', () => {
    const index = window.activeEventSources.indexOf(esInstance);
    if (index !== -1) {
      window.activeEventSources.splice(index, 1);
    }
  });

  return esInstance;
};

注意事项 #

• 这段代码必须在任何创建EventSource实例的脚本之前执行，否则无法追踪早于该脚本创建的实例。
• 页面包含同域iframe时，可遍历window.frames，访问每个frame的activeEventSources数组并合并，从而获取所有iframe内的实例；跨域iframe受同源策略限制，无法访问其内部变量。

二、能否创建全局事件监听器监听所有EventSource事件？ #

EventSource的事件不会向上冒泡到document或window层面，无法通过在全局元素上绑定事件捕获来监听所有实例的事件。但同样可以通过重写构造函数，在每个新创建的实例上统一绑定全局处理逻辑：

实现代码 #

// 全局事件处理函数，可自定义逻辑
function globalEventSourceHandler(event) {
  console.log(`全局捕获EventSource事件: ${event.type}，来源URL: ${event.target.url}`);
  // 这里可添加统一日志上报、错误监控等逻辑
}

// 保存原生构造函数并执行重写
const OriginalEventSource = window.EventSource;
window.activeEventSources = [];

window.EventSource = function(url, options) {
  const esInstance = new OriginalEventSource(url, options);
  window.activeEventSources.push(esInstance);

  // 为实例绑定所有标准EventSource事件的全局处理函数
  const eventTypes = ['open', 'message', 'error', 'close'];
  eventTypes.forEach(type => {
    esInstance.addEventListener(type, globalEventSourceHandler, true);
  });

  // 实例关闭时移除全局监听，避免内存泄漏
  esInstance.addEventListener('close', () => {
    const index = window.activeEventSources.indexOf(esInstance);
    if (index !== -1) {
      window.activeEventSources.splice(index, 1);
    }
    eventTypes.forEach(type => {
      esInstance.removeEventListener(type, globalEventSourceHandler, true);
    });
  });

  return esInstance;
};

说明 #

• 这种方式能覆盖所有后续创建的EventSource实例的标准事件，若需监听自定义事件，只需在eventTypes数组中添加对应的事件名即可。
• 同域iframe可在其内部执行相同的重写逻辑来监听内部的EventSource事件，跨域iframe则无法实现。

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