Comment Rendre Des Données En Temps Réel Avec Vue, Node, Socket.io

Les sockets sont généralement les meilleurs pour les communications de données en temps réel entre les clients et les serveurs. Ils sont très avantageux par rapport aux API REST, en particulier pour les jeux en ligne. Ils aident les utilisateurs à interagir avec leur jeu et à envoyer leurs données au serveur, puis le serveur transmet ces données aux autres joueurs du jeu.

Dans ce didacticiel, je vais vous montrer comment rendre des données en temps réel sur le serveur et comment les sockets sont utilisés. Nous allons créer un jeu de blocs très simple en utilisant Vue.Js, Node.Js et Socket.io . Nous utilisons Socket.io sur les API REST car nous avons besoin de données en temps réel, qui ne sont livrables que sur des sockets. Ce jeu ne va pas être très hardcore ; tout ce que nous ferons est de rendre des objets 2D à l'aide d'un canevas HTML et d'interagir avec eux via divers clients, comme le montre l'image ci-dessous. Cliquer sur les boutons déplace le bloc pour tous les joueurs. Il y aura divers composants impliqués dans ce tutoriel.

Débuter côté serveur

Nous allons commencer par le composant côté serveur, puis passer directement au composant client Vue.js par la suite. Je suppose que vous avez installé Node.js. Créez un répertoire pour le côté serveur et accédez à votre répertoire, puis saisissez ce qui suit

nnpm init -y
touch index.js

Si la commande touch ne semble pas fonctionner de votre côté, vous pouvez créer manuellement un fichier index.js dans le répertoire. Cela crée un package.json qui portera toutes les dépendances que nous appliquerons tout au long de ce didacticiel au sein du serveur. Avant de poursuivre, nous allons installer certains packages dont nous aurions besoin pour ce projet. Nous aurons besoin du package nodemon et nous devons le configurer. Ensuite, nous aurons besoin du framework express et du package socket.io .

npm install express socket.io --save 
npm install nodemon --save-dev

Nous allons maintenant nous concentrer sur notre fichier index.js et configurer rapidement les choses. Nous allons suivre la position d'un joueur et nous allons stocker la position de notre joueur côté serveur. (Cela signifie que lorsque le serveur redémarre, il met fin à toutes nos données, ce qui est OK pour ce tutoriel.) Donc, dans le index.js, je vais créer un objet nommé positionpour stocker les valeurs x et y.

const Express = require("express")();
const Http = require("http").Server(Express);
const Socketio = require("socket.io")(Http, {
  cors: {
    origin: "*",
  },
});

//inputting our position values 
let position = {
  x: 200,
  y: 200,
};

//listening to a PORT 
Http.listen(3000, () => {
  console.log("Server up and running...");
});

The whole logic behind what will happen here is that the Vue client will never be in control of our player’s position: it will all be determined server-side. The server will broadcast the positions to all the clients, and they will just display the positions on the screen. The client will request the server to move, and the latter will change the position. We will not make any direct changes from the client level; it will all depend on the server, which would help prevent users from cheating and spoofing player positions.

We will do one more thing before we leave the server component, but we are not done with it just yet; we will return to it. We are going to listen for a particular event, as seen below.

let position = {
  x: 200,
  y: 200,
};

Socketio.on("connection", (socket) => {
  socket.emit("position", position);
});

La connexion ci-dessus est un type réservé d'étiquette pour les messages, donc chaque fois qu'un client se connecte au serveur, il déclenchera l'événement de connexion. Nous émettrons un message particulier à cette socket particulière qui vient de se connecter, et ce message contiendra les positions des valeurs x et y.

Le côté client

Nous allons faire une pause côté serveur et nous diriger vers le composant Vue. En supposant que vous avez installé Vue CLI , nous pouvons créer un nouveau projet Vue et lui donner le nom du projet.

vue create client

Nous devons également installer socket.io comme nous l'avons fait précédemment pour le composant serveur. Après l'installation, renommez rapidement le fichier dans le srcdossier en App.vue et le fichier Hello-world dans le dossier des composants en BlockGame.vue.

Une fois que vous avez réussi à modifier les noms de fichiers, la prochaine chose que nous devons faire est de configurer le fichier App.vue. Accédez à App.vue et supprimez le contenu initial de la balise de modèle et de la balise de style, importez le fichier blockgame dans la balise de script et définissez l'objet composant sur BlockGame. Saisissez le composant BlockGame dans la balise de modèle entourée d'un div. Votre fichier App.vue devrait ressembler à ceci :

<template>
  //calling the BlockGame to the template tag
  <div id="app">
    <BlockGame />
  </div>
