计算购物车钱之前
This commit is contained in:
wwz
@@ -1,231 +1,301 @@
|
||||
class webSocketUtils {
|
||||
constructor(url, time, params) {
|
||||
this.socketTask = null;
|
||||
this.is_open_socket = false; //避免重复连接
|
||||
this.url = url;
|
||||
this.params = params ? params : null; ////是否初始化请求
|
||||
this.connectNum = 1; // 重连次数
|
||||
//这个参数是防止重连失败之后onClose方法会重复执行reconnect方法，导致重连定时器出问题
|
||||
//连接并打开之后可重连，且只执行重连方法一次
|
||||
this.canReconnect = false; // 是否可以重连
|
||||
//心跳检测
|
||||
this.timeout = time ? time : 5000; //多少秒执行检测
|
||||
this.heartbeatInterval = null; //检测服务器端是否还活着
|
||||
this.reconnectTimeOut = null; //重连之后多久再次重连
|
||||
try {
|
||||
|
||||
return this.connectSocketInit({
|
||||
data: this.params,
|
||||
type: 'connectSocketInit',
|
||||
});
|
||||
} catch (e) {
|
||||
// console.log('catch');
|
||||
this.reconnect();
|
||||
}
|
||||
}
|
||||
// 进入这个页面的时候创建websocket连接【整个页面随时使用】
|
||||
connectSocketInit(data) {
|
||||
let _this = this;
|
||||
this.data = data;
|
||||
// #ifdef MP-WEIXIN
|
||||
this.socketTask = uni.connectSocket({
|
||||
// #endif
|
||||
// #ifdef MP-ALIPAY
|
||||
my.connectSocket({
|
||||
// #endif
|
||||
url: this.url,
|
||||
success: (res) => {
|
||||
console.log('创建websocketc成功...');
|
||||
// uni.hideLoading();
|
||||
// 返回实例
|
||||
return this.socketTask;
|
||||
},
|
||||
fail: (res) => {
|
||||
}
|
||||
});
|
||||
|
||||
// #ifdef MP-WEIXIN
|
||||
this.socketTask.onOpen((res) => {
|
||||
// #endif
|
||||
// #ifdef MP-ALIPAY
|
||||
my.onSocketOpen((res) => {
|
||||
// #endif
|
||||
uni.hideLoading()
|
||||
this.connectNum = 1;
|
||||
console.log('WebSocket连接正常！==',res);
|
||||
if (this.params) { //是否初始化请求
|
||||
this.send(this.params);
|
||||
}
|
||||
clearInterval(this.reconnectTimeOut);
|
||||
clearInterval(this.heartbeatInterval);
|
||||
this.is_open_socket = true;
|
||||
this.canReconnect = true;
|
||||
this.start();
|
||||
// 注：只有连接正常打开中 ，才能正常收到消息
|
||||
// #ifdef MP-WEIXIN
|
||||
this.socketTask.onMessage((e) => {
|
||||
// #endif
|
||||
// #ifdef MP-ALIPAY
|
||||
my.onSocketMessage((e)=>{
|
||||
// #endif
|
||||
// 字符串转json
|
||||
let res = JSON.parse(e.data);
|
||||
uni.$emit('message', res)
|
||||
// 普通socket信息处理 TODO
|
||||
});
|
||||
});
|
||||
|
||||
// 监听连接失败，这里代码我注释掉的原因是因为如果服务器关闭后，和下面的onclose方法一起发起重连操作，这样会导致重复连接
|
||||
// #ifdef MP-WEIXIN
|
||||
uni.onSocketError((res) => {
|
||||
// #endif
|
||||
// #ifdef MP-ALIPAY
|
||||
my.onSocketError((res) => {
|
||||
// #endif
|
||||
console.log('网络断开，请检查！');
|
||||
this.socketTask = null;
|
||||
this.is_open_socket = false;
|
||||
// this.Close()
|
||||
this.canReconnect = true;
|
||||
clearInterval(this.heartbeatInterval);
|
||||
clearInterval(this.reconnectTimeOut);
|
||||
try {
|
||||
if (this.connectNum <= 10) {
|
||||
// uni.showLoading({
|
||||
// title: `网络连接失败，正尝试第${this.connectNum}次连接`,
|
||||
// mask: true
|
||||
// })
|
||||
uni.$emit('message', 1) //进行重连
|
||||
uni.showToast({
|
||||
title: `网络连接失败，正尝试第${this.connectNum}次连接`,
|
||||
icon: 'none',
|
||||
});
|
||||
this.reconnect();
|
||||
this.connectNum += 1;
|
||||
} else {
|
||||
// uni.$emit('connectError');
|
||||
uni.showToast({
|
||||
title: `网络连接失败，请检查网络！`,
|
||||
icon: 'none',
|
||||
});
|
||||
this.connectNum = 1;
|
||||
this.canReconnect = false;
|
||||
this.Close()
|
||||
setTimeout(res => {
|
||||
uni.switchTab({
|
||||
url: '/pages/index/index'
|
||||
})
|
||||
uni.hideLoading()
|
||||
}, 1000)
|
||||
import {
|
||||
ref,
|
||||
onMounted,
|
||||
onBeforeUnmount
|
||||
} from 'vue';
|
||||
|
||||
const useWebSocket = (options = {}) => {
|
||||
const {
|
||||
heartbeatInterval = 10000, //心跳是10秒一次
|
||||
reconnectInterval = 3000, //重新连接间隔时间的一个参数
|
||||
maxReconnectAttempts = 3, //最大重连接次数
|
||||
initialReconnectInterval = 3000, // 初始重连间隔
|
||||
initMessage,
|
||||
initMessageRetryCount = 3, // 新增：初始化消息发送重试次数
|
||||
initMessageRetryInterval = 2000, // 新增：初始化消息重试间隔
|
||||
maxReconnectDuration = Infinity
|
||||
} = options;
|
||||
|
||||
const autoReconnect = ref(true); //是否自动重新连接
|
||||
const socketTask = ref(null);
|
||||
const isConnected = ref(false); //表示是否已连接上。
|
||||
const heartbeatTimer = ref(null); //心跳定时器
|
||||
const reconnectTimer = ref(null); //重连定时器
|
||||
const reconnectAttempts = ref(0); //重连的尝试次数
|
||||
const isNetworkConnected = ref(true); //监听当前网络连接状态
|
||||
const isManuallyClosed = ref(false); //是否是被手动关闭的
|
||||
const receivedMessages = ref([]); //储从 WebSocket 服务器接收到的消息
|
||||
const initMessageSendAttempts = ref(0); //初始化连接多少次
|
||||
const reconnectStartTime = ref(0); //新增：记录重连开始时间
|
||||
|
||||
// 关闭现有连接并清理资源
|
||||
const closeExistingConnection = () => {
|
||||
if (socketTask.value) {
|
||||
// 关闭 WebSocket 连接
|
||||
socketTask.value.close({
|
||||
success: () => {
|
||||
console.log('WebSocket 连接已关闭');
|
||||
},
|
||||
fail: (err) => {
|
||||
console.error('关闭 WebSocket 连接失败:', err);
|
||||
}
|
||||
} catch (e) {
|
||||
//TODO handle the exception
|
||||
}
|
||||
});
|
||||
// 这里仅是事件监听【如果socket关闭了会执行】
|
||||
// #ifdef MP-WEIXIN
|
||||
this.socketTask.onClose(() => {
|
||||
// #endif
|
||||
// #ifdef MP-ALIPAY
|
||||
my.onSocketClose((res) => {
|
||||
// #endif
|
||||
console.log("socket关闭了")
|
||||
this.socketTask = null;
|
||||
clearInterval(this.heartbeatInterval);
|
||||
clearInterval(this.reconnectTimeOut);
|
||||
// #ifdef MP-ALIPAY
|
||||
// 支付宝小程序的ws连接问题，关闭连接时需关闭对于接受，防止关闭失败
|
||||
my.offSocketMessage();
|
||||
my.offSocketError();
|
||||
my.offSocketOpen();
|
||||
my.offSocketClose();
|
||||
// #endif
|
||||
this.is_open_socket = false;
|
||||
if (this.canReconnect) {
|
||||
this.reconnect();
|
||||
this.canReconnect = false;
|
||||
}
|
||||
});
|
||||
}
|
||||
// 主动关闭socket连接
|
||||
Close() {
|
||||
this.is_open_socket = true;
|
||||
this.canReconnect = false;
|
||||
|
||||
// #ifdef MP-WEIXIN
|
||||
if (this.socketTask) {
|
||||
this.socketTask.close({
|
||||
success(res) {
|
||||
console.log('手动关闭成功');
|
||||
},
|
||||
});
|
||||
|
||||
// 清除心跳定时器
|
||||
clearInterval(heartbeatTimer.value);
|
||||
heartbeatTimer.value = null;
|
||||
|
||||
// 清除重连定时器
|
||||
clearTimeout(reconnectTimer.value);
|
||||
reconnectTimer.value = null;
|
||||
|
||||
// 标记连接已断开
|
||||
isConnected.value = false;
|
||||
}
|
||||
// #endif
|
||||
// #ifdef MP-ALIPAY
|
||||
my.closeSocket({
|
||||
success(res) {
|
||||
console.log('手动关闭成功');
|
||||
// #ifdef MP-ALIPAY
|
||||
// 支付宝小程序的ws连接问题，关闭连接时需关闭对于接受，防止关闭失败
|
||||
my.offSocketMessage();
|
||||
my.offSocketError();
|
||||
my.offSocketOpen();
|
||||
my.offSocketClose();
|
||||
// #endif
|
||||
|
||||
};
|
||||
|
||||
// 连接 WebSocket
|
||||
const connect = () => {
|
||||
if (!isNetworkConnected.value) {
|
||||
console.log('网络未连接，暂不尝试连接 WebSocket');
|
||||
return;
|
||||
}
|
||||
|
||||
// 关闭现有连接并清理资源
|
||||
closeExistingConnection();
|
||||
|
||||
socketTask.value = uni.connectSocket({
|
||||
url: uni.conf.baseUrlwws,
|
||||
success: (res) => {
|
||||
isConnected.value = true;
|
||||
reconnectAttempts.value = 0;
|
||||
// 监听初始化成功在开启心跳
|
||||
// startHeartbeat();
|
||||
},
|
||||
fail: (res) => {
|
||||
console.log('手动关闭失败==',res);
|
||||
fail: () => {
|
||||
console.error('WebSocket 连接失败，尝试重连');
|
||||
if (autoReconnect.value) {
|
||||
handleReconnect();
|
||||
}
|
||||
}
|
||||
});
|
||||
// #endif
|
||||
}
|
||||
//发送消息
|
||||
send(data) {
|
||||
// console.log("发送消息---------->", data);
|
||||
// 注：只有连接正常打开中 ，才能正常成功发送消息
|
||||
|
||||
// #ifdef MP-WEIXIN
|
||||
if (this.socketTask) {
|
||||
this.socketTask.send({
|
||||
|
||||
if (socketTask.value) {
|
||||
socketTask.value.onOpen(() => {
|
||||
// 初始化 初始购物车
|
||||
sendMessage(initMessage)
|
||||
});
|
||||
socketTask.value.onMessage((res) => {
|
||||
// console.log(res, 'receivedMessages.value')
|
||||
let list = JSON.parse(res.data)
|
||||
receivedMessages.value.push(list);
|
||||
if (list.type == 'p') {
|
||||
console.log('心跳响应正常');
|
||||
// 心跳正常，重置重连尝试次数
|
||||
reconnectAttempts.value = 0;
|
||||
clearTimeout(reconnectTimer.value);
|
||||
}
|
||||
});
|
||||
|
||||
socketTask.value.onClose((res) => {
|
||||
console.log(res, 'WebSocket 连接已关闭，尝试重连');
|
||||
isConnected.value = false;
|
||||
clearInterval(heartbeatTimer.value); // 停止心跳定时器
|
||||
clearTimeout(reconnectTimer.value); // 清除重连定时器
|
||||
if (res.code == '1006') {
|
||||
console.log('服务器正常关闭，停止重连');
|
||||
autoReconnect.value = false;
|
||||
return false;
|
||||
}
|
||||
if (autoReconnect.value && !isManuallyClosed.value) {
|
||||
handleReconnect();
|
||||
}
|
||||
});
|
||||
|
||||
socketTask.value.onError((err) => {
|
||||
console.error('WebSocket 连接发生错误:', err);
|
||||
isConnected.value = false;
|
||||
clearInterval(heartbeatTimer.value);
|
||||
if (autoReconnect.value && !isManuallyClosed.value) {
|
||||
handleReconnect();
|
||||
}
|
||||
});
|
||||
} else {
|
||||
console.error('socketTask 未正确初始化');
|
||||
}
|
||||
};
|
||||
|
||||
// 启动心跳机制
|
||||
const startHeartbeat = () => {
|
||||
if (!isNetworkConnected.value) {
|
||||
console.log('网络未连接，暂停心跳');
|
||||
return;
|
||||
}
|
||||
heartbeatTimer.value = setInterval(() => {
|
||||
if (isConnected.value) {
|
||||
socketTask.value.send({
|
||||
data: JSON.stringify({
|
||||
type: 'pong'
|
||||
}),
|
||||
success: () => {
|
||||
console.log('心跳消息发送成功');
|
||||
const pongTimer = setTimeout(() => {
|
||||
console.error('心跳超时，未收到响应，尝试重连');
|
||||
clearInterval(heartbeatTimer.value);
|
||||
if (autoReconnect) {
|
||||
handleReconnect();
|
||||
}
|
||||
}, heartbeatInterval * 1.2);
|
||||
|
||||
socketTask.value.onMessage((res) => {
|
||||
if (res.data === 'ping') {
|
||||
clearTimeout(pongTimer);
|
||||
}
|
||||
});
|
||||
},
|
||||
fail: () => {
|
||||
console.error('心跳消息发送失败，尝试重连');
|
||||
clearInterval(heartbeatTimer.value);
|
||||
if (autoReconnect) {
|
||||
handleReconnect();
|
||||
}
|
||||
}
|
||||
});
|
||||
}
|
||||
}, heartbeatInterval);
|
||||
};
|
||||
|
||||
// 手动关闭连接
|
||||
const closeSocket = () => {
|
||||
isManuallyClosed.value = true;
|
||||
closeExistingConnection();
|
||||
};
|
||||
|
||||
// 发送消息
|
||||
const sendMessage = async (data) => {
|
||||
if (isConnected.value) {
|
||||
await socketTask.value.send({
|
||||
data: JSON.stringify(data),
|
||||
async success() {
|
||||
// console.log("消息发送成功");
|
||||
success: () => {
|
||||
// console.log('消息发送成功');
|
||||
},
|
||||
fail: () => {
|
||||
// console.error('消息发送失败');
|
||||
}
|
||||
});
|
||||
} else {
|
||||
console.error('WebSocket 未连接，无法发送消息');
|
||||
}
|
||||
};
|
||||
|
||||
// 处理重连逻辑
|
||||
const handleReconnect = () => {
|
||||
if (!isNetworkConnected.value) {
|
||||
console.log('网络未连接，暂停重连');
|
||||
return;
|
||||
}
|
||||
if (isManuallyClosed.value) {
|
||||
console.log('手动关闭连接，不进行重连');
|
||||
return;
|
||||
}
|
||||
|
||||
if (reconnectAttempts.value < maxReconnectAttempts) {
|
||||
reconnectAttempts.value++;
|
||||
const reconnectInterval = initialReconnectInterval * Math.pow(2, reconnectAttempts.value - 1);
|
||||
const randomizedInterval = reconnectInterval + Math.floor(Math.random() * 1000);
|
||||
console.log(`尝试第 ${reconnectAttempts.value} 次重连，重连间隔: ${randomizedInterval}ms...`);
|
||||
reconnectTimer.value = setTimeout(() => {
|
||||
connect();
|
||||
}, randomizedInterval);
|
||||
} else {
|
||||
console.error('重连次数达到上限，停止重连');
|
||||
uni.showToast({
|
||||
title: '重连次数达到上限，停止重连',
|
||||
icon: 'none'
|
||||
});
|
||||
}
|
||||
// #endif
|
||||
// #ifdef MP-ALIPAY
|
||||
my.sendSocketMessage({
|
||||
data: JSON.stringify(data),
|
||||
success(res) {
|
||||
// console.log("消息发送成功");
|
||||
};
|
||||
|
||||
// 发送初始化消息
|
||||
const sendInitMessage = async () => {
|
||||
if (initMessageSendAttempts.value < initMessageRetryCount) {
|
||||
initMessageSendAttempts.value++;
|
||||
await socketTask.value.send({
|
||||
data: JSON.stringify(initMessage),
|
||||
success: () => {
|
||||
console.log('初始化消息发送成功');
|
||||
initMessageSendAttempts.value = 0; // 重置尝试次数
|
||||
},
|
||||
fail: () => {
|
||||
console.log(
|
||||
`初始化消息发送失败，第 ${initMessageSendAttempts.value} 次尝试，将在 ${initMessageRetryInterval} 后重试`
|
||||
);
|
||||
setTimeout(() => {
|
||||
sendInitMessage();
|
||||
}, initMessageRetryInterval);
|
||||
}
|
||||
});
|
||||
} else {
|
||||
console.error('初始化消息发送失败，已达到最大重试次数');
|
||||
// initMessageSendAttempts.value = 0; // 重置尝试次数
|
||||
}
|
||||
};
|
||||
|
||||
|
||||
// 网络状态监听
|
||||
const initNetworkListener = () => {
|
||||
uni.getSystemInfo({
|
||||
success: (res) => {
|
||||
if (res.platform !== 'devtools') {
|
||||
uni.onNetworkStatusChange((statusRes) => {
|
||||
isNetworkConnected.value = statusRes.isConnected;
|
||||
if (statusRes.isConnected && !isManuallyClosed.value) {
|
||||
console.log('网络已连接，尝试重新连接 WebSocket');
|
||||
if (!isConnected.value && autoReconnect.value) {
|
||||
connect();
|
||||
}
|
||||
} else if (!statusRes.isConnected) {
|
||||
console.log('网络已断开，暂停 WebSocket 操作');
|
||||
clearInterval(heartbeatTimer.value);
|
||||
clearTimeout(reconnectTimer.value);
|
||||
if (socketTask.value) {
|
||||
socketTask.value.close();
|
||||
isConnected.value = false;
|
||||
}
|
||||
}
|
||||
});
|
||||
}
|
||||
},
|
||||
fail: (err) => {
|
||||
console.error('获取系统信息失败:', err);
|
||||
}
|
||||
});
|
||||
// #endif
|
||||
}
|
||||
//开启心跳检测
|
||||
start(data) {
|
||||
// console.log('开启心跳检测', data)
|
||||
this.heartbeatInterval = setInterval(() => {
|
||||
this.send({
|
||||
data: '心跳检测',
|
||||
type: 'heartbeat',
|
||||
});
|
||||
}, this.timeout);
|
||||
}
|
||||
//重新连接
|
||||
reconnect() {
|
||||
//停止发送心跳
|
||||
clearInterval(this.heartbeatInterval);
|
||||
//如果不是人为关闭的话，进行重连
|
||||
if (!this.is_open_socket) {
|
||||
console.log('进行重连');
|
||||
this.canReconnect = true;
|
||||
this.reconnectTimeOut = setInterval(() => {
|
||||
this.connectSocketInit(this.data);
|
||||
}, this.timeout);
|
||||
}
|
||||
}
|
||||
}
|
||||
module.exports = webSocketUtils;
|
||||
|
||||
uni.getNetworkType({
|
||||
success: (res) => {
|
||||
isNetworkConnected.value = res.networkType !== 'none';
|
||||
if (!isNetworkConnected.value) {
|
||||
console.log('初始网络未连接，暂不尝试连接 WebSocket');
|
||||
}
|
||||
}
|
||||
});
|
||||
};
|
||||
|
||||
onMounted(() => {
|
||||
initNetworkListener();
|
||||
connect();
|
||||
});
|
||||
|
||||
onBeforeUnmount(() => {
|
||||
closeSocket();
|
||||
});
|
||||
|
||||
return {
|
||||
isConnected,
|
||||
sendMessage,
|
||||
closeSocket,
|
||||
receivedMessages
|
||||
};
|
||||
};
|
||||
|
||||
export default useWebSocket;
|
||||
Reference in New Issue
Block a user