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>