VueSocket.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', {})了

//
聲明：本網頁內容旨在傳播知識，若有侵權等問題請及時與本網聯系，我們將在第一時間刪除處理。TEL:177 7030 7066 E-MAIL:11247931@qq.com