L’outil secret pour exploser ton chiffre d'affaires en 2025 !
Construire une application de peinture en temps réel avec jQuery & Socket.io
Dans ce didacticiel, nous allons créer une application de peinture en temps réel avec jQuery et Socket.io
Les applications en temps réel sont des programmes qui fonctionnent dans un laps de temps que l'utilisateur perçoit comme immédiat, actuel ou instantané. Sur Facebook, lorsque vous envoyez un message, le destinataire le reçoit sans avoir à actualiser son navigateur. Sur Instagram, lorsque quelqu'un aime votre photo, vous recevez immédiatement une invite sans aucune action de votre part. D'autres exemples d'applications en temps réel sont les graphiques en direct, les jeux multijoueurs, les outils de gestion de projet et de collaboration et les services de surveillance.
Dans ce didacticiel, nous allons créer une application de peinture en temps réel. Grâce à notre application, les utilisateurs peuvent peindre simultanément sur le même écran avec leurs différents ordinateurs et collaborer instantanément tout en utilisant l'application et en recevant les modifications en temps réel. Nous utiliserons Socket.io pour obtenir des mises à jour en temps réel, ainsi que HTML, CSS et jQuery pour la création de l'interface utilisateur.
Conditions préalables
Pour suivre ce tutoriel, quelques notions élémentaires de jQuery. et Node.js est requis. Assurez-vous également d'avoir au moins la version de nœud 8+ installée sur votre ordinateur de développement avant de commencer. Des connaissances HTML / CSS sont également recommandées mais non obligatoires.
Pour créer l’application requise, voici quelques outils que nous allons utiliser:
Initialisation de l'application
La création d'une application de peinture avec HTML, CSS et jQuery est possible. Cependant, pour ajouter des fonctionnalités de collaboration en temps réel, nous avons besoin d’un serveur qui joue le rôle d’intermédiaire entre tous les clients connectés (navigateurs). Nous allons utiliser 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é paintapp et créez un fichier package.json . Maintenant, ajoutez le code suivant:
// package.json
{
"name": "PaintApp",
"version": "1.0.0",
"description": "Application Simple Paint construite avec node.js et socket.io",
"main": "app.js",
"scripts": {
"test": "echo " Erreur: aucun test spécifié "&& exit 1",
"start": "node app"
},
"author": "Votre nom",
"licence": "ISC",
"dépendances": {
"express": "^ 4.16.2",
"socket.io": "^ 2.2.0"
}
}
Dans ce fichier, nous avons défini les détails de base de notre application et défini ses dépendances (Express et Socket.io), que nous allons utiliser dans ce tutoriel.
Lancez npm install maintenant et attendez qu'il soit terminé. . S'il a fonctionné correctement, vous devriez maintenant voir un dossier node_modules et un fichier package-lock.json .
Dans le répertoire racine, créez un app.js . fichier. Ce fichier sera le point d’entrée de notre application. Créez maintenant un dossier public dans lequel nous allons stocker notre fichier HTML et nos actifs statiques. À l'intérieur, créez un fichier index.html un répertoire css et un répertoire js et initialisez-y deux fichiers paint.css et paint.js respectivement. [19659003] Pour le moment, notre structure de dossiers devrait ressembler à ceci:
paintapp /
node_modules /
Publique/
css /
paint.css
js /
paint.js
index.html
app.js
package.json
package-lock.json
Ouvrez le fichier app.js et ajoutez-y le code suivant:
// ./app.js
const express = require ('express')
const app = express ()
// middlewares
app.use (express.static ('public'))
// écoute sur le port 3000
serveur = app.listen (3000)
Ici, nous avons besoin d'Express et l'initialisons. Nous allons ensuite l'utiliser pour servir les fichiers dans notre dossier public. Maintenant, chaque fois que vous tapez npm start dans le terminal, les fichiers du dossier public s’ils servent de page d’accueil.
C’est tout pour notre serveur de base avec Express. Maintenant, allons de l'avant et créons l'application de peinture. Nous reverrons ce fichier lorsque nous serons prêts à ajouter des fonctionnalités temps réel.
Création de l'application Paint
Ouvrez votre fichier index.html dans le dossier public et ajoutez les lignes de code suivantes:
Application de peinture
En gros, notre application comportera deux parties: La navigation supérieure dans laquelle seront effectuées des actions telles que l'ajout de couleur, l'annulation ou la suppression d'actions; vous pouvez également augmenter ou diminuer la taille de votre pinceau. En dessous se trouvera l'écran principal (toile) où nous allons peindre.
Ouvrez ensuite votre fichier paint dans le dossier css et ajoutez-y les styles suivants:
// public /css/paint.css
corps {
marge: 0;
}
.top-nav {
affichage: flex;
direction de flexion: rangée;
couleur de fond: jaune;
bordure: noir 2px;
position: absolue;
largeur: 100%;
}
.top-nav * {
marge: 5px 10px;
}
#peindre {
bloc de visualisation;
}
Il est maintenant temps d’écrire la fonction pour l’application de peinture. Nous le ferons dans le fichier paint.js . Ouvrez-le et ajoutez-y les lignes de code suivantes:
// public / js / paint.js
socket var, toile, ctx,
brosse = {
x: 0,
y: 0,
couleur: '# 000000',
taille: 10,
bas: faux,
},
accidents vasculaires cérébraux = [],
currentStroke = null;
fonction paint () {
ctx.clearRect (0, 0, canvas.width (), canvas.height ());
ctx.lineCap = 'round';
pour (var i = 0; i <strokes.length; i ++) {
var s = traits [i];
ctx.strokeStyle = s.color;
ctx.lineWidth = s.size;
ctx.beginPath ();
ctx.moveTo (s.points [0] .x, s.points [0] .y);
pour (var j = 0; j <s.points.length; j ++) {
var p = s.points [j];
ctx.lineTo (p.x, p.y);
}
ctx.stroke ();
}
}
fonction init () {
canvas = $ ('# paint');
canvas.attr ({
largeur: window.innerWidth,
hauteur: window.innerHeight,
});
ctx = canvas [0] .getContext ('2d');
fonction mouseEvent (e) {
brush.x = e.pageX;
brush.y = e.pageY;
currentStroke.points.push ({
x: brush.x,
y: brush.y,
});
peindre();
}
canvas.mousedown (fonction (e) {
brush.down = true;
currentStroke = {
couleur: brush.color,
taille: brush.size,
points: [],
};
strokes.push (currentStroke);
mouseEvent (e);
}). mouseup (fonction (e) {
brush.down = false;
mouseEvent (e);
currentStroke = null;
}). mousemove (function (e) {
if (brush.down)
mouseEvent (e);
});
$ ('# undo-btn'). click (function () {
strokes.pop ();
peindre();
});
$ ('# clear-btn'). click (function () {
traits = [];
peindre();
});
$ ('# color-picker'). on ('input', function () {
brush.color = this.value;
});
$ ('# brush-size'). on ('input', function () {
brush.size = this.value;
});
}
$ (init);
Voyons plus en détail les variables et les fonctions:
- canvas – La toile sur laquelle nous allons peindre.
- ctx – Le contexte de l'écran qui est 2D dans notre cas.
- brush – Il s'agit d'un objet contenant les positions initiales du pinceau, sa couleur, sa taille et la position initiale de la souris.
- strokes – Ceci est un tableau de tous les traits de l'utilisateur.
- currentStroke – Il s'agit d'une référence au dernier trait qui commence comme nul.
- Paint () – Telle est la fonction dans laquelle nous réalisons notre peinture actuelle. Lorsque l'utilisateur commence pour la première fois, il efface tout l'écran avec la fonction
ctx.rex () . Nous parcourons ensuite tous les traits qui nous sont envoyés par la fonction mouseEvent () et définissons les diverses propriétés du contexte requises pour peindre à l'écran. Ensuite, nous créons une autre boucle dans la première pour parcourir tous les points du trait. Enfin, nous initialisons la fonction de trait.
- init () – Nous définissons ici ce qui se passe lorsque l'utilisateur effectue des actions en cliquant sur la souris ou sur les boutons.
Nous initialisons d'abord la toile en lui attribuant le id à afficher et définissant l'attribut pour qu'elle s'affiche dans l'écran du navigateur. Nous avons ensuite défini son contexte sur sur 2D puis nous avons créé plusieurs fonctions d’événement de souris permettant de gérer les interactions de la souris lorsque la souris est en bas, en haut ou en mouvement. Chaque événement renvoie les données transmises à la fonction mouseEvent () à traiter. Une fois que cela est fait, il transmet les données affinées à la fonction paint () qui gère le dessin à l'écran. Nous définissons ensuite des commandes pour gérer les événements où l'utilisateur clique sur un bouton.
Enfin, nous utilisons $ (init) pour indiquer au navigateur de déclencher cette fonction au chargement de la page.
.
Aller en temps réel avec Socket.io
Maintenant, nous avons une application de peinture qui fonctionne. Ensuite, nous devons la rendre en temps réel en utilisant Socket.io.Nous avons déjà installé Socket.io comme l’une de nos dépendances de nœuds, nous n’avons donc qu’à l’initialiser dans notre app.js . Ouvrez le fichier et ajoutez-y le code suivant:
// ./app.js
instanciation //socket.io
const io = require ("socket.io") (serveur)
// écoute à chaque connexion
io.on ('connexion', (socket) => {
// ajoute une fonction pour recevoir et émettre une réponse
})
Maintenant que nous avons initialisé Socket.io dans notre application sur le serveur, nous devons ajouter du code côté client pour le connecter à l'instance de socket sur le serveur et lui envoyer les données pertinentes. Ouvrez le fichier index.html et ajoutez le code suivant avant la fin de la balise body:
// /public/index.html
Ajoutez maintenant le code suivant à la fonction init dans le fichier paint.js :
// /public/js/paint.js
socket = io.connect ("http: // localhost: 3000");
fonction mouseEvent (e) {
brush.x = e.pageX;
brush.y = e.pageY;
currentStroke.points.push ({
x: brush.x,
y: brush.y,
});
data = {
x: brush.x,
y: brosse.y
}
socket.emit ('souris', données);
peindre();
}
Ici, nous initialisons Socket.io et, à l'intérieur de la fonction d'événement de souris, nous renvoyons les positions de pinceau actuelles au serveur. Les données que nous renvoyons sont enfermées dans une fonction nommée mouse et c'est ce que nous allons utiliser pour le référencer sur le serveur. Nous allons maintenant traiter cela sur le serveur et renvoyer les données pertinentes à tous les clients connectés. Ouvrez votre app.js et ajoutez-y les lignes de code suivantes:
// ./app.js
io.on ('connexion', (socket) => {
socket.on ('souris', (data) => {
socket.broadcast.emit ('peintre', données);
});
})
Nous recevons ici les données envoyées par le client, puis les envoyons à tous les clients connectés au sein d'une fonction appelée painter . Pour plus d'informations sur les fonctions de Socket.io cliquez ici ici .
Enfin, nous recevons les données du serveur et les affichons à tous nos clients connectés. Ouvrez votre fichier paint.js et ajoutez-y le texte suivant:
// /public/js/paint.js
socket.on ('peintre', (data) => {
currentStroke = {
couleur: brush.color,
taille: brush.size,
points: [],
};
strokes.push (currentStroke);
currentStroke.points.push ({
x: data.x,
y: data.y,
});
peindre();
});
Nous recevons les données et les affichons à tous les clients connectés.
Lancez maintenant votre application en tapant npm start dans le répertoire du projet de votre terminal. Ouvrez http: // localhost: 3000 sur deux écrans de navigateur et votre application sera opérationnelle!
Conclusion
Dans ce tutoriel, nous avons appris à utiliser jQuery, Node.js, HTML et CSS pour créer une application de peinture en temps réel. Les connaissances acquises peuvent vous aider à créer des applications en temps réel plus complexes. Assurez-vous de consulter la Socket.io docs et de poster des commentaires pour plus de clarté sur les parties que vous ne comprenez pas. Code heureux.
Source link