</template>

<script>
//importing the BlockGame component into the app file 
import BlockGame from "./components/BlockGame.vue";
export default {
  name: "app",
  components: {
    BlockGame,
  },
};
</script>
<style></style>

Après avoir configuré le fichier App.vue, nous nous dirigeons vers notre fichier BlockGame dans le dossier des composants et le configurons. Ensuite, nous ajouterons un canevas dans la balise div et lui donnerons un nom de référence (jeu) car dans Vue, vous ne pouvez pas simplement accéder aux composants DOM avec des querySelectors ; vous devez utiliser des références. Nous ajouterons des informations sur la largeur, la hauteur et la bordure afin que vous puissiez facilement voir en quoi consiste le canevas. Maintenant, dans notre script, nous aurions besoin d'importer le socket.io que nous avons téléchargé plus tôt, puis de déclarer quelques variables à l'intérieur de l'objet de classe, y compris l'objet de connexion socket, qui serait vide pour le moment. Nous ajoutons un objet de contexte et un objet de position composé d'une valeur x et y afin de ne pas rencontrer de données nulles flottantes.

<template>
  <!-- creating the HTML canvas -->
  <div>
    <canvas ref="game" width="640" height="480" style="border: 1px solid black">
    </canvas>
    <p>
      <button v-on:click="move('right')">Right</button>
      <button v-on:click="move('left')">Left</button>
      <button v-on:click="move('up')">Up</button>
      <button v-on:click="move('down')">Down</button>
    </p>
  </div>
</template>
<script>
//importing the socket.io we installed
import io from "socket.io-client"; 
export default {
  name: "BlockGame",
  data() {
    return {
      socket: {},
      context: {},
      position: {
        x: 0,
        y: 0,
      },
    };
  },
};
</script>
<style scoped></style>

Nous avons maintenant la possibilité de nous connecter à notre serveur, puis nous avons la possibilité d'écouter les événements et d'émettre des événements. Tout d'abord, nous devons établir une connexion, ce qui est mieux fait dans le crochet de cycle de vie créé pour Vue avant le rendu de Vue. Nous aurions à spécifier notre hôte pour les sockets que nous avons définis, ce qui est fait dans la méthode created .

Une fois le rendu de Vue, nous voulons commencer à écouter les événements. Nous voulons commencer à travailler aux côtés de notre toile. Pour ce faire, nous devrions utiliser l' événement de cycle de vie monté, puis saisir l'objet de contexte, puis y ajouter des références (2d). Cela ajouterait une grande boîte carrée vide sur le côté gauche de votre page Web. L'étape suivante consiste à dessiner un rectangle à l'intérieur de la boîte carrée vide, à définir sa position et à lui donner une taille. Nous utiliserons 20 par 20 pixels pour la taille du bloc rectangulaire, ce qui devrait créer un petit bloc noir rectangulaire à l'extrémité gauche de la boîte carrée.

Relecture de session open source

OpenReplay est une suite de relecture de session open source qui vous permet de voir ce que font les utilisateurs sur votre application Web, vous aidant à résoudre les problèmes plus rapidement. OpenReplay est auto-hébergé pour un contrôle total sur vos données.

Commencez à profiter de votre expérience de débogage - commencez à utiliser OpenReplay gratuitement .

A l'écoute des messages

Maintenant que nous avons les boîtes et que nous avons initialisé leur position, nous devons écouter les messages. Donc, tout comme nous l'avons fait pour le côté serveur, nous appellerons le socket.on pour écouter la position que nous avons émise à partir du fichier index.js. Nous ajouterons un objet de données qui contiendra notre bloc rectangulaire, mais il ne sera pas rendu tant que nous n'aurons pas récupéré une position de l'application. Pour résoudre cela, nous allons initialiser la position aux données. Si vous accédez à votre navigateur Web, vous remarquerez que le bloc rectangulaire s'est déplacé en raison des positions des valeurs x et y (200, 200) que nous avons définies dans notre fichier index.js. Nous recevrons des positions différentes de temps en temps, et à cause de cela, nous devons régler notre toile pour qu'elle soit claire à chaque intervalle. L'étape suivante consiste à faire bouger le rectangle. Pour ce faire, vous devezcréez une méthode et définissez un objet en mouvement qui émettrait deux choses, le nom de l'étiquette et les directions. Pour l'instant, si vous accédez à votre page Web et essayez de la déplacer, le rectangle ne bougera pas, mais ne vous inquiétez pas, nous n'avons pas encore terminé.

