Laravel Echo搭配Pusher 30秒后自动断开连接的修复咨询

这种问题在使用Laravel Echo结合Pusher时很常见，你的手动重连方案确实不够稳妥，下面是正确的解决思路和方案：

1. 利用Pusher SDK内置的自动重连机制 #

Pusher JavaScript SDK本身已经实现了完善的自动重连逻辑，不需要手动监听state_change事件来触发重连。你只需要在初始化Echo时确保配置正确的客户端参数：

修改resources/js/app.js中的Echo初始化代码，补充必要的Pusher配置：

import Echo from 'laravel-echo';
import Pusher from 'pusher-js';

window.Pusher = Pusher;

window.Echo = new Echo({
    broadcaster: 'pusher',
    key: import.meta.env.VITE_PUSHER_APP_KEY,
    cluster: import.meta.env.VITE_PUSHER_APP_CLUSTER, // 替换为你的Pusher集群，比如'us2'
    forceTLS: true,
    enabledTransports: ['ws', 'wss'],
    // 显式启用自动重连（默认已开启，可配置参数优化）
    reconnection: true,
    reconnectionDelay: 500,    // 初始重连延迟
    reconnectionDelayMax: 5000,// 最大重连延迟
    timeout: 10000             // 连接超时时间
});

2. 检查Pusher控制台的超时设置 #

登录Pusher管理后台，进入你的应用，在Settings > App Settings中查看Idle timeout配置。默认值是300秒，如果你的环境存在强制30秒断开的网络限制（比如服务器防火墙、CDN规则），需要调整这个值匹配环境，或者联系运维解除限制。

3. 排查队列驱动的间接影响 #

你的QUEUE_CONNECTION=sync是同步队列模式，事件会在请求周期内同步推送，本身不会直接导致连接断开，但如果事件处理逻辑耗时过长，可能影响后续的推送链路。生产环境建议切换为异步队列（如Redis、Database），这可以优化事件推送的稳定性，但不是解决连接断开的直接方案。

4. 放弃手动重连的原因 #

手动监听state_change触发重连可能会和Pusher SDK的内置重连逻辑冲突，导致重复连接请求、连接风暴，甚至无法正常恢复连接。SDK已经处理了网络波动、临时断开等场景的自动恢复，所以不需要额外手动干预。

验证方式 #

修改配置后重启前端服务，打开浏览器控制台，观察Pusher的日志输出：

• 断开后会自动出现Pusher: State changed: disconnected -> connecting的日志
• 重连成功后会显示Pusher: State changed: connecting -> connected

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