vue 项目实现websocket

安装依赖

在Vue项目中，使用WebSocket通常不需要额外安装依赖，因为浏览器原生支持WebSocket API。如果需要更高级的功能或封装，可以安装vue-native-websocket或socket.io-client等库。

npm install socket.io-client

原生WebSocket实现

创建一个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

Socket.IO提供了更丰富的功能，如自动重连、房间管理等。

import io from 'socket.io-client'

export default {
  data() {
    return {
      socket: null,
      messages: []
    }
  },
  mounted() {
    this.initSocketIO()
  },
  beforeDestroy() {
    this.socket.disconnect()
  },
  methods: {
    initSocketIO() {
      this.socket = io('http://your-socketio-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)
    }
  }
}

封装为Vue插件

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

// src/plugins/websocket.js
import io from 'socket.io-client'

export default {
  install(Vue, options) {
    const socket = io(options.connection)

    Vue.prototype.$socket = socket

    socket.on('connect', () => {
      Vue.prototype.$isConnected = true
    })

    socket.on('disconnect', () => {
      Vue.prototype.$isConnected = false
    })
  }
}

// main.js
import Vue from 'vue'
import WebSocketPlugin from './plugins/websocket'

Vue.use(WebSocketPlugin, {
  connection: 'http://your-socketio-server.com'
})

在组件中使用插件

通过全局注入的$socket使用WebSocket功能。

export default {
  data() {
    return {
      messages: []
    }
  },
  mounted() {
    this.$socket.on('message', (data) => {
      this.messages.push(data)
    })
  },
  methods: {
    sendMessage(message) {
      this.$socket.emit('message', message)
    }
  }
}

错误处理与重连

实现自动重连机制，增强稳定性。

initWebSocket() {
  const connect = () => {
    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, retrying...')
      setTimeout(connect, 5000)
    }
  }

  connect()
}

使用Vuex管理状态

在大型项目中，使用Vuex集中管理WebSocket状态和消息。

// store/modules/websocket.js
export default {
  state: {
    socket: null,
    messages: []
  },
  mutations: {
    SET_SOCKET(state, socket) {
      state.socket = socket
    },
    ADD_MESSAGE(state, message) {
      state.messages.push(message)
    }
  },
  actions: {
    initWebSocket({ commit }) {
      const socket = new WebSocket('ws://your-websocket-server.com')
      commit('SET_SOCKET', socket)

      socket.onmessage = (event) => {
        commit('ADD_MESSAGE', event.data)
      }
    },
    sendMessage({ state }, message) {
      if (state.socket && state.socket.readyState === WebSocket.OPEN) {
        state.socket.send(message)
      }
    }
  }
}