uniapp使用WebSocket断线，心跳重连机制

项目场景：

提示：我们在使用WebSocket，经常会遇到有的时候给别人发消息,别人会接收不到，这个时候就有可能是WebSocket断线了，所以这个时候心跳包就出现了

---

解决方案：

提示：可直接使用，记得把对应地址替换一下

const RECONNECT_INTERVAL = 3000; // 延迟3秒后进行重连
const HEARTBEAT_INTERVAL = 20000; // 每20秒发送一次心跳消息

export default {
    data () {
        return {
            isOpen: false, // WebSocket是否打开
            clientId: null, // 用户ID
            socketTimer: null, // 定时器
        }
    },
    methods: {
        // 发送心跳包
        startHeartbeat () {

            // HeartBeat 这里是和后端约定好的值，我们发送给后端，后端再把这个值返给我们
            // 目的就是让后端知道我们一直在
            const heartbeatMsg = 'HeartBeat';

            const sendHeartbeat = () => {
                if (this.isOpen) {
                    uni.sendSocketMessage({
                        data: heartbeatMsg,
                    }).catch(error => {
                        console.log('发送心跳消息失败:', error);
                        this.reconnect()
                    });
                }
            };
            this.socketTimer = setInterval(sendHeartbeat, HEARTBEAT_INTERVAL);
        },

        // 开始重连
        reconnect () {
            if (!this.isOpen) {
                clearTimeout(this.socketTimer);
                this.socketTimer = setTimeout(() => {
                    console.log('开始重连...');
                    this.connectWebSocket();
                }, RECONNECT_INTERVAL);
            }
        },

        // 建立WebSocket连接
        connectWebSocket () {
            const that = this;
            
            uni.connectSocket({
                // 这里的值记得替换
                url: 'ws://8.888.888.888:8081/imserver/' + that.clientId,
                header: {
                    'content-type': 'application/json'
                },
            });

            uni.onSocketOpen(res => {
                console.log('连接成功！');
                that.isOpen = true;
                that.startHeartbeat();
            });

            uni.onSocketError(res => {
                console.log('连接失败！');
                that.isOpen = false;
                that.reconnect();
            });

            uni.onSocketClose(res => {
                console.log('连接关闭！');
                that.isOpen = false;
                that.reconnect();
            });

            uni.onSocketMessage(res => {
                if (res.data === 'HeartBeat') {
                    console.log(res.data, "心跳");
                    return;
                } else {
                    const data = JSON.parse(res.data);
                    console.log(data, "有新的消息");
                }
            });
        },
    },
}