TP WebSockets: écriture d'un programme de chat en HTML5

Table des matières

1. 1. Découverte des web sockets HTML5
   1. 1.1. Etude d'un programme de chat
      1. 1.1.1. Le serveur web NodeJS
      2. 1.1.2. Installation de NodeJS
      3. 1.1.3. Test d'une première application NodeJS
   2. 1.2. Test de l'application de chat
   3. 1.3. Etude de l'application de chat
   4. 1.4. Etude d'un chat gérant des "salles de chat"
2. 2. Découverte d'un logiciel de dessin
   1. 2.1. Télécharger l'archive à étudier
   2. 2.2. Step 1 : le paint le plus simple !
   3. 2.3. Step 2 : ajout des événements mouseUp, mouseMove, mouseDown, création d'un objet pour le dessin
   4. 2.4. Step 3 : ajout d'un second canvas transparent superposé au canvas principal, pour dessiner des "lignes élastiques"
   5. 2.5. Step 4 : dessiner le contenu du front canvas dans le main canvas quand on relâche la souris en mode ligne
   6. 2.6. Step 5 : ajout d'outils pour dessiner des rectangles et des cercles
   7. 2.7. Step 6 : utilisation des styles de dessin, de nouveaux champs input HTML5 (color, range)
3. 3. Etudier la partie multi-participants du Paint (steps 7 et 8) 
   1. 3.1. On ajoute la partie "chat" au programme de paint
   2. 3.2.  Step 8 : Broadcaster les ordres de dessin
      1. 3.2.1. Coté serveur : on broadcaste les ordres de dessin, sauf à l'envoyeur
      2. 3.2.2. Envoi des ordres de dessin
      3. 3.2.3. Traitement des ordres de dessin qu'on reçoit du serveur
      4. 3.2.4. Utilisation de la webcam pour dessiner avec l'image courante de la webcam et la transmettre
         1. 3.2.4.1. Initialiser l'API getUserMedia
      5. 3.2.5. Peindre avec des images en provenance de la vidéo de la webcam
      6. 3.2.6. Envoie des images pour broadcast. On les envoie en format base64 en tant que dataURL
      7. 3.2.7. Traiter les images reçues en base64 pour les dessiner
   3. 3.3.