vue实现websocket之vue-socket.io插件

吾乃世间远行客，幸得风雨同舟人

安装插件

npm install vue-socket.io --save

main.js中引入插件

// 引入socket
import VueSocketIO from 'vue-socket.io'
...
// 创建websocket链接，如果connection连接固定的。
Vue.use(new VueSocketIO({
  // 调试
  debug: true,
  // 链接地址，这个链接可以调试
  connection: 'http://metinseylan.com:1992',
  // vuex配置
  vuex: {
    store,
    // vuex mutation 前缀
    mutationPrefix: 'SOCKET_',
    // vuex action 前缀
    actionPrefix: 'SOCKET_'
  }
}))
// 如果connection连接是通过接口获取的，一般接口都是异步获取的，所以就存在this.$sockets为空，放在加载app前置。
import VueSocketIO from 'vue-socket.io'
...
// 您请求接口的方法，获取connection地址
const url = getUrl()
Vue.use(new VueSocketIO({
  // 调试
  debug: true,
  // 链接地址
  connection: url,
  // vuex配置
  vuex: {
    store,
    // vuex mutation 前缀
    mutationPrefix: 'SOCKET_',
    // vuex action 前缀
    actionPrefix: 'SOCKET_'
  }
}))
// 加载所有dom，放在接口配置socket链接之后执行
import App from '.app'
// 或者，创建获取链接地址的接口，通过new Promise()，然后then获取接口值，等取到链接地址以后，加载app。
getUrl().then(res => {
    Vue.use(new VueSocketIO({
      // 调试
      debug: true,
      // 链接地址
      connection: res.url,
      // vuex配置
      vuex: {
        store,
        // vuex mutation 前缀
        mutationPrefix: 'SOCKET_',
        // vuex action 前缀
        actionPrefix: 'SOCKET_'
      }
    }))
    new Vue({
      el: '#app',
      router,
      store,
      components: {
        App
      },
      template: '<App/>'
    })
})

创建一个.vue文件发送，接收消息，发送消息，注销。

export default {
    name: 'socket',
    mounted () {
        // 第一种：监听，接收消息
        this.sockets.subscribe('TEAM_NOTICE', (data) => {
            console.log(data)
        })
    },
    sockets: {
        // 三个默认方法
        // 链接成功
        connect () {
          console.log('socket connected')
        },
        // 链接失败
        disconnect () {
          console.log('socket disconnect')
        },
        // 重新连接
        reconnect () {
          console.log('socket reconnect')
        },
        // 第二种：监听、接收消息方法
        TEAM_NOTICE (data) {
          console.log(data, 'TEAM_NOTICE，推送的消息')
        }
    },
    methods: {
        // 发送消息
        sendNotice (context) {
            this.$socket.emit('TEAM_NOTICE', '发送内容')
    },
    // 注销sockets
      destroyed () {
        this.sockets.unsubscribe('TEAM_NOTICE')
      }

待续...(在vuex中使用）