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爲空，因此咱們須要將這個接口經過async/await作成同步，並且放在加載dom前置。
import VueSocketIO from 'vue-socket.io'
...
// 建立websocket連接，若是connection鏈接是固定值。
// 您請求接口的方法，獲取connection地址
const url = await getUrl()
Vue.use(new VueSocketIO({
  // 調試
  debug: true,
  // 連接地址
  connection: url,
  // vuex配置
  vuex: {
    store,
    // vuex mutation 前綴
    mutationPrefix: 'SOCKET_',
    // vuex action 前綴
    actionPrefix: 'SOCKET_'
  }
}))

import App from '.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中使用）