// 這里創(chuàng)建一個(gè)observe對(duì)象，具體做了什么可以看Observer.js文件
let observer = new Observer(connection, store)

// 將socket掛載到了vue的原型上,然后就可以
// 在vue實(shí)例中就可以this.$socket.emit('xxx', {})
Vue.prototype.$socket = observer.Socket;

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

// 👇就是在vue實(shí)例的生命周期做一些操作
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的時(shí)候，將在created時(shí)監(jiān)聽(tīng)好的socket事件，全部取消監(jiān)聽(tīng)
   * delete this.$option.sockets的某個(gè)屬性時(shí)，就會(huì)將取消該信號(hào)的監(jiān)聽(tīng)
   */
  beforeDestroy(){
    let sockets = this.$options['sockets']

    if(sockets){
      Object.keys(sockets).forEach((key) => {
        delete this.$options.sockets[key]
      });
    }
  }

var vm = new Vue({
 sockets:{
  connect: function(){
   console.log('socket connected')
  },
  customEmit: function(val){
   console.log('this method was fired by the socket server. eg: io.emit("customEmit", data)')
  }
 },
 methods: {
  clickButton: function(val){
    // $socket is socket.io-client instance
    this.$socket.emit('emit_method', val);
  }
 }
})

addListener(label, callback, vm) {
  // 回調(diào)函數(shù)類(lèi)型是回調(diào)函數(shù)才對(duì)
  if(typeof callback == 'function'){
    // 這里就很常見(jiàn)的寫(xiě)法了，判斷map中是否已經(jīng)注冊(cè)過(guò)該事件了
    // 如果沒(méi)有，就初始化該事件映射的值為空數(shù)組，方便以后直接存入回調(diào)函數(shù)
    // 反之，直接將回調(diào)函數(shù)放入數(shù)組即可
    this.listeners.has(label) || this.listeners.set(label, []);
    this.listeners.get(label).push({callback: callback, vm: vm});

    return true
  }

  return false
}

if (listeners && listeners.length) {
  index = listeners.reduce((i, listener, index) => {
    return (typeof listener.callback == 'function' && listener.callback === callback && listener.vm == vm) ?
      i = index :
      i;
  }, -1);

  if (index > -1) {
    listeners.splice(index, 1);
    this.listeners.set(label, listeners);
    return true;
  }
}
return false;

if (listeners && listeners.length) {
  listeners.forEach((listener) => {
    listener.callback.call(listener.vm,...args)
  });
  return true;
}
return false;

constructor(connection, store) {
  // 這里很明白吧，就是判斷這個(gè)connection是什么類(lèi)型
  // 這里的處理就是你可以傳入一個(gè)連接好的socket實(shí)例，也可以是一個(gè)url
  if(typeof connection == 'string'){
    this.Socket = Socket(connection);
  }else{
    this.Socket = connection
  }

  // 如果有傳進(jìn)vuex的store可以響應(yīng)在store中寫(xiě)的mutations和actions
  // 這里只是掛載在這個(gè)oberver實(shí)例上
  if(store) this.store = store;

  // 監(jiān)聽(tīng)，啟動(dòng)！
  this.onEvent()

}

  onEvent(){
    // 監(jiān)聽(tīng)服務(wù)端發(fā)來(lái)的事件，packet.data是一個(gè)數(shù)組
    // 第一項(xiàng)是事件，第二個(gè)是服務(wù)端傳來(lái)的數(shù)據(jù)
    // 然后用emit通知訂閱了該信號(hào)的回調(diào)函數(shù)執(zhí)行
    // 如果有傳入了vuex的store，將該事件和數(shù)據(jù)傳入passToStore，執(zhí)行passToStore的邏輯
    var super_onevent = this.Socket.onevent;
    this.Socket.onevent = (packet) => {
      super_onevent.call(this.Socket, packet);

      Emitter.emit(packet.data[0], packet.data[1]);

      if(this.store) this.passToStore('SOCKET_'+packet.data[0], [ ...packet.data.slice(1)])
    };

    // 這里跟上面意思應(yīng)該是一樣的，我很好奇為什么要分開(kāi)寫(xiě)，難道上面的寫(xiě)法不會(huì)監(jiān)聽(tīng)到下面的信號(hào)？
    // 然后這里用一個(gè)變量暫存this
    // 但是下面都是箭頭函數(shù)了，我覺(jué)得沒(méi)必要，畢竟箭頭函數(shù)會(huì)自動(dòng)綁定父級(jí)上下文的this
    let _this = this;

    ["connect", "error", "disconnect", "reconnect", "reconnect_attempt", "reconnecting", "reconnect_error", "reconnect_failed", "connect_error", "connect_timeout", "connecting", "ping", "pong"]
      .forEach((value) => {
        _this.Socket.on(value, (data) => {
          Emitter.emit(value, data);
          if(_this.store) _this.passToStore('SOCKET_'+value, data)
        })
      })
  }

 passToStore(event, payload){
   // 如果事件不是以SOCKET_開(kāi)頭的就不用管了
   if(!event.startsWith('SOCKET_')) return

   // 這里遍歷vuex的store中的mutations
   for(let namespaced in this.store._mutations) {
     // 下面的操作是因?yàn)椋绻鹲tore中有module是開(kāi)了namespaced的，會(huì)在mutation的名字前加上 xxx/
     // 這里將mutation的名字拿出來(lái)
     let mutation = namespaced.split('/').pop()
     // 如果名字和事件是全等的，那就發(fā)起一個(gè)commit去執(zhí)行這個(gè)mutation
     // 也因此，mutation的名字一定得是 SOCKET_開(kāi)頭的了
     if(mutation === event.toUpperCase()) this.store.commit(namespaced, payload)
   }
   // 這里類(lèi)似上面
   for(let namespaced in this.store._actions) {
     let action = namespaced.split('/').pop()

     // 這里強(qiáng)制要求了action的名字要以 socket_ 開(kāi)頭
     if(!action.startsWith('socket_')) continue

     // 這里就是將事件轉(zhuǎn)成駝峰式
     let camelcased = 'socket_'+event
         .replace('SOCKET_', '')
         .replace(/^([A-Z])|[\W\s_]+(\w)/g, (match, p1, p2) => p2 ? p2.toUpperCase() : p1.toLowerCase())

     // 如果action和事件全等，那就發(fā)起這個(gè)action
     if(action === camelcased) this.store.dispatch(namespaced, payload)
   }
 }