// 這里創建一個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);

// 👇就是在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]
      });
    }
  }

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) {
  // 回調函數類型是回調函數才對
  if(typeof callback == 'function'){
    // 這里就很常見的寫法了，判斷map中是否已經注冊過該事件了
    // 如果沒有，就初始化該事件映射的值為空數組，方便以后直接存入回調函數
    // 反之，直接將回調函數放入數組即可
    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) {
  // 這里很明白吧，就是判斷這個connection是什么類型
  // 這里的處理就是你可以傳入一個連接好的socket實例，也可以是一個url
  if(typeof connection == 'string'){
    this.Socket = Socket(connection);
  }else{
    this.Socket = connection
  }

  // 如果有傳進vuex的store可以響應在store中寫的mutations和actions
  // 這里只是掛載在這個oberver實例上
  if(store) this.store = store;

  // 監聽，啟動！
  this.onEvent()

}

  onEvent(){
    // 監聽服務端發來的事件，packet.data是一個數組
    // 第一項是事件，第二個是服務端傳來的數據
    // 然后用emit通知訂閱了該信號的回調函數執行
    // 如果有傳入了vuex的store，將該事件和數據傳入passToStore，執行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)])
    };

    // 這里跟上面意思應該是一樣的，我很好奇為什么要分開寫，難道上面的寫法不會監聽到下面的信號？
    // 然后這里用一個變量暫存this
    // 但是下面都是箭頭函數了，我覺得沒必要，畢竟箭頭函數會自動綁定父級上下文的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_開頭的就不用管了
   if(!event.startsWith('SOCKET_')) return

   // 這里遍歷vuex的store中的mutations
   for(let namespaced in this.store._mutations) {
     // 下面的操作是因為，如果store中有module是開了namespaced的，會在mutation的名字前加上 xxx/
     // 這里將mutation的名字拿出來
     let mutation = namespaced.split('/').pop()
     // 如果名字和事件是全等的，那就發起一個commit去執行這個mutation
     // 也因此，mutation的名字一定得是 SOCKET_開頭的了
     if(mutation === event.toUpperCase()) this.store.commit(namespaced, payload)
   }
   // 這里類似上面
   for(let namespaced in this.store._actions) {
     let action = namespaced.split('/').pop()

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

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

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