以上websocket重连

对不起，我之前的回答有误。在Vue 3中，使用`setup`函数来创建全局的WebSocket连接并实现重连是有一些限制的，因为`setup`函数只在组件初始化阶段调用一次，无法实现全局的重连逻辑。

相反，你可以创建一个WebSocket管理模块，然后在需要使用WebSocket的组件中引入并使用它。这样可以实现在不同页面发送和接收不同类型的消息，并在登录和退出时创建和关闭WebSocket连接。以下是一个示例：

// websocket.js
class WebSocketManager {
  constructor(url) {
    this.url = url;
    this.socket = null;
    this.listeners = {}; // 消息类型与处理函数映射

    this.connect(); // 创建连接
  }

  connect() {
    this.socket = new WebSocket(this.url);

    this.socket.onopen = () => {
      console.log('WebSocket连接已建立');
    };

    this.socket.onmessage = (event) => {
      const message = JSON.parse(event.data);
      // 根据消息类型找到对应的处理函数并执行
      const type = message.type;
      if (this.listeners[type]) {
        this.listeners[type](message);
      }
    };

    this.socket.onclose = () => {
      console.log('WebSocket连接已关闭');
      // 在连接关闭时进行重连
      setTimeout(() => {
        this.connect();
      }, 3000);
    };
  }

  addListener(type, handler) {
    this.listeners[type] = handler;
  }

  removeListener(type) {
    delete this.listeners[type];
  }

  send(message) {
    if (this.socket && this.socket.readyState === WebSocket.OPEN) {
      this.socket.send(JSON.stringify(message));
    } else {
      console.log('WebSocket连接未建立');
    }
  }

  close() {
    if (this.socket) {
      this.socket.close();
    }
  }
}

export default WebSocketManager;

然后在你的组件中使用WebSocket管理模块：

import { ref, onMounted, onUnmounted } from 'vue';
import WebSocketManager from './websocket';

export default {
  setup() {
    const socket = ref(null);

    // 创建WebSocket连接
    const createWebSocket = () => {
      socket.value = new WebSocketManager('your_websocket_url');

      // 添加消息监听器
      socket.value.addListener('type1', handleType1Message);
      socket.value.addListener('type2', handleType2Message);
      // 添加其他类型的消息监听器...

      // 在登录时创建连接
      login();
    };

    // 销毁组件时关闭连接
    onUnmounted(() => {
      logout();
    });

    const login = () => {
      if (socket.value) {
        socket.value.connect();
      } else {
        createWebSocket();
      }
    };

    const logout = () => {
      if (socket.value) {
        socket.value.close();
      }
    };

    const handleType1Message = (message) => {
      // 处理类型1的消息
    };

    const handleType2Message = (message) => {
      // 处理类型2的消息
    };

    // 在组件挂载时调用登录函数
    onMounted(() => {
      login();
    });

    return {
      login,
      logout,
    };
  },
};

这样，你就可以在不同的Vue页面中发送和接收不同类型的消息，并在登录和退出时创建和关闭WebSocket连接。记得替换`your_websocket_url`为你的实际WebSocket URL。