return {
      socket: {},
      context: {},
      position: {
        x: 0,
        y: 0,
      },
    };
  },
  //the created lifecycle hook
  created() {
  //connecting to our host  
    this.socket = io("http://localhost:3000");
  },
  //the mounted lifecycle hook
  mounted() {
    //creating the 2d canvas
    this.context = this.$refs.game.getContext("2d");
    this.socket.on("position", (data) => {
      this.position = data;
      //clearing the rectangular block at intervals
      this.context.clearRect(
        0,
        0,
        this.$refs.game.width,
        this.$refs.game.height
      );
      //creating a rectangular block sized 20x20
      this.context.fillRect(this.position.x, this.position.y, 20, 20);
    });
  },
  //creating a method to emit the directions to the server side
  methods: {
    move(direction) {
      this.socket.emit("move", direction);
    },
  },
};
</script>
<style scoped></style>

Ensuite, nous devons créer quelques boutons dans notre modèle div pour utiliser la méthode que nous avons créée. À l'intérieur de ces boutons, nous allons ajouter un écouteur onclick, le nommer move, passer dans une direction, puis fermer la balise et faire de même pour le reste des boutons. Une fois cela fait, nous devrions avoir un bouton haut, bas, gauche et droite dans le navigateur Web.

<template>
  <!-- creating the HTML canvas -->
  <div>
    <canvas ref="game" width="640" height="480" style="border: 1px solid black">
    </canvas>
  <!--create a p tag to format the button properly in your browser--> 
    <p>
      <button v-on:click="move('right')">Right</button>
      <button v-on:click="move('left')">Left</button>
      <button v-on:click="move('up')">Up</button>
      <button v-on:click="move('down')">Down</button>
    </p>
  </div>
</template>

Alors maintenant, revenons à notre index.js et commençons à planifier d'écouter les instructions. Rendez-vous à l'intérieur de la connexion des sockets et configurez un nouveau socket.on pour écouter les messages de déplacement et créer un objet de données qui contiendrait différents événements de commutation. Dans le premier cas (à gauche), réglez la position x sur -5, puis le socketio émet la position. Observez que nous avons utilisé socketio au lieu de simplement socket car les sockets émettent uniquement vers un client particulier tandis que socketio émet vers tous les clients connectés, puis casse la casse. Vous devez faire la même chose pour le reste des cas; le droit devrait avoir une position x de +5, le haut devrait avoir la position y de -5, et enfin, le bas devrait avoir la position y de +5 accompagné de leur socketio émettre pour émettre ces positions puis casser pour terminer le cas.

//connection to emit the positions to all connected clients 
Socketio.on("connection", (socket) => {
  socket.emit("position", position);
//connection to the move buttons and method to send back conditions to perform 
  socket.on("move", (data) => {
    switch (data) {
      case "left":
        position.x -= 5;
        Socketio.emit("position", position);
        break;
      case "right":
        position.x += 5;
        Socketio.emit("position", position);
        break;
      case "up":
        position.y -= 5;
        Socketio.emit("position", position);
        break;
      case "down":
        position.y += 5;
        Socketio.emit("position", position);
        break;
    }
  });
});

Si vous vous dirigez vers votre navigateur et cliquez sur l'un des boutons, vous observerez que le rectangle se déplacera dans la direction sur laquelle vous avez cliqué. Le client reçoit maintenant les positions que nous avons définies précédemment dans le serveur, puis les diffuse au navigateur pour effectuer tous les différents mouvements.

Conclusion

Ceci est un bon exemple d'utilisation de socket.io et Vue.js. C'est un meilleur exemple que de simplement faire le serveur de chat typique que tout le monde fait ! Ce jeu est assez simple car il n'a pas d'angle de compétition ; tout ce que nous avons fait a été de créer un serveur avec Node.js et un client avec Vue.js. Le serveur envoie des informations de position au client, et le client utilise ces informations pour afficher le canevas 2D sur votre écran, ce qui signifie que nous avons maintenant un composant de jeu pour cela, et nous l'utilisons comme s'il s'agissait d'un serveur de jeu. C'est un excellent exemple d'utilisation de sockets avec vue.js et node.js.

Dépôt Git : https://github.com/christofa/2d-Blockgame.git

Lien : https://blog.openreplay.com/rendering-real-time-data-with-vue-node-and-socket-io

#vue #node #socketio #javascript 

What is GEEK

Buddha Community

Comment Rendre Des Données En Temps Réel Avec Vue, Node, Socket.io

