JavaScript 中 SSE 怎么在移动端 H5 页面中处理屏幕熄灭后的网络重连逻辑-js教程-PHP中文网

移动端h5使用sse时需手动接管连接生命周期：监听页面可见性（visibilitychange）和网络状态（online/offline），隐藏时关闭eventsource，恢复可见且联网后延迟300–800ms重建；采用指数退避重连（初始1s，翻倍至最大30s），并限制最大重试次数或总时长。

javascript 中 sse 怎么在移动端 h5 页面中处理屏幕熄灭后的网络重连逻辑

移动端 H5 使用 SSE（Server-Sent Events）时，屏幕熄灭或页面进入后台会导致浏览器暂停 JavaScript 执行、网络连接中断（尤其是 iOS Safari 会主动关闭 EventSource 连接），从而断开 SSE 流。重连不能依赖默认的 EventSource 自动重试机制（它只在连接意外关闭时重试，且重试间隔不可控，后台状态下根本不会触发），必须手动接管连接生命周期并结合可见性与网络状态做精细化控制。

监听页面可见性 + 网络状态，主动管理连接

当页面被隐藏（如锁屏、切到其他 App）时，visibilitychange 事件会被触发；恢复可见时需判断是否需要重建连接。同时配合 online/offline 事件感知网络变化：

页面隐藏（document.hidden === true）时，立即 eventSource.close() 并清空引用，避免残留连接或内存泄漏
页面重新可见（document.hidden === false）且 navigator.onLine === true 时，延迟 300–800ms 后尝试重建连接（避开系统唤醒抖动）
监听 online 事件，在网络恢复后若页面可见，也触发重连（比如用户从地铁无网区出来）

实现带退避策略的手动重连循环

不要依赖 EventSource.reconnectDelay（后台不生效，iOS 常被忽略）。应封装自己的重连逻辑，使用指数退避防止服务端冲击：

Java Maven Code Review

审查Java Maven项目（ZIP压缩包或GitLab仓库URL），检查代码规范、命名、模块边界、可维护性问题以及重复代码。

下载

初始重试间隔设为 1000ms，每次失败翻倍（最大不超过 30s）
每次重连前检查 document.hidden 和 navigator.onLine，任一为 false 则暂停重试，等待下次可见/联网事件
设置最大重试次数（如 10 次）或超时总时长（如 5 分钟），避免无限挂起
示例关键逻辑：

let retryCount = 0;
const maxRetries = 10;
let reconnectTimer = null;
function connect() {
  if (document.hidden || !navigator.onLine) return;
  eventSource = new EventSource('/api/sse');
  eventSource.onopen = () => { retryCount = 0; };
  eventSource.onerror = () => {
    if (retryCount       clearTimeout(reconnectTimer);
      const delay = Math.min(1000 * 2 ** retryCount, 30000);
      reconnectTimer = setTimeout(connect, delay);
      retryCount++;
    }
  };
}

iOS Safari 特别处理：避免“假连接”和心跳失效

iOS Safari 在后台常表现为“连接未报错但收不到消息”，本质是内核冻结了 JS 和网络栈。仅靠 onerror 不可靠：

服务端必须开启心跳（如每 15–20s 发送 data: \n\n 或自定义 ping 事件），前端监听 onmessage 或 addEventListener('ping', ...)
前端维护一个心跳计时器（setTimeout），每次收到消息重置；若超时（如 30s 无任何事件），视为连接异常，主动 close + 触发重连
避免使用 fetch 或 XMLHttpRequest 检测连通性（后台同样被冻结），心跳检测必须基于 SSE 流本身