当前位置：首页 > VUE

vue实现socket

2026-03-07 02:09:18VUE

Vue 实现 WebSocket 通信

在 Vue 项目中集成 WebSocket 通信可以通过原生 WebSocket API 或第三方库实现。以下是具体实现方法：

使用原生 WebSocket API

在 Vue 组件中直接使用浏览器原生 WebSocket 对象：

export default {
  data() {
    return {
      socket: null,
      messages: []
    }
  },
  mounted() {
    this.initWebSocket();
  },
  beforeDestroy() {
    this.socket.close();
  },
  methods: {
    initWebSocket() {
      this.socket = new WebSocket('ws://your-websocket-server-url');

      this.socket.onopen = () => {
        console.log('WebSocket connected');
      };

      this.socket.onmessage = (event) => {
        this.messages.push(event.data);
      };

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

      this.socket.onclose = () => {
        console.log('WebSocket disconnected');
      };
    },
    sendMessage(message) {
      if (this.socket.readyState === WebSocket.OPEN) {
        this.socket.send(message);
      }
    }
  }
}

使用 Socket.IO 客户端

对于需要更高级功能的场景（如自动重连、房间管理等），可以使用 Socket.IO：

安装依赖：

npm install socket.io-client

在 Vue 组件中使用：

import io from 'socket.io-client';

export default {
  data() {
    return {
      socket: null,
      messages: []
    }
  },
  mounted() {
    this.socket = io('http://your-socketio-server-url');

    this.socket.on('connect', () => {
      console.log('Socket.IO connected');
    });

    this.socket.on('message', (data) => {
      this.messages.push(data);
    });

    this.socket.on('disconnect', () => {
      console.log('Socket.IO disconnected');
    });
  },
  beforeDestroy() {
    this.socket.disconnect();
  },
  methods: {
    sendMessage(message) {
      this.socket.emit('message', message);
    }
  }
}

全局状态管理方案

对于需要在多个组件间共享 WebSocket 状态的场景，可以将 WebSocket 实例挂载到 Vuex 或 Pinia：

创建 store 模块（以 Pinia 为例）：


// stores/websocket.js
import { defineStore } from 'pinia';
import io from 'socket.io-client';

export const useWebSocketStore = defineStore('websocket', { state: () => ({ socket: null, messages: [] }), actions: { connect() { this.socket = io('http://your-server-url'); this.socket.on('message', (data) => { this.messages.push(data); }); }, disconnect() { if (this.socket) { this.socket.disconnect(); } }, send(message) { this.socket.emit('message', message); } } });


2. 在组件中使用：
```javascript
import { useWebSocketStore } from '@/stores/websocket';

export default {
  setup() {
    const websocketStore = useWebSocketStore();

    onMounted(() => {
      websocketStore.connect();
    });

    onBeforeUnmount(() => {
      websocketStore.disconnect();
    });

    return {
      messages: websocketStore.messages,
      sendMessage: websocketStore.send
    };
  }
}

错误处理与重连机制

实现健壮的 WebSocket 连接需要处理异常和自动重连：

vue实现socket

// 在原生 WebSocket 中
initWebSocket() {
  const reconnect = () => {
    setTimeout(() => this.initWebSocket(), 5000);
  };

  this.socket = new WebSocket('ws://your-url');

  this.socket.onclose = () => {
    reconnect();
  };

  this.socket.onerror = () => {
    this.socket.close();
  };
}

// 在 Socket.IO 中（已内置重连机制，可通过配置调整）
this.socket = io('http://your-url', {
  reconnectionAttempts: 5,
  reconnectionDelay: 3000
});