当前位置：首页 > VUE

vue 项目实现websocket

2026-03-29 02:44:03VUE

Vue 项目中实现 WebSocket

安装依赖

在 Vue 项目中，可以直接使用浏览器原生 WebSocket API，无需额外安装依赖。若需要更高级的功能（如自动重连、心跳检测等），可以安装第三方库如 socket.io-client 或 reconnecting-websocket。

npm install socket.io-client
# 或
npm install reconnecting-websocket

原生 WebSocket 实现

创建一个 WebSocket 连接，监听事件并处理消息。

vue 项目实现websocket

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

      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-client

socket.io-client 提供了更丰富的功能，如自动重连、命名空间等。

vue 项目实现websocket

import io from 'socket.io-client';

export default {
  data() {
    return {
      socket: null,
      messages: []
    }
  },
  mounted() {
    this.initSocket();
  },
  beforeDestroy() {
    this.socket.disconnect();
  },
  methods: {
    initSocket() {
      this.socket = io('http://your-socket-io-server.com');

      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');
      });
    },
    sendMessage(message) {
      this.socket.emit('message', message);
    }
  }
}

使用 reconnecting-websocket

reconnecting-websocket 是一个轻量级库，支持自动重连。

import ReconnectingWebSocket from 'reconnecting-websocket';

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

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

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

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

      this.socket.onclose = () => {
        console.log('ReconnectingWebSocket disconnected');
      };
    },
    sendMessage(message) {
      this.socket.send(message);
    }
  }
}

封装为 Vue 插件

将 WebSocket 封装为 Vue 插件，便于全局使用。

// src/plugins/websocket.js
const WebSocketPlugin = {
  install(Vue, options) {
    const socket = new WebSocket(options.url);

    Vue.prototype.$socket = socket;
  }
};

// main.js
import WebSocketPlugin from './plugins/websocket';

Vue.use(WebSocketPlugin, {
  url: 'ws://your-websocket-server.com'
});

// 在组件中使用
export default {
  mounted() {
    this.$socket.onmessage = (event) => {
      console.log('Message from server:', event.data);
    };
  },
  methods: {
    sendMessage(message) {
      this.$socket.send(message);
    }
  }
}