NodeJs / Socket.io - Installation

Posted on Mon 28 December 2015 in Hosting,

Lors de l'élaboration de mon projet de domotique, je me suis rendu compte que ce serait top d'avoir un affichage en temps réel des valeurs de mes capteurs.
Pour ce faire, je me suis mis à expérimenter nodejsavec son addon socket.io.

Jusqu'à présent, je n'en avais jamais eu le besoin....
Now Let's go...

Source :
https://openclassrooms.com/courses/des-applications-ultra-rapides-avec-node-js/socket-io-passez-au-temps-reelhttp://stackoverflow.com/questions/24603845/nodejs-sqlite3-data-synchronization


1. Installation sous debian Jessie

$ sudo apt-get install curl
$ sudo curl -sL https://deb.nodesource.com/setup_5.x | bash -

Then install with Debian (as root):

$ sudo apt-get install --yes nodejs

Optional: install build tools

To compile and install native addons from npm you may also need to install build tools:

$ sudo apt-get install --yes build-essential

2. Premier script

Mon premier script n'a de but que de tester les interactions entre le client et le serveur.
Il sera composé de 2 fichiers + la librairie socket.io.

  • app.js : le fichier javascript qui aura pour role de serveur
  • index.html : la page html accessible par le client

Dans un premier temps, il faut définir le répertoire qui servira au projet (/root/apps, dans notre cas).

$ cd /root/apps
$ npm install
$ npm install sqlite3
$ npm install fsmonitor
$ npm install socket.io

et maintenant le script tel que nous l'avons écrit et testé.

$ vi app.js

var http = require('http');
var fs = require('fs');

// Chargement du fichier index.html affiché au client
var server = http.createServer(function(req, res) {
    fs.readFile('./index.html', 'utf-8', function(error, content) {
        res.writeHead(200, {"Content-Type": "text/html"});
        res.end(content);
    });
});

// Chargement de socket.io
var io = require('socket.io').listen(server);

// Quand un client se connecte, on le note dans la console
io.sockets.on('connection', function (socket) {
    console.log('Un client est connecté !');
    socket.emit('message','vous etes bien connecte');

    socket.on('message', function (message){
    console.log('un client me parle : '+message);
    });

    socket.on('message2', function (message2){
    console.log('message2 : '+message2);
    });
});


server.listen(8080);
$ vi index.html

<!DOCTYPE html>
<html>
  <head>
    <meta charset="utf-8" />
    <title>Socket.io</title>
  </head>

  <body>
    <h1>Communication avec socket.io !</h1>

    <div id="message">message initialisation....</div>
      <p><input type="button" value="refresh" id="poke" /></p>


       <!-- chargement des librairies javascript -->
      <script src="http://code.jquery.com/jquery-1.10.1.min.js"></script>
      <script src="/socket.io/socket.io.js"></script>


       <!-- script de connexion au serveur nodejs : 172.16.43.148 -->
      <script>
        // etablissement de la connexion
        var socket = io.connect('http://172.16.43.148:8080');

        // affichage du message recu par le serveur
         socket.on('message', function(message) {
            $('#message').html(message);
          })

          // envoie du message suivant lors du click sur le bouton
         $('#poke').click(function () {
           socket.emit('message', 'Salut serveur, ça va ?');
           socket.emit('message2', 'test message2');
         })
      </script>

    </body>
</html>

3. 2ème script - Horloge

Le second exemple consiste effectuer une page web qui contient l'heure qui se met à jour toutes les secondes.

$ vi app.js


var http = require('http');
var fs = require('fs');

// Chargement du fichier index.html affiché au client
var server = http.createServer(function(req, res) {
    fs.readFile('./index.html', 'utf-8', function(error, content) {
        res.writeHead(200, {"Content-Type": "text/html"});
        res.end(content);
    });
});

// Chargement de socket.io
var io = require('socket.io').listen(server);


function sleep(milliSeconds){
        var startTime = new Date().getTime();
        while (new Date().getTime() < startTime + milliSeconds);
}


// Quand un client se connecte, on le note dans la console
io.sockets.on('connection', function (socket) {
    console.log('Un client est connecté !');
    var time = new Date();
    socket.emit('time',time.getHours() + ":" + time.getMinutes() + ":" + time.getSeconds());
    socket.on('time', function(message){
        if (message=='whattimeisit'){
          var time = new Date();
          sleep(1000);
          console.log('time');
          socket.emit('time',time.getHours() + ":" + time.getMinutes() + ":" + time.getSeconds());
        }
    })
});


server.listen(8080);
$ vi index.html

<!DOCTYPE html>
<html>
  <head>
    <meta charset="utf-8" />
    <title>Socket.io</title>
  </head>

  <body>
    <h1>Communication avec socket.io !</h1>

      <div id="date">message initialisation....</div>
      <div id="time">message initialisation....</div>

      <!-- chargement des librairies javascript -->
      <script src="http://code.jquery.com/jquery-1.10.1.min.js"></script>
      <script src="/socket.io/socket.io.js"></script>


      <!-- script de connexion au serveur nodejs : 172.16.43.148 -->
      <script>
        // etablissement de la connexion
        var socket = io.connect('http://172.16.43.148:8080');

        // affichage du message recu par le serveur
        socket.on('date', function(message) {
          $('#date').html(message);
        })
        socket.on('time', function(message) {
          $('#time').html(message);
          socket.emit('time', 'whattimeisit');    
        })
      </script>

    </body>
</html>