uniapp使用WebSocket断线，心跳重连机制-Toy模板网

这篇具有很好参考价值的文章主要介绍了uniapp使用WebSocket断线，心跳重连机制。希望对大家有所帮助。如果存在错误或未考虑完全的地方，请大家不吝赐教，您也可以点击"举报违法"按钮提交疑问。

项目场景：

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

解决方案：

提示：可直接使用，记得把对应地址替换一下文章来源地址https://www.toymoban.com/news/detail-849276.html


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, "有新的消息");
                }
            });
        },
    },
}

到了这里，关于uniapp使用WebSocket断线，心跳重连机制的文章就介绍完了。如果您还想了解更多内容，请在右上角搜索TOY模板网以前的文章或继续浏览下面的相关文章，希望大家以后多多支持TOY模板网！