uniapp下实现心跳检测服务端并且结婚生命周期自动再次连接绑定客户端

page code

<template>
    <view class="container">
        /////
    </view>
</template>

<script>
    
    import socket  from '@/util/socket';
    export default {
        data() {
            return {
                
            };
        },
        onl oad() {
            console.log('页面加载了，initWebSocket')
            this.initWebSocket();
        },
        onUnload() {
            console.log('监听页面卸载    ，initWebSocket')
            // 清理 WebSocket 客户端
            this.cleanupWebSocket();
        },
        onShow(){
            console.log('页面显示了，initWebSocket')
            this.initWebSocket();
            this.getUser();

        },
        onHide(){
            console.log('页面隐藏了，清理 WebSocket 客户端')
            this.cleanupWebSocket();
        },
      
        methods: {
            initWebSocket() {
                  // 启动 WebSocket 客户端
                  console.log(44331)
              socket.socket.connect();
            },
        
            cleanupWebSocket() {
              // 清理 WebSocket 客户端资源
              if (socket.socket) {
                socket.socket.cleanup();
              }
            }
        },
    }
</script>

<style lang="scss" scoped>
////
</style>

/util/socket.js文件内容

import { socket_url } from '@/common/config'; // 确保路径正确
class WebSocketClient {
    constructor(url = socket_url) {
        this.url = url;
        this.socketTask = null;
        this.time = null;
        this.reconnectAttempts = 0; // 重连尝试次数
        this.maxReconnectAttempts = Infinity; // 默认为无限次重连
        this.isConnecting = false; // 防止重复连接
        this.autoConnectInterval = 1200; // 自动连接间隔时间，默认5秒
        this.pingInterval = 2000; // 心跳检测间隔时间，默认8秒
        this.lastPongTime = Date.now(); // 上次收到pong的时间
    }

    connect() {
        console.log(this.isConnecting)
        console.log(this.socketTask)
        if (this.isConnecting || this.socketTask) return;

        this.cleanup(); // 清除旧的 socketTask 和事件监听器

        this.bindEvents(); // 先绑定事件监听器

        this.isConnecting = true;
        console.log('尝试连接...');

        this.socketTask = uni.connectSocket({
            url: this.url,
            success: () => {
                console.log('connectSocket 请求已发出');
            },
            fail: (err) => {
                console.error('connectSocket 请求失败:', err);
                this.handleError();
            }
        });
    }

    bindEvents() {
        const that = this;

        // 绑定 onOpen 事件
        uni.onSocketOpen(() => {
            console.log('WebSocket 已打开');
            that.isConnecting = false;
            that.reconnectAttempts = 0; // 重置重连尝试次数
            that.setConnect();
            that.startPingPong(); // 启用心跳检测
        });

        // 绑定 onMessage 事件
        uni.onSocketMessage((res) => {
            let data = res.data;

            console.log("WebSocket 收到消息：" + data);

            try {
                data = JSON.parse(data);
            } catch (e) {
                console.log('ws接收到非对象数据', data);
                return;
            }

            var type = data.type || '';

            switch(type){
                case 'get_client_id':
                    that.bindUid(data.data.client_id);
                    break;
                case "xxxxxx":
                   //xxxxxbreak;
            }

            if (type === 'pong') {
                that.lastPongTime = Date.now();
                console.log('收到 pong 响应');
            }
        });

        // 绑定 one rror 事件
        uni.onSocketError(() => {
            console.warn('WebSocket 错误');
            that.handleError();
        });

        // 绑定 onClose 事件
        uni.onSocketClose(() => {
            console.warn('WebSocket 已关闭');
            that.handleError();
        });
    }

    handleError() {
        this.socketTask = null;
        this.isConnecting = false;
        this.reconnectAttempts++;
        console.warn(`尝试重新连接 (${this.reconnectAttempts})`);
        setTimeout(() => {
            this.connect(); // 尝试重新连接
        }, this.autoConnectInterval); // 每5秒尝试一次重连
    }

    setConnect() {
        console.log('WebSocket 建立连接');
    }

    startPingPong() {
        clearInterval(this.time); // 先清除计时器
        this.time = setInterval(() => {
            const now = Date.now();
            if (now - this.lastPongTime > this.pingInterval * 2) {
                console.warn('心跳超时，尝试重新连接');
                this.handleError();
            } else {
                console.log('发送 ping');
                uni.sendSocketMessage({
                    data: JSON.stringify({ type: 'ping' })
                }).catch(err => {
                    console.error('发送心跳检测消息失败:', err);
                });
            }
        }, this.pingInterval);
    }

    bindUid(client_id) {
        console.log('WebSocket 绑定客户端id' + client_id);
        let organise_id = uni.getStorageSync('organise_id');
        let admin_id = uni.getStorageSync('admin_id');

        if (organise_id && admin_id) {
            uni.$u.api.postBindAppAdminClientId({ client_id, organise_id, admin_id }).then(res => {
                if (res.code == 1) {
                    console.log('绑定成功');
                }
            });
        }
    }


    cleanup() {
        // 关闭现有的 socketTask 并设置为 null
        if (this.socketTask) {
            this.socketTask.close();
            this.socketTask = null;
        }

        // 清除心跳检测定时器
        clearInterval(this.time);

        // 清除自动连接定时器
        if (this.autoConnectTimer) clearInterval(this.autoConnectTimer);
    }
}

// 创建单例并导出
const socketInstance = new WebSocketClient(socket_url); // 替换为实际的 WebSocket URL

export default {
    socket: socketInstance
};