Les sockets sont généralement les meilleurs pour les communications de données en temps réel entre les clients et les serveurs. Ils sont très avantageux par rapport aux API REST, en particulier pour les jeux en ligne. Ils aident les utilisateurs à interagir avec leur jeu et à envoyer leurs données au serveur, puis le serveur transmet ces données aux autres joueurs du jeu.

Dans ce didacticiel, je vais vous montrer comment rendre des données en temps réel sur le serveur et comment les sockets sont utilisés. Nous allons créer un jeu de blocs très simple en utilisant Vue.Js, Node.Js et Socket.io . Nous utilisons Socket.io sur les API REST car nous avons besoin de données en temps réel, qui ne sont livrables que sur des sockets. Ce jeu ne va pas être très hardcore ; tout ce que nous ferons est de rendre des objets 2D à l'aide d'un canevas HTML et d'interagir avec eux via divers clients, comme le montre l'image ci-dessous. Cliquer sur les boutons déplace le bloc pour tous les joueurs. Il y aura divers composants impliqués dans ce tutoriel.

Débuter côté serveur

Nous allons commencer par le composant côté serveur, puis passer directement au composant client Vue.js par la suite. Je suppose que vous avez installé Node.js. Créez un répertoire pour le côté serveur et accédez à votre répertoire, puis saisissez ce qui suit

nnpm init -y
touch index.js

Si la commande touch ne semble pas fonctionner de votre côté, vous pouvez créer manuellement un fichier index.js dans le répertoire. Cela crée un package.json qui portera toutes les dépendances que nous appliquerons tout au long de ce didacticiel au sein du serveur. Avant de poursuivre, nous allons installer certains packages dont nous aurions besoin pour ce projet. Nous aurons besoin du package nodemon et nous devons le configurer. Ensuite, nous aurons besoin du framework express et du package socket.io .

npm install express socket.io --save 
npm install nodemon --save-dev

Nous allons maintenant nous concentrer sur notre fichier index.js et configurer rapidement les choses. Nous allons suivre la position d'un joueur et nous allons stocker la position de notre joueur côté serveur. (Cela signifie que lorsque le serveur redémarre, il met fin à toutes nos données, ce qui est OK pour ce tutoriel.) Donc, dans le index.js, je vais créer un objet nommé positionpour stocker les valeurs x et y.

const Express = require("express")();
const Http = require("http").Server(Express);
const Socketio = require("socket.io")(Http, {
  cors: {
    origin: "*",
  },
});

//inputting our position values 
let position = {
  x: 200,
  y: 200,
};

//listening to a PORT 
Http.listen(3000, () => {
  console.log("Server up and running...");
});

The whole logic behind what will happen here is that the Vue client will never be in control of our player’s position: it will all be determined server-side. The server will broadcast the positions to all the clients, and they will just display the positions on the screen. The client will request the server to move, and the latter will change the position. We will not make any direct changes from the client level; it will all depend on the server, which would help prevent users from cheating and spoofing player positions.

We will do one more thing before we leave the server component, but we are not done with it just yet; we will return to it. We are going to listen for a particular event, as seen below.

let position = {
  x: 200,
  y: 200,
};

Socketio.on("connection", (socket) => {
  socket.emit("position", position);
});

La connexion ci-dessus est un type réservé d'étiquette pour les messages, donc chaque fois qu'un client se connecte au serveur, il déclenchera l'événement de connexion. Nous émettrons un message particulier à cette socket particulière qui vient de se connecter, et ce message contiendra les positions des valeurs x et y.

Le côté client

Nous allons faire une pause côté serveur et nous diriger vers le composant Vue. En supposant que vous avez installé Vue CLI , nous pouvons créer un nouveau projet Vue et lui donner le nom du projet.

vue create client

Nous devons également installer socket.io comme nous l'avons fait précédemment pour le composant serveur. Après l'installation, renommez rapidement le fichier dans le srcdossier en App.vue et le fichier Hello-world dans le dossier des composants en BlockGame.vue.

Une fois que vous avez réussi à modifier les noms de fichiers, la prochaine chose que nous devons faire est de configurer le fichier App.vue. Accédez à App.vue et supprimez le contenu initial de la balise de modèle et de la balise de style, importez le fichier blockgame dans la balise de script et définissez l'objet composant sur BlockGame. Saisissez le composant BlockGame dans la balise de modèle entourée d'un div. Votre fichier App.vue devrait ressembler à ceci :

<template>
  //calling the BlockGame to the template tag
  <div id="app">
    <BlockGame />
  </div>
</template>

<script>
//importing the BlockGame component into the app file 
import BlockGame from "./components/BlockGame.vue";
export default {
  name: "app",
  components: {
    BlockGame,
  },
};
</script>
<style></style>

