摘要:刪除時,就是取消監聽該事件了,將賦值時壓進回調數組的那個回調函數,刪除,表示,我不監聽了。這段代碼先判斷中是否之前已經存儲過了該事件,如果沒有,初始化該事件對應的值為空數組,然后將當前的回調函數,壓進去,反之,直接壓進去。
背景
有一個項目,今年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。最后將緩存的值,依次賦值回去,那么如下圖的寫法就會監聽到事件并執行回調函數了:
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(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中是否之前已經存儲過了該事件,如果沒有,初始化該事件對應的值為空數組,然后將當前的回調函數,壓進去,反之,直接壓進去。
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;
這里就是監聽到事件后,執行該事件對應的回調函數,注意這里的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的邏輯
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])|[Ws_]+(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就更好了。以后我盡量更新自己閱讀源碼的感悟,大家一起學習。
文章版權歸作者所有,未經允許請勿轉載,若此文章存在違規行為,您可以聯系管理員刪除。
轉載請注明本文地址:http://specialneedsforspecialkids.com/yun/92252.html
摘要:項目中在瀏覽器下報缺少,缺少今天用打開了我們的項目,結果一片空白于是趕緊打開一探究竟行,是啥呢,點過去瞅瞅好吧,去里把注釋掉錯誤信息變成了缺少經排查,是導致的這條報錯那么,和就是罪魁禍首了。 Vue-Cli項目中vue-socketio.js在IE瀏覽器下報SCRIPT1003: 缺少 : ,vue-charts 缺少) 今天用ie打開了我們的Vue項目,結果一片空白 于是趕緊打開F1...
摘要:一寫在前面如何實現文章的實時保存一般寫文章的寫博客的網站都會有這個功能點,這樣保證了用戶在不小心退出的情況下數據的保存下來,這樣的交互比較符合用戶的使用心理學。 一、寫在前面 如何實現文章的實時保存?一般寫文章的寫博客的網站都會有這個功能點,這樣保證了用戶在不小心退出的情況下數據的保存下來,這樣的交互比較符合用戶的使用心理學。對于用戶來說這是一個非常實用的功能,作為一個博客來說,有這個...
摘要:前言這個輪子已經有很多人造過了,為了不重復造輪子,我將本項目以三階段實現大家可以在中的查看純前端后端前端后端前端希望能給大家一個漸進學習的經驗。 前言 Vue+Socket.io這個輪子已經有很多人造過了,為了不重復造輪子,我將本項目以三階段實現(大家可以在github中的Releases查看): 純前端(Vuex) 后端+前端(JavaScript) 后端+前端(TypeScrip...
摘要:在學習源碼的過程中,給我幫助最大的就是這個系列文章,于是決定基于這個系列文章談一下自己的理解。到此為止,首次渲染就完成啦總結從啟動到元素渲染到頁面,并不像看起來這么簡單,中間經歷了復雜的層級調用。 前言 React 是一個十分龐大的庫,由于要同時考慮 ReactDom 和 ReactNative ,還有服務器渲染等,導致其代碼抽象化程度很高,嵌套層級非常深,閱讀其源碼是一個非常艱辛的過...
閱讀 1700·2021-11-02 14:47
閱讀 3648·2019-08-30 15:44
閱讀 1334·2019-08-29 16:42
閱讀 1731·2019-08-26 13:53
閱讀 935·2019-08-26 10:41
閱讀 3458·2019-08-23 17:10
閱讀 597·2019-08-23 14:24
閱讀 1717·2019-08-23 11:59