Fermer

décembre 12, 2019

Visualisation des données en temps réel avec Socket.io et jQuery


Le temps réel consiste à envoyer et à mettre à jour des données aussi rapidement que possible de manière automatisée, synchrone et bidirectionnelle. Il communique entre les terminaux et met à jour les données à une vitesse presque imperceptible par l'utilisateur. En résumé, un changement à une extrémité déclenchera un changement presque instantané à une autre extrémité.

Dans le monde d'aujourd'hui, diverses données sont mises à jour presque toutes les secondes en raison de nombreux facteurs et la seule façon de donner un sens est d'avoir un représentation visuelle. Marché boursier, crypto-monnaies, réseaux sociaux, données de vol, etc. sont divers exemples de ces données.

Prérequis

Pour suivre ce didacticiel, une compréhension de base de jQuery et Node.js est requise. Assurez-vous également qu'au moins Node version 8+ est installé sur votre machine de développement avant de commencer. La connaissance HTML / CSS est également recommandée mais non obligatoire.

Pour créer l'application requise, voici quelques outils que nous utiliserons:

Data vis image 1

Initialisation de l'application

Construction d'un tableau de bord de graphique l'application avec HTML, CSS et jQuery est possible; cependant, pour ajouter des fonctionnalités collaboratives en temps réel, nous avons besoin d'un serveur servant d'intermédiaire entre tous les clients connectés (navigateurs).

Nous utiliserons Node car nous pouvons facilement créer un serveur minimal avec Express. Nous utiliserons une configuration très minimale pour ce projet. Créez un dossier appelé temps réel et créez-y un fichier package.json . Maintenant, ajoutez le code suivant:

	
	 {
		 "nom" :   "realtimeproject" 
		 "version" :   "1.0.0" [19659012]
		 "description" :   "Application en temps réel" 
		 "principal" :   "app.js" 
		 "scripts" [19659012]:   {
		 "test" :   "echo " Erreur: aucun test spécifié  "&& exit 1" 
		 "start" : [19659013] "application nœud" 
		} 
		 "auteur" :   "" 
		 "licence" :   "ISC" [19659012]
		 "dépendances" :   {
		 "express" :   "^ 4.16.4" 
		 "pubnub" :   "^ 4.22.0" 
		 "socket.io" :   "^ 2.2.0" 
		} 
	}

Maintenant, lorsque vous exécutez npm Install il exécute le script et installe toutes nos dépendances. S'il fonctionnait correctement, vous devriez maintenant voir un dossier node_modules et un fichier package-lock.json . Maintenant que ce n'est plus le cas, allons-y et commençons à écrire du code.

Dans le répertoire racine, créez un fichier app.js . Ce fichier sera le point d'entrée de notre application. Créez ensuite un dossier public dans lequel nous stockerons notre fichier html et nos ressources statiques. À l'intérieur, créez un fichier index.html et un répertoire js et initialisez un fichier charts.js dans le répertoire.

Actuellement, notre structure de dossiers devrait ressembler à ceci:

 temps réel /
    node_modules /
    Publique/
        js /
         charts.js
        index.html
    app.js
    package.json
    package-lock.json

Ouvrez le fichier app.js et ajoutez-y le code suivant:

  const  express  =   require  ( 'express' [19659012]) 
  const  app
 
 Le meilleur outil 2023 pour ta croissance Instagram ! 
 
 
   
 
Source link