vue使用socket.io实现实时通讯

安装 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;
//监听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监听

<script>
export default {
  name: 'app',
  sockets: {
        connect() {
            //查看socket是否渲染成功 
        },
        servermessage(data) {
            //监听message事件，方法是后台定义和提供的
            console.log(data)
        },
    },
}
</script>

发送数据

this.$socket.emit("clientmessage", "发送内容"); 

socket自带的几个事件

connect:查看socket是否渲染成功 
disconnect:检测socket断开连接 
reconnect:重新连接socket事件