Vue Socket.io源碼詳細分析

這篇文章主要介紹了Vue Socket.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', {})了

// 

以上是Vue Socket.io源碼詳細分析的詳細內容。更多資訊請關注PHP中文網其他相關文章！