Vue3 全局 WebSocket 实现：使用 provide 和 inject

在Vue3中，可以使用Vue提供的provide和inject来实现全局WebSocket的功能。具体如下所示：\n\n1. 在主入口文件（如main.js）中创建WebSocket实例，并将其作为全局的provide：\n\njavascript\nimport { createApp } from 'vue';\nimport App from './App.vue';\nimport { createWebSocket } from './utils/webSocket';\n\nconst app = createApp(App);\n\nconst webSocket = createWebSocket();\napp.provide('webSocket', webSocket);\n\napp.mount('#app');\n\n\n2. 在需要使用WebSocket的组件中，使用inject来获取WebSocket实例：\n\njavascript\nimport { inject } from 'vue';\n\nexport default {\n name: 'MyComponent',\n setup() {\n const webSocket = inject('webSocket');\n\n // 在这里可以使用webSocket进行WebSocket操作\n // 例如：webSocket.send('Hello');\n\n return {\n webSocket,\n };\n },\n};\n\n\n3. 在utils/webSocket.js文件中，创建WebSocket实例并定义其方法：\n\njavascript\nexport function createWebSocket() {\n const webSocket = new WebSocket('ws://example.com');\n\n webSocket.onopen = () => {\n console.log('WebSocket is connected');\n };\n\n webSocket.onmessage = (event) => {\n console.log('Received message:', event.data);\n };\n\n webSocket.onclose = () => {\n console.log('WebSocket is disconnected');\n };\n\n webSocket.onerror = (error) => {\n console.error('WebSocket error:', error);\n };\n\n return webSocket;\n}\n\n\n通过以上步骤，你就可以在Vue3中实现全局WebSocket的功能了。在需要使用WebSocket的组件中，可以通过inject获取WebSocket实例，并进行相关操作。