项目场景：
提示：我们在使用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, "有新的消息");
}
});
},
},
}
好文推荐
您阅读本篇文章共花了：
发表评论