Detaillierte Analyse des Vue Socket.io-Quellcodes

Dieser Artikel stellt hauptsächlich die Interpretation des Vue Socket.io-Quellcodes vor. Jetzt teile ich ihn mit Ihnen und gebe ihn als Referenz.

Hintergrund

Es gibt ein Projekt, dessen Rekonstruktion im Dezember dieses Jahres begonnen hat und bei dem es um Steckdosen geht. Aber der Sockel verwendet ein Paket, das von einem früheren Entwickler gepackt wurde (aktuelle Mitglieder haben sich darüber beschwert, warum sie das Rad nicht verwenden, das tausende Male gehärtet wurde). Um diese Refactoring-Möglichkeit zu nutzen, wird daher vue-socket.io eingeführt und socket.io als Backend verwendet. Ich war auch neugierig und habe mir den Quellcode von vue-socket.io angeschaut (das sage ich nicht, weil die Dokumentation dieser Bibliothek zu kurz ist). Ich habe mir nur den Quellcode angeschaut, um zu verstehen, wie man ihn für die Stabilität nutzt )

Start

Dateistruktur

Wir betrachten hauptsächlich die drei Dateien unter src. Wir können sehen, dass die Bibliothek im Beobachtermodus verwendet wird

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

Wenn wir diese Bibliothek verwenden möchten, schreiben wir den Code normalerweise so (Abbildung 2 oben). Die Verbindung und der Speicher in Abbildung 1 oben sind jeweils die letzten beiden Parameter von Abbildung 2. Damit ist die URL der Socket-Verbindung bzw. des Stores von vuex gemeint. Abbildung 1 besteht darin, diese beiden Parameter an den Observer zu übergeben, ein neues Observer-Objekt zu erstellen und dann die Socket-Eigenschaft des Observer-Objekts auf dem Vue-Prototyp bereitzustellen. Dann können wir this.$sockets.emit('xxx', {}) direkt in der Vue-Instanz

//

Das obige ist der detaillierte Inhalt vonDetaillierte Analyse des Vue Socket.io-Quellcodes. Für weitere Informationen folgen Sie bitte anderen verwandten Artikeln auf der PHP chinesischen Website!