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()
  };
};