Vue中即时通讯使用

Vue中即时通讯使用

使用vue-native-websocket插件

一、安装

npm install vue-native-websocket --save

二、引入

main.js

import VueNativeSock from 'vue-native-websocket'

Vue.use(VueNativeSock, 'ws://10.7.105.155:8002', {
  connectManually: true, // 手动连接
  format: 'json', // json格式
  reconnection: true, // 是否自动重连
  reconnectionAttempts: 1, // 自动重连次数
  reconnectionDelay: 2000, // 重连间隔时间
});

三、使用

largeScreen.vue

mounted() {
    this.$connect('ws://10.7.105.155:8002/webSocket') // 连接到 WebSocket 服务器
	this.$socket.onmessage = (message) => { // 接收服务端数据
      // console.log('websoceket---', JSON.parse(message.data))
      let obj = JSON.parse(message.data)
      switch (obj.type) {
        case '1':
          this.labList(obj.message)
          break
        case '2':
          this.taskList(obj.message)
          break
        case '3':
          this.dayTaskLIst(obj.message)
          break
        case '4':
          this.camera(obj.message)
          break
        case '5':
          this.dataList(obj.message)
          break
        case '6':
          this.performTasks(obj.message)
          break
        default:
          break
      }
    }
}，
methods: {
     labClick(val) {
      let msg = {
        type: 7,
        message: val.id
      }
      this.$socket.send(JSON.stringify(msg)) // 向服务端发送数据
    },
},
destroyed() {
    this.$disconnect() // 断开 WebSocket 连接
}