Aujourd'hui, je souhaite vous faire partager une petite expérience rapide avec Node.js et socket.io pour faire du temps réel Smartphone - PC. L'idée de base est de faire communiquer son Smartphone avec son Ordinateur avec du Node.js. Jusque là pour ceux qui ont déjà essayé cette technologie, ça va. Si ce n'est pas le cas, pas de soucis, on y viendra ;) La différence qu'il y aura dans notre application avec un simple Chat ou un temps réel classique, c'est que nous allons nous servir de notre Smartphone pour "piloter" notre Ordinateur, ça sonne classe non ? ##Introduction Pour les novices en Node.js, voilà ce qu'il faut savoir : Node.js est une technologie : Javascript Qui s'éxécute côté serveur (comme le PHP) Qui permet du temps réel très facilement (grâce aux websockets et socket.io par exemple) De bas niveau, c'est à dire qu'on doit créer nous-même le serveur http (pas de panique, ça prend 2 lignes) Je compte me servir du Framework Express dans ce tutoriel, qui permet de passer outre toute la "complexité" de la création du serveur. Pour ceux qui souhaitent découvrir Node.js à la base avant de commencer ce tutoriel, vous avez l'excellent (comme toujours) cours [d'OpenClassrooms][open-classrooms-node] ou bien une très bonne introduction par [Developpez.com][developpez-node]. ##La mise en place de l'environnement Nous allons donc commencer par le début, à savoir créer nos fichiers. Voici l'arborescence que vous devrez avoir :
public
    css
        styles.css
    js
        main.js
app.js
template
    home.ejs
Une fois cette arborescence faite, nous pouvons commencer à installer les outils. Pour ceux qui ont déjà Node.js et npm d'installés sur leur machine, vous pouvez passer au début du codage Pour les autres, il va falloir installer Node.js, qui est désormais livré avec la commande NPM. Je vous invite à aller sur le [Site officiel][node-website] pour télécharger et installer Node.js. Une fois que vous aurez fait toutes les étapes et que vous aurez des réponses cohérentes en tapant "npm" dans votre console, vous pourrez passer à la suite ;) (désolé de ne pas expliquer comment l'installer en détails, mais ce n'est pas vraiment l'objectif du tutoriel) ##Les premières lignes de code .js est présent sur la machine, la commande npm marche, everything is ok. Nous allons pouvoir commencer à mettre en place le serveur Node dans le fichier app.js. Effectuez tout d'abord la commande "npm init" en étant à la racine de votre dossier, appuyez sur entrée à chaque fois jusqu'à la création du fichier package.json. Une fois ceci fait, vous pouvez écrire votre premier commande dans votre console.
npm install express
Express étant installé, le code va pouvoir enfin vraiment commencer, voici les premières lignes à entrer.
var express = require('express');
var app = express();
app.use(express.static(__dirname + '/public'));
var server = app.listen(1818);
4 lignes pour créer un serveur et le faire marcher avec Node.js et Express. La troisième ne compte même pas, donc 3 lignes, sympa non ? Pour décortiquer un peu, après avoir installer express avec la commande npm, on l'inclut dans notre javascript avec le require('express'); On le met ensuite dans une variable qui va définir notre application. Le préfixe app va donc être utiliser pour chaque action souhaitant être effectué sur le serveur (comme le dossier cible défini ci-dessus, le dossier "public" dans notre cas) Pour finir, on "écoute" le serveur sur le port 1818. Tous les ports du monde (en 4 chiffres je crois) peuvent marcher, vous pouvez essayer 8080, 8888, 1000, bref, tout marche. Notre serveur est maintenant mis en place, on va passer au HTML. #Vue et templating EJS Pour l'HTML, on va commencer par ce que tout bon document devrait avoir au minimum
<!DOCTYPE HTML>
<html lang="fr">
    <head>
        <title>Remote Control</title>
        <meta charset="utf-8" />
    </head>

    <body>
    </body>
</html>
Maintenant qu'on a ça, on peut démarrer. On va créer une div avec la class red_round avec juste en-dessous, un button avec la class my_button et l'attribut data-color
<div class="round red_round"></div>
<button class="my_button" data-color="red">Bouton rouge</button>
On ajoute du style classique dans un fichier css On passe au Javascript (j'utilise JQuery personnellement pour aller plus vite, je sais les perfs, tout ça...)
<script src="http://code.jquery.com/jquery-1.11.2.min.js"></script>
<script>
    $(document).ready(function() {
        $('.round').hide();
        $('.my_button').on('click', function() {
            var color = $(this).attr('data-color');
            $('.'+color+'_round').show();
        });    
    });
</script>
Voilà, on a un beau code maintenant, voici ce que ça donne : Contenu du home.ejs
<!DOCTYPE HTML>
<html lang="fr">
    <head>          
        <title>Remote Control</title>
        <meta charset="utf-8" />
        <link rel="stylesheet" href="css/styles.css">
    </head>
    <body>          
        <div class="round red_round"></div>
        <button class="my_button" data-color="red">Bouton rouge</button>
        <script src="http://code.jquery.com/jquery-1.11.2.min.js"></script>
        <script src="js/main.js"></script>
     </body>
</html>
Contenu du styles.css
.round {
    width: 100px;
    height: 100px;
}       
.red_round {
    background-color: red;
}
Contenu du main.js
$(document).ready(function() {

    $('.round').hide();

    $('.my_button').on('click', function() {
        var color = $(this).attr('data-color');
        $('.'+color+'_round').show();
    });
});
Etant donné qu'on a monté le serveur avec Node.js, pour accéder à la page il va falloir faire tourner Node.js (oui c'est embêtant, mais pour la suite ça ca se révéler très utile) On va tapper un node app dans la console pour démarrer le serveur. En allant sur l'url localhost:1818, on aperçoit un beau petit "Cannot GET/" La raison est très simple, nous n'avons défini nulle part où était notre fichier html (le fichier home.ejs est tout seul) D'ailleurs pour utiliser EJS, le package de templating, il faudrait l'installer
npm install ejs 
Pour ceux qui l'ignorent, EJS permet de passer des variables Javascript du côté serveur vers le côté client. Ainsi avec la structure du célèbre undescore.js, on peut récupérer et afficher les variables quasi-exactement comme le PHP, avec la structure : "<% code javascript %>" Ensuite, il faudrait l'inclure dans notre serveur puis définir que la page d'accueil est cette page home.ejs dans le dossier template On stoppe le serveur dans la console avec un Ctrl+C, puis on le redémarre avec node app.js Et là, miracle ! On retrouve notre page ! Du coup on peut tester notre code. En cliquant sur le bouton, le carré rouge s'affiche, super non !? Bon, pas vraiment. Maintenant qu'on a un serveur qui tourne, un template qui s'affiche, et un bouton qui gère l'appariation d'un carré, il va falloir passer à la vitesse supérieuse. Que socket.io soit ! [jekyll-docs]: https://jekyllrb.com/docs/home [jekyll-gh]: https://github.com/jekyll/jekyll [jekyll-talk]: https://talk.jekyllrb.com/ [open-classrooms-node]: https://openclassrooms.com/courses/des-applications-ultra-rapides-avec-node-js [developpez-node]: http://nodejs.developpez.com/tutoriels/javascript/node-js-livre-debutant/ [node-website]: https://nodejs.org