Vue Socket.io ソース コードの詳細な分析

この記事では主に Vue Socket.io のソース コードの解釈を紹介しますので、参考にしてください。

背景

今年の12月に再構築に着手したプロジェクトがあり、そのプロジェクトにはソケットが関係しています。ただし、ソケットは以前の開発者によってパッケージ化されたパッケージを使用しています (これについて、現在のメンバーから、なぜ何千回も焼き戻されたホイールを使用しないのかについて不満の声が上がっています)。したがって、このリファクタリングの機会を利用して、vue-socket.io が導入され、socket.io がバックエンドとして使用されます。私も興味があったので、vue-socket.io のソース コードを見てみました (このライブラリのドキュメントが簡潔すぎるため、とは言いません。安定性を高めるためにそれを使用する方法を理解するためにソース コードを見ただけです) )

スタート

ファイルのアーキテクチャ

主に src の下にある 3 つのファイルを確認します。ライブラリがオブザーバー モードを使用していることがわかります

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)。上の図 1 の接続とストアは、それぞれ図 2 の最後の 2 つのパラメーターです。それぞれソケット接続とvuexのストアのURLを意味します。図 1 では、これら 2 つのパラメーターをオブザーバーに渡し、新しいオブザーバー オブジェクトを作成し、オブザーバー オブジェクトのソケット プロパティを Vue プロトタイプにマウントします。次に、Vue インスタンスで this.$sockets.emit('xxx', {}) を直接実行できます

//

以上がVue Socket.io ソース コードの詳細な分析の詳細内容です。詳細については、PHP 中国語 Web サイトの他の関連記事を参照してください。