vue3 Typescript 全局WebSocket 在任意vue页面中使用

要在任意Vue页面中使用全局WebSocket，你可以使用Vue的插件机制来实现。下面是一个简单的示例：

首先，在你的项目中创建一个WebSocket插件文件，比如websocket.ts：

import { App, Plugin } from 'vue';

const plugin: Plugin = {
  install(app: App) {
    const url = 'ws://example.com'; // WebSocket服务器的URL

    const socket = new WebSocket(url);

    // 在WebSocket连接打开时执行的操作
    socket.onopen = () => {
      console.log('WebSocket连接已打开');
    };

    // 在收到WebSocket消息时执行的操作
    socket.onmessage = (event) => {
      console.log('收到WebSocket消息：', event.data);
    };

    // 在WebSocket连接关闭时执行的操作
    socket.onclose = () => {
      console.log('WebSocket连接已关闭');
    };

    // 将WebSocket实例挂载到Vue实例的全局属性中
    app.config.globalProperties.$socket = socket;
  },
};

export default plugin;

然后，在你的入口文件（比如main.ts）中使用该插件：

import { createApp } from 'vue';
import App from './App.vue';
import WebSocketPlugin from './websocket.ts';

const app = createApp(App);

// 使用WebSocket插件
app.use(WebSocketPlugin);

app.mount('#app');

现在，你可以在任意Vue页面中通过this.$socket访问全局WebSocket实例，进行WebSocket的相关操作：

export default {
  mounted() {
    // 发送WebSocket消息
    this.$socket.send('Hello WebSocket');

    // 关闭WebSocket连接
    this.$socket.close();
  },
};

这样，你就可以在任意Vue页面中使用全局WebSocket了。记得根据你的具体需求修改插件中的WebSocket连接URL和处理函数