FrankenPHP怎么防止页面重复创建订阅-php教程-PHP中文网

frankenphp mercure订阅重复创建的典型表现是页面刷新、后退/前进或spa路由切换时eventsource未销毁，导致多个相同url连接并存；应通过abortcontroller在新建前主动终止旧连接，并避免url中添加动态query参数。

frankenphp怎么防止页面重复创建订阅

FrankenPHP Mercure 订阅重复创建的典型表现

页面刷新、后退/前进、SPA 路由切换时，EventSource 实例没被销毁，导致多个相同 URL 的连接同时存在；浏览器 DevTools 的 Network 面板里看到多个 mercure?topic=... 请求持续 pending；服务端日志中同一客户端 IP 出现高频 mercure:subscribe 事件。这不是 FrankenPHP 的 Bug，而是前端未管理好 EventSource 生命周期的自然结果。

用 `AbortController` 主动终止旧连接

不能只靠 eventSource.close() —— 它不触发网络层中断，且无法覆盖未挂载前就发起的请求。必须在新建连接前显式 abort 上一个：

声明一个模块级或组件级的 abortController 变量（不要放在事件回调内）
每次调用 new EventSource(url, { signal }) 前，先执行 abortController.abort()
再新建 AbortController() 并赋值给该变量
确保 signal 传入 EventSource 构造函数（现代浏览器支持，FrankenPHP 无额外要求）

示例关键片段：

btpanel phpsite 宝塔面板PHP网站

宝塔面板 PHP 网站管理：站点创建、删除、启停、PHP 版本切换、域名管理、SSL证书管理、伪静态管理、数据库管理

下载

let abortController = new AbortController();

function connectToMercure(topic) {
  abortController.abort();
  abortController = new AbortController();

  const url = new URL('/.well-known/mercure', location.origin);
  url.searchParams.set('topic', topic);

  const es = new EventSource(url.toString(), { signal: abortController.signal });
  es.onmessage = (e) => console.log(e.data);
}

监听页面卸载与路由变化做兜底清理

仅靠 abort 不够：用户关闭标签页、切出浏览器、或 SPA 路由跳转时，JS 可能来不及执行。需双保险：

在 beforeunload 事件中调用 abortController.abort()（注意：此事件中不能再新建 controller）
使用 pagehide 替代 visibilitychange，它在页面被缓存（如安卓后台）时仍会触发
若用框架（如 Vue/React），在组件 unmounted 或 useEffect cleanup 中调用 abortController.abort()
避免在 unload 中发 fetch —— 大部分浏览器已禁止