Vue-websocket使用

Vue中使用websocket

1.介绍：websocket是一个双向通行工具，解决了原来的http单向通信的弊端，可以让服务器主动向客户端推送数据

// 安装客户端的socket

npm i socket.io-client --save

/*

    安装Vue配置socket的工具

    注意：需要安装3.0.7版本的包，最新的包会有问题
*/

npm i vue-socket.io@3.0.7 --save

// 在main.js中引入设置

import VueSocketIO from 'vue-socket.io'

import SocketIO from 'socket.io-client'

Vue.use(new VueSocketIO({

   // 生产环境需要切换成false
  debug: true,

  // 连接的后端地址  
  connection: SocketIO('http://localhost:3000?token=ab'),

  // 需要使用vuex的话，需要配置一下  
  vuex: {
    store,
    // mutation中定义方法的前缀
    mutationPrefix: 'SOCKET_',
    // actions中定义方法的前缀
    actionPrefix: 'SOCKET_'
  }
}))

// 在组件中使用

<script>

export default {

    mounted () {


        // 像后端触发一个事件函数，像后端传递数据
        this.$socket.emit('message', { name: '小美' })
    }

    /*

        接收后端的事件函数传递的参数，在sockets对象中定义事件函数，

        包括一些内置的事件方法
    */

    sockets: {

        // 内置的事件方法
        connect () {

            console.log('和服务器连接成功调用')

            // 是否已经连接到服务器
            console.log(this.$socket.connected)

            // 是否和服务器断开连接
            console.log(this.$socket.disconnected)

            // 套接字会话的唯一标识符,在reconnect事件后更
            console.log(this.$socket.id)

        },

        disconnect () {
            
            console.log('和服务器断开连接时调用')

            // 手动重新连接
            this.$socket.open()

            // 断开连接时重新连接，和open一样
            this.$socket.connect()
        },

        reconnecting () {

            console.log('尝试重新连接时触发')
        },

        reconnect_error () {

            console.log('重新连接错误时触发')
        },

        // 服务器端触发的自定义事件

    
        vueMessage (msg) {

            console.log(msg)

            // 像服务器端发送数据
            this.$socket.send('来吧面对疾风吧')
        }
    }
}
</script>