如何阻止浏览器端mqtt.js在标签页失焦时自动断开连接

问题根因 #

你遇到的后台断开不是mqtt.js内置的超时逻辑，是现代浏览器对非活跃后台标签页的性能限制导致的：

• 后台标签页的setTimeout/setInterval会被节流到最低1s的执行间隔，静置超过5分钟的标签页定时器间隔甚至会被拉长到1分钟以上，导致mqtt的ping保活包无法按时发出
• 空闲时间超过阈值的WebSocket连接会被浏览器主动断开，减少后台资源占用

可行解决方案 #

方案1：调整mqtt.js连接配置（改造成本最低） #

修改mqtt初始化参数，适配浏览器后台的节流规则即可大幅降低断开概率：

const mqttClient = mqtt.connect('wss://你的broker地址', {
  keepalive: 25, // 单位为秒，设置为15-30区间即可，小于浏览器默认的后台空闲超时阈值
  reschedulePings: false, // 关闭ping包重调度逻辑，避免定时器抖动导致ping间隔被无限拉长
  reconnectPeriod: 1000, // 后台断开后自动按1秒间隔尝试重连，不需要等待标签页切回前台
  connectTimeout: 4000
})

方案2：Web Worker承载mqtt逻辑（最稳定，生产环境推荐） #

Web Worker的运行不受标签页前后台状态影响，定时器、WebSocket连接都不会被浏览器节流，是长期稳定运行的最优解：

• 单独创建一个worker文件，把mqtt连接、消息收发、保活逻辑全部放在worker内实现
• 主线程和worker通过postMessage传递订阅、发布、消息接收的指令和数据即可

方案3：修改浏览器配置（仅适合本地测试） #

如果是本地开发调试场景，可以直接关闭浏览器的后台节流策略：

• Chrome/Edge浏览器访问chrome://flags/#throttle-background-timeouts，将该选项设置为Disabled后重启浏览器即可
• 该方案仅适合本地测试，无法要求用户修改浏览器配置，不适用生产环境

注意事项 #

• 不要使用空白音频循环播放这类黑科技保活，目前主流浏览器已经对这类滥用后台资源的行为做了限制，后续大概率会完全失效
• MQTT broker端的连接超时时间需要设置为大于客户端keepalive的数值，比如客户端keepalive设为25秒，broker超时可以设为35秒，避免broker主动断开连接

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