Analyse détaillée du code source de Vue Socket.io

Cet article présente principalement l'interprétation du code source de Vue Socket.io. Maintenant, je le partage avec vous et le donne comme référence.

Contexte

Il y a un projet qui a commencé à être reconstruit en décembre de cette année, et le projet implique des prises. Mais le socket utilise un package packagé par un développeur précédent (les membres actuels se sont plaints de la raison pour laquelle ils n'utilisent pas la roue qui a été tempérée des milliers de fois). Par conséquent, profitant de cette opportunité de refactorisation, vue-socket.io est introduit et socket.io est utilisé comme backend. J'étais aussi curieux et j'ai jeté un œil au code source de vue-socket.io (je ne dirai pas que c'est parce que la documentation de cette bibliothèque est trop brève. J'ai juste regardé le code source pour comprendre comment l'utiliser pour la stabilité )

Démarrer

Structure des fichiers

Nous regardons principalement les trois fichiers sous src On peut voir que la bibliothèque est utilisée en mode Observateur

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

Quand on veut utiliser cette bibliothèque, on écrit généralement le code comme ceci ( Figure 2 ci-dessus). La connexion et le stockage dans la figure 1 ci-dessus sont respectivement les deux derniers paramètres de la figure 2. Ils désignent respectivement l'URL de la connexion socket et le magasin de vuex. La figure 1 consiste à transmettre ces deux paramètres dans Observer, à créer un nouvel objet observateur, puis à monter l'attribut socket de l'objet observateur sur le prototype Vue. Ensuite, nous pouvons directement this.$sockets.emit('xxx', {}) dans l'instance Vue

//

Ce qui précède est le contenu détaillé de. pour plus d'informations, suivez d'autres articles connexes sur le site Web de PHP en chinois!