Visualisation de données en temps réel avec Vue et Socket.io

On ne saurait trop insister sur le besoin d'applications en temps réel. Les fonctionnalités en temps réel peuvent être appliquées aux applications de médias sociaux qui doivent mettre à jour simultanément tous les utilisateurs connectés avec les nouvelles données, dans les applications de visualisation de données, sur les canaux de communication, etc.

L'envoi en temps réel concerne l'envoi et la mise à jour de données. aussi rapidement que possible de manière automatisée, synchrone et bidirectionnelle. Il communique entre les points d'extrémité et met à jour les données à une vitesse presque imperceptible par l'utilisateur.

Les développeurs sont toujours à la recherche de moyens pour mieux automatiser ce processus. cette recherche a donné lieu à des technologies telles que Pusher, PubNub et autres; Cependant, nous allons utiliser Socket.io pour la définition de ce sujet.

Créer un projet Vue

Nous devons d’abord créer un projet Vue.js avec lequel nous pourrons démontrer la mise en oeuvre de notre planificateur de tâches. Sans plus attendre, ouvrez une fenêtre de terminal sur votre répertoire préféré et exécutez la commande ci-dessous:

  vue create realtime-chart

Si vous n'avez pas installé Vue CLI dans le monde, veuillez suivre ce guide et revenez ensuite à la suite de cette leçon.

Lorsque vous avez terminé de démarrer votre application Vue, accédez au nouveau répertoire de l'application Vue et démarrez le serveur de développement.

   cd  realtime-chart
  npm  courir servir

Ceci servira votre application Vue sur localhost: 8080 . Vous pouvez y accéder via votre navigateur et votre application Vue devrait alors s'exécuter.

Configurer le serveur de nœud

Ensuite, configurons notre serveur de nœud personnalisé. La logique derrière notre mise en œuvre est simple. Nous écoutons sur une connexion ouverte sur le serveur qui nous envoie de nouvelles valeurs toutes les 5 secondes. Nous utilisons ensuite ces valeurs pour mettre à jour le graphique boursier sur le client.

Installer les dépendances
Nous devons installer certaines dépendances pour les packages dont nous avons besoin à la fois pour notre serveur et pour notre client. Ouvrez une fenêtre de terminal dans le répertoire racine du projet et exécutez les commandes ci-dessous:

 npm   install  --save chart.js express socket.io socket.io-client vue-chartjs

À ce stade, vos dépendances bloquent dans votre fichier package.json devrait ressembler à ceci:

 "dépendances" :   {
	 "chart.js" [19659019]:   "^ 2.8.0" 
	 "express" :   "^ 4.16.4" 
	 "socket.io"  :   "^ 2.2.0" 
	 "socket.io-client" :   "^ 2.2.0" 
	 "vue"  :   "^ 2.6.6" 
	 "vue-chartjs" :   "^ 3.4.0" 
} 

Créez maintenant un fichier server.js dans le répertoire racine du projet et mettez-le à jour avec le code ci-dessous:

    
 const  express  =   require  (  "express" ) ; 
 const  app  =   express  () ; 
 const  port  =   4000 ; 
 const  io  =   require  ( "socket.io" )  ([19459004)] serveur ) ; 
    
 const  serveur  =  app .  écoutez  ( » $ { port }   `   fonction  ()   {
  console .  log  ( `Le serveur a démarré sur le port  $ { port }  `  )  ]; 
} ) ; 
    
 function   getRandomValue  ()  {
     retour  Math .  étage  ( Math .  aléatoire  ()   *   ( 50   -   5   + [19659058] 1 ) )   +   5 ; 
} 
io .  sur  ( "connection"  socket  =>   {
     setInterval  ( ( ])   =>   {
        socket .  diffusé .  emit  ( "newdata"   getRandomValue  ()  (19659019]). }   5000 ) 
} ) ; 

Nous définissons ici une fonction getRandomValue () qui renvoie un entier aléatoire. Ensuite, nous ouvrons une connexion Socket.io et émettons un événement newdata avec l'entier aléatoire généré à partir de la fonction getRandomValue () toutes les 5 secondes. Sur le client, tout ce que nous avons à faire est d'écouter cet événement et de mettre à jour notre graphique avec ces valeurs.

Configurer un graphique sur le client

Pour la visualisation des données sur le client, nous utilisons le graphique . Bibliothèque .js . Il vous permet d'utiliser des graphiques sans trop de soucis à l'intérieur de Vue. Il est parfait pour les personnes qui ont besoin d’obtenir des graphiques simples le plus rapidement possible. Il résume la logique de base mais expose l'objet Chart.js pour vous donner une flexibilité maximale.

Ouvrez le fichier App.vue dans le répertoire src de votre projet. et mettez-le à jour avec le code ci-dessous:

Nous avons importé ici le composant LineChart d'un fichier LineChart.js que nous n'avons pas encore créé. Nous allons utiliser ce composant pour personnaliser le comportement de notre graphique. Nous avons ensuite importé la bibliothèque client Socket.io pour maintenir la communication avec notre serveur

Dans les applications méthodes nous avons défini une méthode fillData () . cela nous aidera à remplir notre graphique avec les données extraites du serveur. Comme nous avons besoin de différents ensembles de valeurs pour différentes parties du graphique, nous avons défini une fonction getRandomChartValues ​​() qui prend la valeur extraite du serveur et la multiplie par un nombre aléatoire. De cette façon, nous pouvons avoir différentes valeurs pour toutes les parties de nos graphiques.

Dans la méthode getRealtimeData () nous écoutons l'événement de socket newdata du serveur, une fois reçue, nous appelons la méthode fillData () avec fetchedData pour renseigner l'objet datacollection de notre graphique.

Vous avez peut-être remarqué que nous avions importé un graphique de ligne . composant d'un fichier que nous n'avons pas encore créé – créons-le maintenant. Dans le répertoire racine du projet, créez un nouveau fichier LineChart.js et mettez-le à jour avec le code ci-dessous:

 import   { Line  mixins  }   de   'vue-chartjs' 
 const   { reactiveProp }   =  mixins
    
 export   default   {
   s'étend :  Ligne 
  mixins :   [ réactifProp ] 
  props :   [ 'options' ] 
   monté   ()   {
    ce .  renderChart  ( ce .  chartData   ce .  options ) 
  } 
} 

Test du Application

Nous sommes maintenant prêts à tester notre application. Vous pouvez exécuter le serveur dans une fenêtre de terminal distincte du répertoire racine du projet avec: serveur de noeud

OU
serveur nodemon //  si  vous avez installé nodemon dans le monde entier

Votre application Vue fonctionne déjà sur localhost: 8080 sur le navigateur. Accédez à cette page et observez comment les données boursières sont mises à jour avec différentes valeurs en temps réel.

Conclusion

Dans ce billet, nous avons montré comment implémenter la visualisation de données en temps réel avec Socket.io et Vue.js à l'aide de la bibliothèque Chart.js. Vous pouvez faire beaucoup plus avec cette application, vous pouvez étendre cette fonctionnalité pour qu’elle fonctionne avec des API de données en temps réel pour surveiller les cours des actions, etc. N'hésitez pas à consulter la documentation sur Socket.io Vue.js et Chart.js pour en savoir plus.