vue3 全局WebSocket

在Vue3中，可以使用Vue提供的provide和inject来实现全局WebSocket的功能。具体如下所示：

在主入口文件（如main.js）中创建WebSocket实例，并将其作为全局的provide：

import { createApp } from 'vue';
import App from './App.vue';
import { createWebSocket } from './utils/webSocket';

const app = createApp(App);

const webSocket = createWebSocket();
app.provide('webSocket', webSocket);

app.mount('#app');

在需要使用WebSocket的组件中，使用inject来获取WebSocket实例：

import { inject } from 'vue';

export default {
  name: 'MyComponent',
  setup() {
    const webSocket = inject('webSocket');

    // 在这里可以使用webSocket进行WebSocket操作
    // 例如：webSocket.send('Hello');

    return {
      webSocket,
    };
  },
};

在utils/webSocket.js文件中，创建WebSocket实例并定义其方法：

export function createWebSocket() {
  const webSocket = new WebSocket('ws://example.com');

  webSocket.onopen = () => {
    console.log('WebSocket is connected');
  };

  webSocket.onmessage = (event) => {
    console.log('Received message:', event.data);
  };

  webSocket.onclose = () => {
    console.log('WebSocket is disconnected');
  };

  webSocket.onerror = (error) => {
    console.error('WebSocket error:', error);
  };

  return webSocket;
}

通过以上步骤，你就可以在Vue3中实现全局WebSocket的功能了。在需要使用WebSocket的组件中，可以通过inject获取WebSocket实例，并进行相关操作