import { ref, reactive } from 'vue';
|
|
export const useWebSocket = (protocols) => {
|
const ws = new WebSocket("ws://localhost:9260/", protocols);
|
const messages = ref([]);
|
const status = reactive({
|
isConnected: false,
|
error: null
|
});
|
|
// 事件监听
|
const connect = () => {
|
ws.onopen = () => {
|
status.isConnected = true;
|
console.log('WebSocket 连接成功');
|
};
|
|
ws.onmessage = (event) => {
|
try {
|
const data = JSON.parse(event.data);
|
messages.value.push(data);
|
} catch (e) {
|
console.error('消息解析失败', e);
|
}
|
};
|
|
ws.onclose = (event) => {
|
status.isConnected = false;
|
console.log('连接关闭，准备重连...');
|
setTimeout(connect, 3000); // 3秒后重连
|
};
|
|
ws.onerror = (error) => {
|
status.error = error;
|
console.error('WebSocket 错误:', error);
|
};
|
};
|
|
// 初始化连接
|
connect();
|
|
// 发送消息方法
|
const send = (data) => {
|
if (status.isConnected) {
|
ws.send(JSON.stringify(data));
|
}
|
};
|
|
return {
|
ws,
|
messages,
|
status,
|
send,
|
close: () => ws.close()
|
};
|
};
|
