安裝 vue-socket.io

npm install --save vue-socket.io

src>lib>socket.js

新建文件夾及socket.js文件

import Vue from 'vue'
import VueSocketIO from 'vue-socket.io'
var a
var wesocket = {
    debug: true,
    connection: '',
}

function getSocket(t) {
    var socketIp = 'http://...';//socket地址
    wesocket.connection = socketIp;
    if (localStorage.getItem('Token') || t) {//判斷是否有token
        let tk = localStorage.getItem('Token') ? localStorage.getItem('Token') : t;
        wesocket.connection = socketIp + '?usekey=' + tk;
    }
    if (wesocket.connection != '') {
        Vue.use(new VueSocketIO(wesocket))
    }
}
getSocket()
Vue.prototype.$getSocket = getSocket;
//監(jiān)聽localStorage，判斷是否有token
window.addEventListener('setItemEvent', function(e) {
    if (e.key == 'Token' && e.newValue) {
        let token = e.newValue
        getSocket(token)
    }
})
export default a

main.js引入SocketIO

// websocket
import VueSocketIO from './lib/socket'

vue2.0+需要把VueSocketIO 添加到new Vue里邊，vue3.0+則不需要

new Vue({
    el: '#app',
    VueSocketIO,
    components: {
        App
    },
    template: '<App/>'
})

socket監(jiān)聽

<script>
export default {
  name: 'app',
  sockets: {
        connect() {
            //查看socket是否渲染成功 
        },
        servermessage(data) {
            //監(jiān)聽message事件，方法是后臺定義和提供的
            console.log(data)
        },
    },
}
</script>

發(fā)送數(shù)據(jù)

this.$socket.emit("clientmessage", "發(fā)送內容"); 

socket自帶的幾個事件

connect:查看socket是否渲染成功 
disconnect:檢測socket斷開連接 
reconnect:重新連接socket事件