132 lines
3.2 KiB
JavaScript
132 lines
3.2 KiB
JavaScript
import { reactive, ref, onBeforeUnmount } from 'vue';
|
||
import { baseUrl, websocketPath } from '@/sheep/config';
|
||
import { copyValueToTarget } from '@/sheep/util';
|
||
|
||
export function useWebSocket(opt) {
|
||
// 获取token
|
||
const getAccessToken = () => {
|
||
return uni.getStorageSync('token');
|
||
};
|
||
|
||
const options = reactive({
|
||
url: (baseUrl + websocketPath).replace('http', 'ws') + '?token=' + getAccessToken(), // ws 地址
|
||
isReconnecting: false, // 正在重新连接
|
||
reconnectInterval: 3000, // 重连间隔，单位毫秒
|
||
heartBeatInterval: 5000, // 心跳间隔，单位毫秒
|
||
pingTimeoutDuration: 1000, // 超过这个时间，后端没有返回pong，则判定后端断线了。
|
||
heartBeatTimer: null, // 心跳计时器
|
||
destroy: false, // 是否销毁
|
||
onConnected: () => {
|
||
}, // 连接成功时触发
|
||
onClosed: () => {
|
||
}, // 连接关闭时触发
|
||
onMessage: (data) => {
|
||
}, // 收到消息
|
||
});
|
||
const Socket = ref(null); // Socket 链接实例
|
||
|
||
const initEventListeners = () => {
|
||
Socket.value.onOpen(() => {
|
||
// WebSocket连接已打开
|
||
options.onConnected();
|
||
startHeartBeat();
|
||
});
|
||
|
||
Socket.value.onMessage((res) => {
|
||
try {
|
||
const obj = JSON.parse(res.data);
|
||
if (obj.type === 'pong') {
|
||
// 收到pong消息，心跳正常，无需处理
|
||
resetPingTimeout(); // 重置计时
|
||
} else {
|
||
// 处理其他消息
|
||
options.onMessage(obj);
|
||
}
|
||
} catch {
|
||
console.error(res.data);
|
||
}
|
||
});
|
||
|
||
Socket.value.onClose((res) => {
|
||
// WebSocket连接已关闭
|
||
if (options.destroy) {
|
||
options.onClosed();
|
||
return;
|
||
}
|
||
stopHeartBeat();
|
||
if (!options.isReconnecting) {
|
||
reconnect();
|
||
}
|
||
});
|
||
};
|
||
|
||
const sendMessage = (message) => {
|
||
if (Socket.value) {
|
||
Socket.value.send({
|
||
data: message,
|
||
});
|
||
}
|
||
};
|
||
|
||
const startHeartBeat = () => {
|
||
options.heartBeatTimer = setInterval(() => {
|
||
sendMessage(JSON.stringify({
|
||
type: 'ping',
|
||
})); // 发送ping消息
|
||
options.pingTimeout = setTimeout(() => {
|
||
// 未收到pong消息，尝试重连...
|
||
reconnect();
|
||
}, options.pingTimeoutDuration);
|
||
}, options.heartBeatInterval);
|
||
};
|
||
|
||
const stopHeartBeat = () => {
|
||
if (options.heartBeatTimer) {
|
||
clearInterval(options.heartBeatTimer);
|
||
}
|
||
};
|
||
|
||
const reconnect = () => {
|
||
options.isReconnecting = true;
|
||
setTimeout(() => {
|
||
onReconnect();
|
||
initSocket();
|
||
options.isReconnecting = false;
|
||
}, options.reconnectInterval);
|
||
};
|
||
|
||
const resetPingTimeout = () => {
|
||
clearTimeout(options.pingTimeout); // 重置计时
|
||
};
|
||
|
||
const close = () => {
|
||
options.destroy = true;
|
||
stopHeartBeat();
|
||
if (Socket.value) {
|
||
Socket.value.close();
|
||
Socket.value = null;
|
||
}
|
||
};
|
||
/**
|
||
* 重连时触发
|
||
*/
|
||
const onReconnect = () => {
|
||
console.log('尝试重连...');
|
||
};
|
||
|
||
const initSocket = () => {
|
||
copyValueToTarget(options, opt);
|
||
Socket.value = uni.connectSocket({
|
||
url: options.url,
|
||
complete: () => {
|
||
},
|
||
});
|
||
initEventListeners();
|
||
};
|
||
initSocket();
|
||
|
||
onBeforeUnmount(()=>{
|
||
close()
|
||
})
|
||
}
|