Fermer

octobre 11, 2019

Application d'interrogation en temps réel utilisant Vue et Socket.io


Dans cet article, nous utiliserons Vue et Socket.io pour créer une application de sondage en temps réel.

Un sondage d’opinion, souvent désigné simplement par sondage ou sondage, est un sondage humain de recherche réalisé par le public. opinion d'un échantillon particulier. Cela le rend facilement accessible, car il peut être utilisé par les utilisateurs du monde entier. L'ajout de fonctionnalités en temps réel à l'application améliore l'expérience utilisateur, car les votes sont affichés en temps réel.

Kendo UI est une bibliothèque utilisée pour développer des applications à un rythme relativement rapide. Il fournit des composants d'interface utilisateur pour des bibliothèques telles que jQuery, Angular, React et Vue, ainsi que plus de 20 composants permettant de créer des graphiques, des tableaux de données et des pages de glisser-déposer.

Kendo UI est personnalisable. ensemble de thèmes pour Material UI, Bootstrap, etc. Les composants de Kendo UI sont distribués sous forme de multiples packages npm. Vous n’avez donc aucune crainte de faire gonfler votre application avec des composants inutiles et d’augmenter votre bundle de build. Il offre des composants pour la gestion de grands ensembles de données et pour une visualisation aisée des données. Couplé à Vue, Kendo UI est un outil imparable qui permet de développer des applications Web fantastiques.

À l'aide de Vue vous pouvez étendre le langage de modèle avec vos propres composants et utiliser un large éventail de composants existants. ] Pour suivre ce tutoriel, une compréhension de base de Vue et Node.js est requise. Assurez-vous que Node et npm sont installés avant de commencer.

Si vous ne connaissez pas encore Vue, veuillez suivre la documentation officielle ici . Revenez et terminez le didacticiel lorsque vous aurez terminé.

Nous allons utiliser ces outils pour créer notre application:

Nous allons créer une application de scrutation en temps réel à l'aide de Socket.io Vue et Kendo UI Charts pour la visualisation des données.

À l'aide de notre application, les utilisateurs donnent leur avis sur le moment où ils se couchent la nuit.

Voici une démonstration du produit final:

polling image 1

Nous allons envoyer nos votes au serveur et, avec l'aide de Socket.io nous mettrons à jour les sondages en temps réel.

build!

Initialisation de l'application et installation des dépendances de projet

Pour commencer, nous allons utiliser le vue-cli pour amorcer notre application. Tout d'abord, nous allons installer la CLI en exécutant npm install -g @ vue / cli dans un terminal.

Pour créer un projet Vue à l'aide de la CLI, exécutez la commande suivante: [19659018] vue créer vue-polling

Après avoir exécuté cette commande, le CLI vous demandera de choisir un préréglage. Sélectionnez le préréglage par défaut.

Ensuite, exécutez les commandes suivantes dans le dossier racine du projet pour installer les dépendances:


 //  install  les dépendances requises pour créer le serveur.

 npm   installer  express socket.io

// dépendances frontales

 npm   installer  @ progrès / kendo-charts-vue-wrapper @ progrès / kendo-theme-default @ progrès / kendo-ui vue-socket.io

Démarrez le serveur de développement de l'application en exécutant npm run serve dans un terminal situé dans le dossier racine de votre projet.

Un onglet du navigateur devrait s'ouvrir sous http: // localhost: 8080 . La capture d'écran ci-dessous devrait ressembler à ce que vous voyez dans votre navigateur:

polling image 2

Construction du serveur

Nous allons construire notre serveur avec Express . Express est un framework web minimal, rapide et sans opinion pour Node.js .

Créez un fichier appelé server.js à la racine du projet et mettez-le à jour avec l'extrait de code. ci-dessous




 const  express  =   require  ( 'express' ) ; 

 const  app  =   express  () ; 

 const  http  =   require  ( 'http' ) .  createServer  ( app ) ; 

 const  io  =   require  ( 'socket.io' ) [19659032] ( http ) ; 

 const  port  =  processus .  env .  PORT  ||   4000 ; 

io .  sur  ( 'connection'   async   ( prise )   => 19659065] { ]

socket .  on  ( 'vote'   ( données )   =>   {

socket .  emit  ( 'voté'  data ) ; 

} ) ; 

 } ) ; 

http .  écoutez  ( port   ()   => 19659065] {

console .  log  ( `Le serveur a démarré sur le port  $ { port }  `  )  ]; 

} ) ;

La configuration ici est plutôt standard pour les applications Express utilisant Socket.io . Il n'y a pas de problème si vous n'avez aucune connaissance préalable de Socket.io car nous n'utiliserons que deux méthodes: émettre pour l'envoi d'événements et io.on pour écouter les événements. Vous pouvez toujours suivre le tutoriel officiel ici .

Nous écouterons pour un événement de vote une fois la connexion connectée établie, cet événement sera déclenché par l'application cliente. . Dès réception de l'événement, nous envoyons un événement voté au client.

Exécutez la commande suivante dans un terminal du dossier racine de votre projet pour démarrer le serveur:


 serveur de nœud

La page d'accueil

La page d'accueil affiche les options d'interrogation et le graphique afin de visualiser les données calculées à partir des interrogations. La page d'accueil comportera également un en-tête à des fins de présentation. La première étape consiste à créer un composant pour afficher l'en-tête. Ouvrez le dossier src / components et créez un fichier appelé Header.vue ouvrez le fichier et mettez-le à jour avec l'extrait de code ci-dessous:

 < modèle > 
 < header > 
 < div   class  =  " de marque
 
 Le meilleur outil 2023 pour ta croissance Instagram ! 
 
 
   
 
Source link