当前位置：首页 > VUE

vue实现socket

2026-01-12 19:05:08VUE

Vue 实现 WebSocket 通信

在 Vue 中实现 WebSocket 通信可以通过原生 WebSocket API 或第三方库如 socket.io-client。以下是两种方法的详细实现方式：

使用原生 WebSocket API

原生 WebSocket 是浏览器内置的 API，适合简单的 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-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-client

socket.io-client 是 Socket.IO 的客户端库，提供更高级的功能如自动重连、事件监听等。

安装依赖：

npm install socket.io-client

在 Vue 中的实现：

vue实现socket

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

注意事项

跨域问题：确保 WebSocket 服务端支持跨域或与前端同源。
心跳机制：长时间连接需实现心跳检测，避免连接意外断开。
错误处理：监听 onerror 事件并处理异常情况。
性能优化：频繁通信时考虑防抖/节流或数据压缩。

服务端示例（Node.js + Socket.IO）

const express = require('express')
const app = express()
const server = require('http').createServer(app)
const io = require('socket.io')(server, {
  cors: {
    origin: '*' // 允许所有跨域请求（生产环境应限制）
  }
})

io.on('connection', (socket) => {
  console.log('Client connected')

  socket.on('message', (data) => {
    io.emit('message', data) // 广播消息给所有客户端
  })

  socket.on('disconnect', () => {
    console.log('Client disconnected')
  })
})

server.listen(3000, () => {
  console.log('Socket.IO server running on port 3000')
})