uniapp中socket断线如何自动重连？

Question

在使用 UniApp 开发跨平台应用时，WebSocket 断线后无法自动重连是一个常见问题。由于移动端网络环境复杂，用户切换 Wi-Fi 或进入弱网区域时，Socket 连接容易中断。若未正确监听 onClose 和 onError 事件，或缺乏重连机制，会导致通信长时间停滞。如何在 onclose 触发后实现延迟重试、避免频繁重连，并在重新连接成功后恢复会话状态，是开发者常遇到的技术难点。同时，多次重连失败后的兜底策略与心跳机制的配合也常被忽视。

Answer 1

一、问题背景与常见现象分析

在使用 UniApp 开发跨平台应用时，WebSocket 断线后无法自动重连是一个普遍存在的技术痛点。尤其是在移动端复杂的网络环境下，用户频繁切换 Wi-Fi 与蜂窝网络、进入信号弱区或短暂断网时，WebSocket 连接极易中断。

若开发者未正确监听 onClose 和 onError 事件，或缺乏完善的重连机制，会导致通信长时间停滞，影响用户体验甚至核心业务逻辑（如实时聊天、订单状态推送等）。

以下为常见的异常表现：

• 连接关闭后无任何响应，未触发重连逻辑
• 重连过于频繁，造成设备资源浪费和服务器压力
• 多次重连失败后系统“死锁”，不再尝试连接
• 重新连接成功但会话状态丢失，需手动刷新页面
• 心跳包未及时发送或未正确处理 pong 响应
• 不同平台（H5、App、小程序）行为不一致
• 后台运行时连接被系统回收
• SSL/TLS 握手失败导致连接异常
• 服务端主动关闭连接但客户端未识别
• 重连过程中重复创建多个 WebSocket 实例

二、基础原理：WebSocket 生命周期与 UniApp 平台差异

WebSocket 在 UniApp 中通过 uni.connectSocket() 创建，其生命周期包括：

1. connect：建立 TCP 连接并完成握手
2. open：连接打开，可开始通信
3. message：接收服务器消息
4. error：发生错误（如网络中断、协议错误）
5. close：连接关闭（正常或异常）

UniApp 各平台实现存在差异：

平台	支持心跳	后台保活能力	onClose 触发准确性	注意事项
H5	依赖浏览器	差	高	注意跨域与 HTTPS
App（iOS）	部分支持	中	受系统限制	需配置后台模式
App（Android）	较好	较好	较准	避免内存泄漏
微信小程序	内置心跳	差	延迟较高	限制并发连接数
支付宝小程序	需手动维护	一般	较稳定	注意域名白名单

三、核心解决方案设计

为解决上述问题，需构建一个具备以下特性的 WebSocket 管理器：

• 统一事件监听（open、message、error、close）
• 延迟重试机制（指数退避算法）
• 防止重复连接
• 心跳保活机制（ping/pong）
• 会话状态恢复机制
• 失败兜底策略（最大重试次数 + 用户提示）
• 跨平台兼容性封装

四、代码实现示例

class WebSocketManager {
    constructor(url, protocols = []) {
        this.url = url;
        this.protocols = protocols;
        this.socketTask = null;
        this.isConnected = false;
        this.isManuallyClosed = false;
        this.reconnectAttempts = 0;
        this.maxReconnectAttempts = 10;
        this.heartbeatInterval = null;
        this.reconnectTimeout = null;
        this.lastPingTime = 0;
        this.sessionData = {};
    }

    connect() {
        if (this.isConnected || this.reconnectTimeout) return;

        console.log('正在连接 WebSocket:', this.url);
        this.socketTask = uni.connectSocket({
            url: this.url,
            protocols: this.protocols
        });

        this.setupEventListeners();
    }