Après avoir configuré le fichier App.vue, nous nous dirigeons vers notre fichier BlockGame dans le dossier des composants et le configurons. Ensuite, nous ajouterons un canevas dans la balise div et lui donnerons un nom de référence (jeu) car dans Vue, vous ne pouvez pas simplement accéder aux composants DOM avec des querySelectors ; vous devez utiliser des références. Nous ajouterons des informations sur la largeur, la hauteur et la bordure afin que vous puissiez facilement voir en quoi consiste le canevas. Maintenant, dans notre script, nous aurions besoin d'importer le socket.io que nous avons téléchargé plus tôt, puis de déclarer quelques variables à l'intérieur de l'objet de classe, y compris l'objet de connexion socket, qui serait vide pour le moment. Nous ajoutons un objet de contexte et un objet de position composé d'une valeur x et y afin de ne pas rencontrer de données nulles flottantes.

<template>
  <!-- creating the HTML canvas -->
  <div>
    <canvas ref="game" width="640" height="480" style="border: 1px solid black">
    </canvas>
    <p>
      <button v-on:click="move('right')">Right</button>
      <button v-on:click="move('left')">Left</button>
      <button v-on:click="move('up')">Up</button>
      <button v-on:click="move('down')">Down</button>
    </p>
  </div>
</template>
<script>
//importing the socket.io we installed
import io from "socket.io-client"; 
export default {
  name: "BlockGame",
  data() {
    return {
      socket: {},
      context: {},
      position: {
        x: 0,
        y: 0,
      },
    };
  },
};
</script>
<style scoped></style>

Nous avons maintenant la possibilité de nous connecter à notre serveur, puis nous avons la possibilité d'écouter les événements et d'émettre des événements. Tout d'abord, nous devons établir une connexion, ce qui est mieux fait dans le crochet de cycle de vie créé pour Vue avant le rendu de Vue. Nous aurions à spécifier notre hôte pour les sockets que nous avons définis, ce qui est fait dans la méthode created .

Une fois le rendu de Vue, nous voulons commencer à écouter les événements. Nous voulons commencer à travailler aux côtés de notre toile. Pour ce faire, nous devrions utiliser l' événement de cycle de vie monté, puis saisir l'objet de contexte, puis y ajouter des références (2d). Cela ajouterait une grande boîte carrée vide sur le côté gauche de votre page Web. L'étape suivante consiste à dessiner un rectangle à l'intérieur de la boîte carrée vide, à définir sa position et à lui donner une taille. Nous utiliserons 20 par 20 pixels pour la taille du bloc rectangulaire, ce qui devrait créer un petit bloc noir rectangulaire à l'extrémité gauche de la boîte carrée.

Relecture de session open source

OpenReplay est une suite de relecture de session open source qui vous permet de voir ce que font les utilisateurs sur votre application Web, vous aidant à résoudre les problèmes plus rapidement. OpenReplay est auto-hébergé pour un contrôle total sur vos données.

Commencez à profiter de votre expérience de débogage - commencez à utiliser OpenReplay gratuitement .

A l'écoute des messages

Maintenant que nous avons les boîtes et que nous avons initialisé leur position, nous devons écouter les messages. Donc, tout comme nous l'avons fait pour le côté serveur, nous appellerons le socket.on pour écouter la position que nous avons émise à partir du fichier index.js. Nous ajouterons un objet de données qui contiendra notre bloc rectangulaire, mais il ne sera pas rendu tant que nous n'aurons pas récupéré une position de l'application. Pour résoudre cela, nous allons initialiser la position aux données. Si vous accédez à votre navigateur Web, vous remarquerez que le bloc rectangulaire s'est déplacé en raison des positions des valeurs x et y (200, 200) que nous avons définies dans notre fichier index.js. Nous recevrons des positions différentes de temps en temps, et à cause de cela, nous devons régler notre toile pour qu'elle soit claire à chaque intervalle. L'étape suivante consiste à faire bouger le rectangle. Pour ce faire, vous devezcréez une méthode et définissez un objet en mouvement qui émettrait deux choses, le nom de l'étiquette et les directions. Pour l'instant, si vous accédez à votre page Web et essayez de la déplacer, le rectangle ne bougera pas, mais ne vous inquiétez pas, nous n'avons pas encore terminé.

