Fermer

octobre 29, 2019

Surveillance géographique et localisation à l'aide de Socket.io et Vue


Dans ce didacticiel, nous allons créer une application qui surveille la position d’un utilisateur et envoie des mises à jour en temps réel à l’aide de Vue et Socket.io.

Le géofencing peut être défini comme l’utilisation du GPS ou de la RFID pour déclencher des pré-programmés. actions lorsqu'un périphérique mobile ou une balise entre ou sort d'une limite virtuelle définie autour d'un emplacement géographique. Cette limite virtuelle peut être définie comme une barrière géographique .

Vue est un cadre de développement Web frontal permettant de développer une gamme d’applications pouvant être servies sur plusieurs plates-formes. Il a un énorme écosystème et une clientèle dédiée. Outre sa simplicité d'intégration, sa documentation détaillée et sa flexibilité, Vue vous permet d'étendre le langage de template avec vos propres composants et d'utiliser un large éventail de composants existants.

Pour suivre ce tutoriel, une compréhension de base de Vue et Node.js est requis. Assurez-vous d’avoir installé Node et NPM avant de commencer.

Nous allons créer une application qui permet de suivre l’emplacement des invités dans une île exclusive. Notre application informe les administrateurs lorsqu'un invité actif quitte les limites du ranch et que leur emplacement est mis à jour.

Voici une capture d'écran du produit final:

Geofencing image 1

Initialisation de l'application et installation du projet Dépendances

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: [19659011] vue créer vue-geofencing

Après avoir exécuté cette commande, plutôt que de sélectionner la configuration par défaut, nous opterons pour la configuration manuelle. Dans cette configuration, nous allons vérifier les options du routeur et du pré-processeur CSS. Suivez la capture d'écran ci-dessous:

Geofencing image 2

Le reste des invites peuvent être configurées à votre guise.

Ensuite, exécutez les commandes suivantes dans le dossier racine du projet d'installation de dépendances.

     //  installer les dépendances  nécessaires à la création du serveur.
     npm   installer  express socket.io
    
    // dépendances frontend
     npm   installez  vue-socket.io vue2-google-maps

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

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

Geofencing image 3

Construire notre serveur

Nous construirons notre serveur avec Express . Express est un framework Web minimal, rapide et sans opinion pour Node.js.

Créez un fichier nommé 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' )  ([19459004)] http ) ; 
     const  port  =  processus .  env .  PORT  ||   4001 ; 
    
    io .  on  ( 'connection'   async   ( prise )   => 19659060] { ]
      socket .  on  ( 'ping'   ( données )   =>   {
        socket .  emit  ( 'newLocation'  data ) ; 
      } ) ; 
     } ) ; 
    
    http .  écoutez  ( port   ()   => 19659060] {
      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 aucun 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 un événement ping une fois le socket connecté, cet événement sera déclenché par l'application cliente. . À la 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 noeud

Home View

Créez un fichier Home.vue dans le répertoire src / views . Ce fichier hébergera le composant home. Le dossier views ne sera généré que si vous avez choisi le routage lors de la configuration de l'application à l'aide de la CLI. Le composant home sera la vue que les utilisateurs verront lors de leur visite. Il demandera l’autorisation d’obtenir l’emplacement actuel de l’utilisateur.

Ouvrez le fichier Home.vue et mettez-le à jour en suivant les étapes ci-dessous. Tout d’abord, nous allons ajouter la zone template :

     // src / views / Home.vue
    
     < template > 
       < div > 
        
         < div   class  =  " content "  > 
           < h2 >  Bienvenue dans "The Ranch"  </  h2 > 
           < img   src  =  " ../ assets / placeholder.svg "    alt > 
           < h6 >  Autoriser l'emplacement pour obtenir des mises à jour  </  h6 > 
           < router-link   à  =  " / admin "  >  Admin  </  routeur-lien > 
         </  div > 
       </  div > 
     </  modèle >

Note: Tous les actifs utilisés dans l'article sont disponibles dans le GitHub repo .

La vue elle-même est statique. Il ne se passera pas beaucoup de choses dans cette vue particulière, à l'exception de la demande d'obtention de l'emplacement actuel de l'utilisateur. Nous mettons de côté une zone pour le composant d’en-tête dans le balisage. Le composant a été créé car le même en-tête sera réutilisé dans la page d'administration.

Styling

Mettez à jour le composant avec les styles ci-dessous:

    
    
     {
       display :  flex ; 
       flex-direction :  colonne ; 
       aligner les éléments [19659027]:  centre ; 
       rembourrage :   30  px  0 ; 
       img  {
         de hauteur  :   100  px ; 
      } 
       h6  {
         marge :   15  h6  {
         19659163] opacité :   0.6 ; 
      } 
       a  {
         de fond :  mediumseagreen ; 
         :   12  px  21  px ; 
         frontière-rayon :   5  px ; 
         de frontière  :  néant ; 
         box-shadow :   1  px  2  px  4  px  0   rgba  ( 0  0  0  0.3 ) ; 
         police de poids :  gras ; 
         ] taille de la police :   16  px ; 
         couleur :  de la fumée blanche ; 
         du texte décoratif :  aucune ; 
         hauteur de trait :   1 ; 
      } 
    

Ensuite, nous allons créer la section de script du composant, ici nous allons définir des méthodes pour obtenir l'emplacement de l'utilisateur et envoyer l'emplacement au serveur.

    

     < template > 

       ... 

     < /  template > 


     < style lang  =  "scss"  scoped








 Le meilleur outil 2023 pour ta croissance Instagram ! 








   


Source link