vue-socket.io踩坑实录

背景

最近在研究实时通讯，需要上vue+socket.io，网上有大佬出了一个叫vue-socket.io的插件。

实录1

组件内监听

sockets: {
    connect() {
        console.log('连接')
    }
},

程序结果是输出“连接”，但多次刷新发现，偶尔会出现不输出的情况。

经过调试发现，其实socket连接是异步的。不输出的情况恰是因为连接socket比vue加载组件的速度快，提前触发了connect事件。

这种情况如何调试调试

很简单，我们模拟写一个vue插件。

index.js

import SocketIO from "socket.io-client";
import config from '@/config'
import Mixin from "./mixin";

export default {
    install(Vue) {
        const socket = SocketIO(config.websocket, {
            transports: ['websocket'],
        });
        socket.on('connect', () => {
            console.log('插件内 连接')
        })
        Vue.prototype.$socket = socket;
        Vue.mixin(Mixin);
    }
};

mixin.js

export default {
    beforeCreate() {
        if (!this.sockets) this.sockets = {};
    },
    mounted() {
        if (this.$options.sockets) {
            Object.keys(this.$options.sockets).forEach(event => {
                this.$socket.on(event, this.$options.sockets[event])
            });
        }
    }
}

index.vue

export default {
// ...自己的业务代码
    sockets: {
        connect() {
            console.log('连接')
        }
    },
}

刷新看控制台会发现，'插件内 连接'的输出一直都有，而'连接'的却时有时无。

如何解决这个问题

不要用vue-socket.io，自建插件参考index.js，把有关初始化的事件都做到插件里。其他业务逻辑写入组件即可。

按道理使用vue-socket.io中的.io属性是可以的，但测试后发现也是有问题的。具体原因不得而知。

import VueSocketIO from 'vue-socket.io'

const socket = new VueSocketIO({
    connection: 'ws://192.168.1.***:9501',
    options: {
        transports: ['websocket'],
    }
});

socket.io.on('connect', () => {
    console.log('连接')
})

总结

不能依赖vue-socket.io插件，需要自己写一个简单的插件去封装。而且必要的全局性、初始化类的事件要在插件内实现，因为插件内只会被挂载一次。