return {
      socket: {},
      context: {},
      position: {
        x: 0,
        y: 0,
      },
    };
  },
  //the created lifecycle hook
  created() {
  //connecting to our host  
    this.socket = io("http://localhost:3000");
  },
  //the mounted lifecycle hook
  mounted() {
    //creating the 2d canvas
    this.context = this.$refs.game.getContext("2d");
    this.socket.on("position", (data) => {
      this.position = data;
      //clearing the rectangular block at intervals
      this.context.clearRect(
        0,
        0,
        this.$refs.game.width,
        this.$refs.game.height
      );
      //creating a rectangular block sized 20x20
      this.context.fillRect(this.position.x, this.position.y, 20, 20);
    });
  },
  //creating a method to emit the directions to the server side
  methods: {
    move(direction) {
      this.socket.emit("move", direction);
    },
  },
};
</script>
<style scoped></style>

Ensuite, nous devons créer quelques boutons dans notre modèle div pour utiliser la méthode que nous avons créée. À l'intérieur de ces boutons, nous allons ajouter un écouteur onclick, le nommer move, passer dans une direction, puis fermer la balise et faire de même pour le reste des boutons. Une fois cela fait, nous devrions avoir un bouton haut, bas, gauche et droite dans le navigateur Web.

<template>
  <!-- creating the HTML canvas -->
  <div>
    <canvas ref="game" width="640" height="480" style="border: 1px solid black">
    </canvas>
  <!--create a p tag to format the button properly in your browser--> 
    <p>
      <button v-on:click="move('right')">Right</button>
      <button v-on:click="move('left')">Left</button>
      <button v-on:click="move('up')">Up</button>
      <button v-on:click="move('down')">Down</button>
    </p>
  </div>
</template>

Alors maintenant, revenons à notre index.js et commençons à planifier d'écouter les instructions. Rendez-vous à l'intérieur de la connexion des sockets et configurez un nouveau socket.on pour écouter les messages de déplacement et créer un objet de données qui contiendrait différents événements de commutation. Dans le premier cas (à gauche), réglez la position x sur -5, puis le socketio émet la position. Observez que nous avons utilisé socketio au lieu de simplement socket car les sockets émettent uniquement vers un client particulier tandis que socketio émet vers tous les clients connectés, puis casse la casse. Vous devez faire la même chose pour le reste des cas; le droit devrait avoir une position x de +5, le haut devrait avoir la position y de -5, et enfin, le bas devrait avoir la position y de +5 accompagné de leur socketio émettre pour émettre ces positions puis casser pour terminer le cas.

//connection to emit the positions to all connected clients 
Socketio.on("connection", (socket) => {
  socket.emit("position", position);
//connection to the move buttons and method to send back conditions to perform 
  socket.on("move", (data) => {
    switch (data) {
      case "left":
        position.x -= 5;
        Socketio.emit("position", position);
        break;
      case "right":
        position.x += 5;
        Socketio.emit("position", position);
        break;
      case "up":
        position.y -= 5;
        Socketio.emit("position", position);
        break;
      case "down":
        position.y += 5;
        Socketio.emit("position", position);
        break;
    }
  });
});

Si vous vous dirigez vers votre navigateur et cliquez sur l'un des boutons, vous observerez que le rectangle se déplacera dans la direction sur laquelle vous avez cliqué. Le client reçoit maintenant les positions que nous avons définies précédemment dans le serveur, puis les diffuse au navigateur pour effectuer tous les différents mouvements.

Conclusion

Ceci est un bon exemple d'utilisation de socket.io et Vue.js. C'est un meilleur exemple que de simplement faire le serveur de chat typique que tout le monde fait ! Ce jeu est assez simple car il n'a pas d'angle de compétition ; tout ce que nous avons fait a été de créer un serveur avec Node.js et un client avec Vue.js. Le serveur envoie des informations de position au client, et le client utilise ces informations pour afficher le canevas 2D sur votre écran, ce qui signifie que nous avons maintenant un composant de jeu pour cela, et nous l'utilisons comme s'il s'agissait d'un serveur de jeu. C'est un excellent exemple d'utilisation de sockets avec vue.js et node.js.

Dépôt Git : https://github.com/christofa/2d-Blockgame.git

Lien : https://blog.openreplay.com/rendering-real-time-data-with-vue-node-and-socket-io

#vue #node #socketio #javascript 

Node Socket.io Example | How To Use Node With Socket.io

Node Socket.io Tutorial is the topic we will deep dive into today. We will build a simple chat app today. We will use Node.js for the backend platform and Socket.io for real-time two-way communication. Now, first, we need to create a package.json file to install our required dependencies.

Node Socket.io example

WebSocket is the internet protocol that allows for full-duplex communication between a server and clients.

This protocol goes beyond the typical HTTP request/response paradigm; with WebSockets, the server may send data to a client without the client initiating a request, thus allowing for some very interesting applications.

