vue 前端接入websocket demo

### Vue 前端 WebSocket 集成示例 为了实现 Vue 应用程序中的 WebSocket 连接，可以创建一个专门用于管理 WebSocket 的服务文件。这有助于保持组件逻辑清晰并使连接处理更加模块化。 #### 创建 WebSocket 服务 在 `src` 文件夹下新建名为 `services/WebSocketService.js` 的文件： ```javascript // services/WebSocketService.js class WebSocketService { constructor(url) { this.url = url; this.socket = null; this.connect(); } connect() { this.socket = new WebSocket(this.url); this.socket.onopen = () => console.log('WebSocket connection established'); this.socket.onerror = (error) => console.error('WebSocket error:', error); this.socket.onclose = () => console.log('WebSocket closed'); // Event listeners can be added here or exposed to components via methods. } sendMessage(message) { if (this.socket.readyState === WebSocket.OPEN) { this.socket.send(JSON.stringify(message)); } else { console.warn('WebSocket not open, cannot send message.'); } } onMessage(callback) { this.socket.onmessage = function(event) { const data = JSON.parse(event.data); callback(data); }; } } export default WebSocketService; ``` 此代码定义了一个简单的 WebSocket 客户端类[^1]，它可以在建立连接时执行特定操作，并提供发送消息的方法以及接收服务器响应的能力。 #### 初始化 WebSocket 并将其集成到应用中 编辑位于 `src/main.js` 中的应用入口点来初始化 WebSocket 实例并将其实例传递给根实例： ```javascript import Vue from 'vue'; import App from './App.vue'; import router from './router'; import WebSocketService from './services/WebSocketService'; const wsUrl = 'ws://your-websocket-url-here'; // Replace with your actual WS URL const webSocketService = new WebSocketService(wsUrl); new Vue({ el: '#app', render: h => h(App), router, provide() { return { webSocketService }; }, }); ``` 通过这种方式，在任何子组件内都可以轻松访问 WebSocket 服务实例[^2]。 #### 使用 WebSocket 组件 下面是一个如何在一个组件内部使用上述设置的例子： ```html <template> <div class="chat-room"> <!-- Chat UI elements --> </div> </template> <script> export default { name: "ChatRoom", inject: ['webSocketService'], mounted() { this.webSocketService.sendMessage({ type: 'JOIN_ROOM', room: 'general' }); this.webSocketService.onMessage((data) => { switch (data.type) { case 'MESSAGE': this.$emit('add-message', data.message); break; default: console.info(`Unhandled message type ${data.type}`); } }); }, beforeDestroy() { this.webSocketService.sendMessage({ type: 'LEAVE_ROOM', room: 'general' }); } }; </script> ``` 这段代码展示了怎样利用注入的服务对象来进行通信和监听来自服务器的消息事件。