Hooks定义(话不多说,直接上代码,拿来即用)
import { ref, onMounted, onUnmounted } from 'vue';
export default function useUniWebSocket(url:string, onMessage:(res:any)=>void,heartbeatInterval = 3000,) {
const socketTask = ref(null as any);
const isDisconnect = ref(false);
let heartbeatTimer = null as any;
const connect = () => {
if (!socketTask.value || isDisconnect.value) {
isDisconnect.value = false;
console.log('WebSocket连接中...',url)
console.log('socketTask',socketTask)
socketTask.value = uni.connectSocket({
url: url,
complete: () => {
console.log('WebSocket连接已建立');
startHeartbeat();
},
});
socketTask.value.onOpen(() => {
console.log('WebSocket连接已打开');
});
socketTask.value.onClose(() => {
console.log('WebSocket连接已关闭');
if (!isDisconnect.value) {
setTimeout(() => {
console.log('WebSocket重新连接');
connect();
}, 1000);
}
});
socketTask.value.onError((error:any) => {
console.error('WebSocket连接发生错误:', error);
});
socketTask.value.onMessage((res:{data:string}) => {
let data = JSON.parse(res.data)
if (onMessage) {
onMessage(data);
}
});
}
};
const disconnect = () => {
if (socketTask.value) {
isDisconnect.value = true;
socketTask.value.close({});
stopHeartbeat();
socketTask.value = null;
}
};
const startHeartbeat = () => {
heartbeatTimer = setInterval(() => {
if (socketTask.value) {
console.log('发送心跳')
socketTask.value.send({
data: JSON.stringify({})
});
}
}, heartbeatInterval);
};
const stopHeartbeat = () => {
clearInterval(heartbeatTimer);
};
const sendMessage = (message:any) => {
console.log('发送消息:socketTask.value', socketTask.value)
if (socketTask.value) {
socketTask.value.send({
data: JSON.stringify(message)
});
}
};
onMounted(() => {
connect();
});
onUnmounted(() => {
disconnect();
});
return {
socketTask,
connect,
disconnect,
sendMessage,
};
}