当前位置：首页 > VUE

用vue实现websocket

2026-01-19 04:53:44VUE

使用 Vue 实现 WebSocket

安装依赖

确保项目已初始化，若未安装 Vue，可通过以下命令创建项目：

npm init vue@latest

若需单独安装 WebSocket 客户端库（如 websocket 或原生 API）：

npm install websocket

创建 WebSocket 服务

在 Vue 组件中直接使用浏览器原生 WebSocket API，无需额外依赖。以下为基本实现：

// 在 Vue 组件的 script 部分
export default {
  data() {
    return {
      socket: null,
      messages: [],
      inputMessage: ''
    };
  },
  mounted() {
    this.initWebSocket();
  },
  beforeUnmount() {
    this.closeWebSocket();
  },
  methods: {
    initWebSocket() {
      // 替换为你的 WebSocket 服务地址
      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() {
      if (this.socket && this.socket.readyState === WebSocket.OPEN) {
        this.socket.send(this.inputMessage);
        this.inputMessage = '';
      } else {
        console.error('WebSocket is not connected');
      }
    },
    closeWebSocket() {
      if (this.socket) {
        this.socket.close();
      }
    }
  }
};

模板部分

在 Vue 组件的模板中添加界面元素：

<template>
  <div>
    <div>
      <input v-model="inputMessage" @keyup.enter="sendMessage" placeholder="输入消息" />
      <button @click="sendMessage">发送</button>
    </div>
    <div>
      <h3>收到的消息：</h3>
      <ul>
        <li v-for="(msg, index) in messages" :key="index">{{ msg }}</li>
      </ul>
    </div>
  </div>
</template>

使用第三方库

若需更高级功能（如自动重连、心跳检测），可考虑使用 vue-native-websocket 或 socket.io-client：

vue-native-websocket
安装：
```
npm install vue-native-websocket
```

在 Vue 中全局配置：

import Vue from 'vue';
import VueNativeSock from 'vue-native-websocket';

Vue.use(VueNativeSock, 'ws://your-server-url', {
  reconnection: true,
  reconnectionAttempts: 5,
  reconnectionDelay: 3000
});

在组件中使用：

this.$socket.send('Hello');
this.$options.sockets.onmessage = (msg) => {
  console.log(msg);
};

socket.io-client
安装：
```
npm install socket.io-client
```

在组件中使用：

用vue实现websocket

import io from 'socket.io-client';

export default {
  data() {
    return {
      socket: null
    };
  },
  mounted() {
    this.socket = io('http://your-server-url');
    this.socket.on('message', (data) => {
      console.log(data);
    });
  },
  methods: {
    sendMessage() {
      this.socket.emit('message', this.inputMessage);
    }
  }
};