vue如何与后端建立 WebSocket 长连接

Vue.js 与后端建立 WebSocket 长连接通常涉及到前端使用 Vue 的官方库 `vue-websocket` 或者第三方库，如 `axios` 配合第三方的 WebSocket 库，如 `socket.io-client`。以下是基本步骤：

1. **安装依赖**:
- 安装 `vue-websocket` 或者 `axios/socket.io-client`:

     npm install vue-websocket (对于vue-websocket)
     npm install axios socket.io-client (对于axios + socket.io)

2. **引入并配置**
- 如果使用 `vue-websocket`：

     import { useWebSocket } from 'vue-websocket';
     const { ws } = useWebSocket('ws://your-backend-url');

- 如果使用 `axios` 和 `socket.io-client`：

     import axios from 'axios';
     import io from 'socket.io-client';

     const socket = io('ws://your-backend-url', {
       transports: ['websocket'],
     });

3. **监听事件**
- 使用 `onopen`, `onmessage`, `onclose`, `onerror` 等方法处理连接状态变化和消息接收：

     // 连接打开时执行
     ws.onopen(() => {
       console.log('WebSocket connected!');
     });

     // 接收消息
     ws.onmessage(event => {
       console.log('Received message:', event.data);
     });

     // 关闭连接
     ws.onclose(() => {
       console.log('WebSocket closed.');
     });

     // 错误处理
     ws.onerror(error => {
       console.error('WebSocket error:', error);
     });

4. **发送数据**
- 发送数据时使用 `send` 方法：

     socket.emit('myEvent', { data: 'Hello from Vue!' });

5. **错误处理**
- 保证关闭连接时清理资源，防止内存泄漏。