Vue-Socket.io源碼解讀

時間  2019-11-07
標籤 vue socket.io socket 源碼 解讀 欄目 系統網絡 简体版
原文   原文鏈接

背景

有一個項目，今年12月份開始重構，項目涉及到了socket。可是socket用的是之前一個開發人員封裝的包（這個一直被當前的成員吐槽爲何不用已經千錘百煉的輪子）。所以，趁着這個重構的機會，將vue-socket.io引入，後端就用socket.io。我也好奇看了看vue-socket.io的源碼（我不會說是由於這個庫的文檔實在太簡略了，我爲了穩點去看源碼瞭解該怎麼用）vue

開始

  • 文件架構

文件架構咱們主要看src下的三個文件，能夠看出該庫是用了觀察者模式git

  • 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', {})了github

// ?就是在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。最後將緩存的值，依次賦值回去，那麼以下圖的寫法就會監聽到事件並執行回調函數了：vuex

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);
    }
  }
})
  • Emitter.js

Emitter.js主要是寫了一個Emitter對象，該對象提供了三個方法：後端

addListener
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
}

其實很常規啦，實現發佈訂閱者模式或者觀察者模式代碼的同窗都很清楚這段代碼的意思。Emiiter用一個map來存儲事件以及它對應的回調事件數組。這段代碼先判斷map中是否以前已經存儲過了該事件，若是沒有，初始化該事件對應的值爲空數組，而後將當前的回調函數，壓進去，反之，直接壓進去。數組

removeListener
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;

這裏也很簡單啦，獲取該事件對應的回調數組。若是不爲空，就去尋找須要移除的回調，找到後，直接刪除，而後將新的回調數組覆蓋原來的那個就能夠了緩存

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

這裏就是監聽到事件後，執行該事件對應的回調函數，注意這裏的call，由於監聽到事件後咱們可能要修改下vue實例的數據或者調用一些方法，用過vue的同窗都知道咱們都是this.xxx來調用的，因此必定得將回調函數的this指向vue實例，這也是爲何存回調事件時也要把vue實例存下來的緣由。架構

  • Observer.js
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()

}

這個Observer.js裏也主要是寫了一個Observer的class，以上是它的構造函數，構造函數第一件事是判斷connection是否是字符串，若是是就構建一個socket實例，若是不是，就大概是個socket的實例了，而後直接掛載在它的對象實例上。其實這裏我以爲能夠參數檢查嚴格點， 好比字符串被人搞怪地可能會傳入一個非法的url，對吧。這個時候判斷下，拋出一個error提醒下也好，不過應該也沒人這麼無聊吧，2333。而後若是傳入了store，也掛在對象實例上吧。最後就啓動監聽事件啦。咱們看看onEvent的邏輯socket

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)
                })
            })
    }

這裏就是有點相似重載onevent這個函數了，監聽到事件後，將數據拆包，而後通知執行回調和傳遞給store。大致的邏輯是這樣子。而後這代碼實現有兩部分，第一部分和第二部分邏輯基本同樣。只是分開寫。（其實我也不是很懂啦，若是頗有必要的話，我猜第一部分的寫法還監聽不了第二部分的事件吧，因此要另外監聽）。最後只剩下一個passToStore了，其實也很容易懂函數

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)
     }
 }

passToStore嘛其實就是作兩個事情，一個是獲取與該事件對應的mutation，而後發起一個commit，一個是獲取與該事件對應的action，而後dispatch。只是這裏的實現對mutations和actions的命名有了要求，好比mutations的命名必定得是SOCKET_開頭，action就是一個得socket_開頭，而後還得是駝峯式命名。

最後

  • 首先，這個源碼是否是略有點簡單，哈哈哈，不過，能給大家一些幫助，我以爲也挺好的
  • 而後，就是若是上面我說的有不是很對的，請你們去這裏發issue或者直接評論吧
  • 最後，源碼的詳細的註釋在這裏，歡迎你們提issue，若是能star和fork就更好了。之後我儘可能更新本身閱讀源碼的感悟，你們一塊兒學習。
相關文章
相關標籤/搜索
每日一句
    每一个你不满意的现在，都有一个你没有努力的曾经。
本站公眾號
   歡迎關注本站公眾號,獲取更多信息
聯繫我們 最近搜索 最新文章 沪ICP备13005482号-10 MyBatis教程 SQL 教程 MySQL教程 Java 教程 Thymeleaf 教程 Hibernate教程 Spring教程 Redis教程