docTP - ProgRes - NodeJs
download 
Plainte Transcription
TP - ProgRes - NodeJs
TP - ProgRes - NodeJs
Création d'un squelette d'application
Le but est de créer un squelette d'application que vous pourrez utiliser comme base dans les exercices suivants et pour
votre projet.
1. Créer un nouveau projet dans un nouveau dossier appelé nodejs-skeleton à l'aide de la commande npm init , avec
pour fichier principal server.js et un fichier javascript pour le client: client.js .
2. Installer les dépendances suivantes (avec la commande npm install --save <MODULE> ): express , socket.io 3. Installer les dépendances suivantes pour le client (avec la commande npm install --save-dev <MODULE> ):
browserify , socket.io-client , jquery 4. Ajouter dans package.json le script suivant:
"start": "browserify client.js > public/bundle.js && node server.js"
5. Créer un fichier html index.html dans le dossier public qui contient:
<!DOCTYPE html>
<html>
<body>
<div id="main"></div>
<script type="text/javascript" src="bundle.js"></script>
</body>
</html>
6. Dans le fichier serveur.js , créer un serveur à l'aide du module express, et faire en sorte que le serveur renvoie
automatiquement les fichiers du dossier public grâce à la commande: app.use(express.static('public')); 7. Dans le fichier client.js , afficher simplement un texte dans la console.
8. Compiler le client et lancer le serveur à l'aide du script précédement créé:
npm start
9. Ouvrir un navigateur web et accéder à votre application (ne pas continuer si l'application ne fonctionne pas à ce
niveau).
10. Connecter le client et le serveur à l'aide de socket.io (côté serveur) et socket.io-client côté client. Ajouter un
message de log lorsque le client se connect au serveur (côté client et côté serveur).
11. Vérifier que tout fonctionne correctement.
Exercice 1
Le but de cet exercice est de créer une application pour l'affichage d'une page Web pouvant être éditée en temps réel.
1. Copier le dossier nodejs-skeleton dans un nouveau dossier reactive-page (il sera peut-être nécessaire de
supprimer le dossier node_modules et de lancer npm install ).
2. Créer une variable côté serveur appelée pageContent qui contiendra le contenu (html) de la page web (l'initialiser avec
un texte simple).
3. Lorsque qu'un client se connecte, envoyer, du serveur vers ce client, la commande updateContent avec le contenu de
la page dans un object { content: pageContent } .
4. Côté client, à la reception de la commande updateContent , remplacé le contenu de la page par les données reçus,
grâce à la commande:
$('#main').html(data.content);
5. Compiler et démarrer votre application et vérifier que le texte simple s'affiche côté client.
6. Créer une page public/admin.html similaire à la page index.html mais qui contient en plus l'élément suivant
permettant l'édition de texte:
<textarea rows="20" cols="150" id="content-editor"></textarea>
7. Attacher un événement lorsque l'utilisateur modifie le contenu de l'éditeur grace à la commande:
$('#content-editor').on('keyup', function() {
var content = $(this).val();
/* ... */
});
où content vaut le texte contenu dans l'éditeur.
8. Lorsque l'utilisateur modifie le texte dans l'éditeur, envoyé la commande updateContent au serveur contenant le
nouveau texte. Faire en sorte que ce nouveau contenu soit envoyé à tous les client.
9.
Utiliser le module marked pour permettre au client d'écrire du texte markdown, en transformant le contenu de la
page du markdown au html stylisé.
Exercice 2
Le but de cet exercice est de crée une application de dessin collaboratif.
1. Copier le dossier nodejs-skeleton dans un nouveau dossier live-painting (il sera peut-être nécessaire de
supprimer le dossier node_modules et de lancer npm install )
2. Dans la page index.html , remplace la div principale par un élément canvas:
<canvas id="main"
style="margin:0; border:1px solid; cursor:none"
width="800"
height="600">
</canvas>
3. Faire en sorte que chaque client est un identifiant unique.
4. Côté client et côté serveur, créer une variable var brushPositions = {}; qui associera chaque id client la position
(un objet {x: XX, y:XX} ) de la souris du client. Faire en sorte que cette variable ait la même valeur chez le serveur est
chez tous les clients, en envoyant des commandes. Vous pourrez notamment utiliser chez le client l'événement suivant
qui écoute les mouvements de la souris:
$(document).on("mousemove", function(event){
socket.emit('mousemove', { x: event.clientX, y: event.clientY });
});
5. Côté client, pour chaque position dans la variable brushPositions , dessiner une image de pinceau, dans une fonction
frameUpdate (les exemples se trouvant le site http://www.html5canvastutorials.com peuvent vous être utiles):
function frameUpdate() {
/* ... */
window.requestAnimationFrame(frameUpdate);
}
frameUpdate();
6. Envoyer la commande startPainting , resp. stopPainting , lorsque l'utilisateur click (événement mousedown ), resp.
relache la souris (événement mouseup ).
7. Côté serveur, lorsqu'un utilisateur bouge la souris alors que le bouton de la souris est appuyé (il est en train de peindre),
enregistrer les positions de la souris dans une liste currentPainting . Lorsque le bouton de la souris est relaché,
mettre cette liste dans une liste paintings .
8. Faire en sorte que les clients aient une variable paintings ayant la même valeur que celle du serveur (en envoyant la
valeur à tous les clients, après chaque modification).
9. Côté client, dessiner (toujours dans la fonction frameUpdate ) une ligne pour chaque liste dans la liste paintings .
10.
Améliorer votre application pour que les clients possèdent aussi les dessins en cours de création (contenu dans les
variables currentPainting ).
11.
Modifier votre application pour que client ait une couleur associé (aléatoirement choisie). Chaque dessin effectué
par ce client doit avoir cette couleur, chez tous clients.
