Vue Socket.io源码解读

背景

有一个项目，今年12月份开始重构，项目涉及到了socket。但是socket用的是以前一个开发人员封装的包（这个一直被当前的成员吐槽为什么不用已经千锤百炼的轮子）。因此，趁着这个重构的机会，将vue-socket.io引入，后端就用socket.io。我也好奇看了看vue-socket.io的源码（我不会说是因为这个库的文档实在太简略了，我为了稳点去看源码了解该怎么用）

开始

文件架构

我们主要看src下的三个文件，可以看出该库是用了观察者模式

Main.js

// 这里创建一个observe对象，具体做了什么可以看Observer.js文件
let observer = new Observer(connection, store)
// 将socket挂载到了vue的原型上,然后就可以
// 在vue实例中就可以this.$socket.emit('xxx', {})
Vue.prototype.$socket = observer.Socket;

import store from './yourstore'
Vue.use(VueSocketio, socketio('http://socketserver.com:1923'), store);

我们如果要使用这个库的时候，一般是这样写的代码（上图2）。上图一的connection和store就分别是图二的后两个参数。意思分别为socket连接的url和vuex的store啦。图一就是将这两个参数传进Observer，新建了一个observe对象，然后将observe对象的socket属性挂载在Vue原型上。那么我们在Vue的实例中就可以直接 this.$sockets.emit(‘xxx’, {})了

// 👇就是在vue实例的生命周期做一些操作
Vue.mixin({
  created(){
    let sockets = this.$options['sockets']
    this.$options.sockets = new Proxy({}, {
      set: (target, key, value) => {
        Emitter.addListener(key, value, this)
        target[key] = value
        return true;
      },
      deleteProperty: (target, key) => {
        Emitter.removeListener(key, this.$options.sockets[key], this)
        delete target.key;
        return true
      }
    })
    if(sockets){
      Object.keys(sockets).forEach((key) => {
        this.$options.sockets[key] = sockets[key];
      });
    }
  },
  /**
   * 在beforeDestroy的时候，将在created时监听好的socket事件，全部取消监听
   * delete this.$option.sockets的某个属性时，就会将取消该信号的监听
   */
  beforeDestroy(){
    let sockets = this.$options['sockets']
    if(sockets){
      Object.keys(sockets).forEach((key) => {
        delete this.$options.sockets[key]      });
    }
  }

下面就是在Vue实例的生命周期做一些操作。创建的时候，将实例中的$options.sockets的值先缓存下来，再将$options.sockets指向一个proxy对象，这个proxy对象会拦截外界对它的赋值和删除属性操作。这里赋值的时候，键就是socket事件，值就是回调函数。赋值时，就会监听该事件，然后将回调函数，放进该socket事件对应的回调数组里。删除时，就是取消监听该事件了，将赋值时压进回调数组的那个回调函数，删除，表示，我不监听了。这样写法，其实就跟vue的响应式一个道理。也因此，我们就可以动态地添加和移除监听socket事件了，比如this.$option.sockets.xxx = () => ()和 delete this.$option.sockets.xxx。最后将缓存的值，依次赋值回去，那么如下图的写法就会监听到事件并执行回调函数了：