Most tutorials you’ll find on WebSockets have you build a chat app, and we will do the same here. We’ll be using the popular  Socket.IO Node.js server framework to accomplish this.

Install the required dev dependencies for our project.

#node #socket.io #http #node.js

8 Popular Websites That Use The Vue.JS Framework

In this article, we are going to list out the most popular websites using Vue JS as their frontend framework.

Vue JS is one of those elite progressive JavaScript frameworks that has huge demand in the web development industry. Many popular websites are developed using Vue in their frontend development because of its imperative features.

This framework was created by Evan You and still it is maintained by his private team members. Vue is of course an open-source framework which is based on MVVM concept (Model-view view-Model) and used extensively in building sublime user-interfaces and also considered a prime choice for developing single-page heavy applications.

Released in February 2014, Vue JS has gained 64,828 stars on Github, making it very popular in recent times.

Evan used Angular JS on many operations while working for Google and integrated many features in Vue to cover the flaws of Angular.

“I figured, what if I could just extract the part that I really liked about Angular and build something really lightweight." - Evan You

#vuejs #vue #vue-with-laravel #vue-top-story #vue-3 #build-vue-frontend #vue-in-laravel #vue.js

Vue.js Zoom Clone Group Video Chat Using Node.js Socket.io WebRTC and Javascript Full Project

Vue.js Zoom Clone Group Video Chat Using Node.js Socket.io WebRTC and Javascript Full Project

Download the full source code of application here:

https://codingshiksha.com/vue/vue-js-zoom-clone-group-video-chat-using-node-js-socket-io-webrtc-and-socket-io-full-project-for-beginners/

#vue #node #socket

Vue File Upload Using vue-dropzone Tutorial

In this tutorial, I will show you how to upload a file in Vue using vue-dropzone library. For this example, I am using Vue.js 3.0. First, we will install the Vue.js using Vue CLI, and then we install the vue-dropzone library. Then configure it, and we are ready to accept the file. DropzoneJS is an open source library that provides drag and drops file uploads with image previews. DropzoneJS is lightweight doesn’t depend on any other library (like jQuery) and is  highly customizable. The  vue-dropzone is a vue component implemented on top of Dropzone.js. Let us start Vue File Upload Using vue-dropzone Tutorial.

Dropzone.js is an open-source library providing drag-and-drop file uploads with image previews. DropzoneJS is lightweight, doesn’t depend on any other library (like jQuery), and is highly customizable.

The vue-dropzone is a vue component implemented on top of Dropzone.js.

First, install the Vue using Vue CLI.

Step 1: Install Vue.js using Vue CLI.

Go to your terminal and hit the following command.

npm install -g @vue/cli
         or
yarn global add @vue/cli

If you face any error, try running the command as an administrator.

Now, we need to generate the necessary scaffold. So type the following command.

vue create vuedropzone

It will install the scaffold.

Open the project in your favorite editor. Mine is Visual Studio Code.

cd vuedropzone
code .

Step 2: Install vue-dropzone.

I am using the Yarn package manager. So let’s install using Yarn. You can use NPM, also. It does not matter.

yarn add vue2-dropzone

or

npm install vue2-dropzone

Okay, now we need to add one css file with the above package. Now, vue cli uses css loader, so we can directly import in the src >>  main.js entry file.

import Vue from 'vue'
import App from './App.vue'

Vue.config.productionTip = false

new Vue({
  render: h => h(App)
}).$mount('#app')

import 'vue2-dropzone/dist/vue2Dropzone.css'

If importing css is not working for you, then you need to install that CSS file manually.

Copy this vue2Dropzone.css file’s content.

Create one file inside the src  >>  assets folder, create one css file called vuedropzone.css and paste the content there.

Import this css file inside src  >>  App.vue file.

<style lang="css">
  @import './assets/vuedropzone.css';
</style>

Now, it should include in our application.

Step 3: Upload an Image.

Our primary boilerplate has one ready-made component called HelloWorld.vue inside src  >>  components folder. Now, create one more file called FileUpload.vue.

Add the following code to FileUpload.vue file.

// FileUpload.vue

<template>
  <div id="app">
    <vue-dropzone id="upload" :options="config"></vue-dropzone>
  </div>
</template>

<script>
import vueDropzone from "vue2-dropzone";

export default {
  data: () => ({
    config: {
      url: "https://appdividend.com"
    }
  }),
  components: {
    vueDropzone
  }
};
</script>

Here, our API endpoint is https://appdividend.com. It is the point where we will hit the POST route and store our image, but it is my blog’s homepage, so it will not work anyway. But let me import this file into App.vue component and see what happens.

