Vue3 Typescript 全局 WebSocket 使用指南 - 在任意页面轻松连接

要在任意Vue页面中使用全局WebSocket，你可以使用Vue的插件机制来实现。下面是一个简单的示例：\n\n1. 首先，在你的项目中创建一个WebSocket插件文件，比如websocket.ts：\n\ntypescript\nimport { App, Plugin } from 'vue';\n\nconst plugin: Plugin = {\n install(app: App) {\n const url = 'ws://example.com'; // WebSocket服务器的URL\n\n const socket = new WebSocket(url);\n\n // 在WebSocket连接打开时执行的操作\n socket.onopen = () => {\n console.log('WebSocket连接已打开');\n };\n\n // 在收到WebSocket消息时执行的操作\n socket.onmessage = (event) => {\n console.log('收到WebSocket消息：', event.data);\n };\n\n // 在WebSocket连接关闭时执行的操作\n socket.onclose = () => {\n console.log('WebSocket连接已关闭');\n };\n\n // 将WebSocket实例挂载到Vue实例的全局属性中\n app.config.globalProperties.$socket = socket;\n },\n};\n\nexport default plugin;\n\n\n2. 然后，在你的入口文件（比如main.ts）中使用该插件：\n\ntypescript\nimport { createApp } from 'vue';\nimport App from './App.vue';\nimport WebSocketPlugin from './websocket.ts';\n\nconst app = createApp(App);\n\n// 使用WebSocket插件\napp.use(WebSocketPlugin);\n\napp.mount('#app');\n\n\n3. 现在，你可以在任意Vue页面中通过this.$socket访问全局WebSocket实例，进行WebSocket的相关操作：\n\ntypescript\nexport default {\n mounted() {\n // 发送WebSocket消息\n this.$socket.send('Hello WebSocket');\n\n // 关闭WebSocket连接\n this.$socket.close();\n },\n};\n\n\n这样，你就可以在任意Vue页面中使用全局WebSocket了。记得根据你的具体需求修改插件中的WebSocket连接URL和处理函数。