    setupEventListeners() {
        this.socketTask.onOpen(() => {
            this.isConnected = true;
            this.isManuallyClosed = false;
            this.reconnectAttempts = 0;
            console.log('WebSocket 已连接');
            this.startHeartbeat();
            this.restoreSession(); // 恢复会话状态
        });

        this.socketTask.onMessage((res) => {
            const data = JSON.parse(res.data);
            if (data.type === 'pong') {
                console.log('收到 pong，心跳正常');
            } else {
                this.handleMessage(data);
            }
        });

        this.socketTask.onError((err) => {
            console.error('WebSocket 错误:', err);
            this.handleDisconnect();
        });

        this.socketTask.onClose((res) => {
            console.log('WebSocket 关闭:', res);
            this.handleDisconnect(res.code);
        });
    }

    handleDisconnect(code) {
        this.isConnected = false;
        this.stopHeartbeat();

        if (this.isManuallyClosed) return;

        this.scheduleReconnect();
    }

    scheduleReconnect() {
        if (this.reconnectAttempts >= this.maxReconnectAttempts) {
            this.fallbackStrategy();
            return;
        }

        const delay = Math.min(1000 * Math.pow(2, this.reconnectAttempts), 30000); // 指数退避，最大30秒
        this.reconnectAttempts++;

        console.log(`准备第 ${this.reconnectAttempts} 次重连，延迟 ${delay}ms`);

        this.reconnectTimeout = setTimeout(() => {
            this.connect();
        }, delay);
    }

    startHeartbeat() {
        this.stopHeartbeat(); // 防止重复启动
        this.heartbeatInterval = setInterval(() => {
            if (this.isConnected && this.socketTask) {
                this.socketTask.send({ data: JSON.stringify({ type: 'ping' }) });
                this.lastPingTime = Date.now();
            }
        }, 30000); // 每30秒发送一次 ping
    }

    stopHeartbeat() {
        if (this.heartbeatInterval) {
            clearInterval(this.heartbeatInterval);
            this.heartbeatInterval = null;
        }
    }

    restoreSession() {
        if (Object.keys(this.sessionData).length > 0) {
            this.socketTask.send({
                data: JSON.stringify({
                    type: 'resume_session',
                    data: this.sessionData
                })
            });
        }
    }

    handleMessage(data) {
        // 处理业务消息
        console.log('收到消息:', data);
    }

    fallbackStrategy() {
        uni.showModal({
            title: '网络异常',
            content: '无法连接到服务器，请检查网络设置。',
            showCancel: false,
            success: () => {
                // 可在此跳转至首页或退出登录
            }
        });
    }

    close() {
        this.isManuallyClosed = true;
        this.stopHeartbeat();
        if (this.socketTask) {
            this.socketTask.close();
        }
        if (this.reconnectTimeout) {
            clearTimeout(this.reconnectTimeout);
            this.reconnectTimeout = null;
        }
    }
}
    

五、流程图：WebSocket 自动重连机制执行流程

graph TD A[初始化 WebSocketManager] --> B{是否已连接?} B -- 否 --> C[调用 connect()] C --> D[监听 open/error/close/message] D --> E[open: 标记连接成功] E --> F[启动心跳机制] F --> G[恢复会话状态] D --> H[error/close: 触发断开] H --> I{是否手动关闭?} I -- 是 --> J[停止重连] I -- 否 --> K[判断重连次数] K --> L{超过最大重试?} L -- 是 --> M[执行兜底策略] L -- 否 --> N[计算延迟时间
(指数退避)] N --> O[设置定时器重连] O --> P[重新 connect()] P --> D

六、高级优化建议

针对复杂场景，可进一步增强健壮性：

• 网络状态监听：结合 uni.onNetworkStatusChange，在网络恢复时主动触发重连
• 多地址容灾：配置主备 WebSocket 地址，当前地址失败后切换
• 本地缓存待发消息：断线期间缓存用户操作，重连后批量重发
• 连接池管理：对于多通道需求，统一管理多个 WebSocket 实例
• 日志上报：记录连接状态变化，便于线上问题排查
• 服务端配合：支持 token 续签、session 复用、连接迁移
• 性能监控：统计平均连接耗时、失败率、心跳延迟等指标
• 降级方案：长时间无法连接时，改用轮询或其他通信方式