// App.vue

<template>
  <div id="app">
    <FileUpload />
  </div>
</template>

<script>
import FileUpload from './components/FileUpload.vue'

export default {
  name: 'app',
  components: {
    FileUpload
  }
}
</script>

<style lang="css">
  @import './assets/vuedropzone.css';
</style>

Now, start the development server using the following command. It will open up URL: http://localhost:8080.

npm run serve

Now, after uploading the image, we can see that the image upload is failed due to the wrong POST request endpoint.

Step 4: Create Laravel API for the endpoint.

Install the Laravel.

After that, we configure the database in the .env file and use MySQL database.

We need to create one model and migration file to store the image. So let us install the following command inside the Laravel project.

php artisan make:model Image -m

It will create both the Image model and create_images_table.php migrations file.

Now, open the migrations file and add the schema to it.

// create_images_table.php

public function up()
    {
        Schema::create('images', function (Blueprint $table) {
            $table->increments('id');
            $table->string('image_name');
            $table->timestamps();
        });
    }

Now, migrate the database table using the following command.

php artisan migrate

It creates the table in the database.

Now, we need to add a laravel-cors package to prevent cross-site-allow-origin errors. Go to the Laravel root and enter the following command to install it.

composer require barryvdh/laravel-cors

Configure it in the config  >>  app.php file.

Barryvdh\Cors\ServiceProvider::class,

Add the middleware inside app >>  Http  >>  Kernel.php file.

// Kernel.php

protected $middleware = [
        \Illuminate\Foundation\Http\Middleware\CheckForMaintenanceMode::class,
        \Illuminate\Foundation\Http\Middleware\ValidatePostSize::class,
        \App\Http\Middleware\TrimStrings::class,
        \Illuminate\Foundation\Http\Middleware\ConvertEmptyStringsToNull::class,
        \App\Http\Middleware\TrustProxies::class,
        \Barryvdh\Cors\HandleCors::class,
];

Step 5: Define the API route and method to store the image.

First, create an ImageController.php file using the following command.

php artisan make:controller ImageController

Define the store method. Also, create one images folder inside the public directory because we will store an image inside it.

Right now, I have written the store function that handles one image at a time. So do not upload multiple photos at a time; otherwise, it will break.

// ImageController.php

<?php

namespace App\Http\Controllers;

use Illuminate\Http\Request;
use App\Image;

class ImageController extends Controller
{
    public function store(Request $request)
    {
       if($request->file('file'))
       {
          $image = $request->file('file');
          $name = time().$image->getClientOriginalName();
          $image->move(public_path().'/images/', $name); 
        }

       $image= new Image();
       $image->image_name = $name;
       $image->save();

       return response()->json(['success' => 'You have successfully uploaded an image'], 200);
     }
}

Go to the routes   >>  api.php file and add the following route.

// api.php

Route::post('image', 'ImageController@store');

Step 6: Edit FileUpload.vue component.

We need to add the correct Post request API endpoint in FileUpload.vue component.

// FileUpload.vue

<template>
  <div id="app">
    <vue-dropzone id="drop1" :options="config" @vdropzone-complete="afterComplete"></vue-dropzone>
  </div>
</template>

<script>
import vueDropzone from "vue2-dropzone";

export default {
  data: () => ({
    config: {
      url: "http://localhost:8000/api/image",
      
    }
  }),
  components: {
    vueDropzone
  },
  methods: {
    afterComplete(file) {
      console.log(file);
    }
  }
};
</script>

Now, save the file and try to upload an image. If everything is okay, then you will be able to save the image on the Laravel web server as well as save the name in the database as well.

You can also verify on the server side by checking the database entry and the images folder in which we have saved the image.

Step 7: More vue-dropzone configuration.

The only required options are url, but there are many more you can use.

For example, let’s say you want:

• A maximum of 4 files
• 2 MB max file size
• Sent in chunks of 500 bytes
• Set a custom thumbnail size of 150px
• Make the uploaded items cancelable and removable (by default, they’re not)

export default {
  data: () => ({
    dropOptions: {
      url: "https://httpbin.org/post",
      maxFilesize: 5, // MB
      maxFiles: 5,
      chunking: true,
      chunkSize: 400, // Bytes
      thumbnailWidth: 100, // px
      thumbnailHeight: 100,
      addRemoveLinks: true
    }
  })
  // ...
}

Happy Coding !!!

Originally published at https://appdividend.com 

#vue #vue-dropzone #vue.js #dropzone.js #dropzonejs #vue cli