Unhosted

Aventures Unhosted

Une traduction approximative du Journal de bord officiel du No Cookie Crew

d’après Unhosted Adventures
by Michiel B. de Jong

4. WebSockets

No Cookie Crew Non - Avertissement n°2 : Pour ce tutoriel, vous allez devoir mettre à jour votre serveur personnel en utilisant un client ssh/scp.

WebSockets est un excellent moyen pour mettre en place rapidement une communication bidirectionnelle entre vos applications Web Unhosted et votre serveur personnel. Il semble que le meilleur outil pour mettre en place WebSocket côté serveur, tout du moins avec nodejs, soit SockJS. Essayons d'installer ce script nodejs:

var sockjs = require('sockjs'),
    fs = require('fs'),
    https = require('https'),
    config = require('./config.js').config;

function handle(conn, chunk) {
  conn.write(chunk);
}

var httpsServer = https.createServer({ 
  key: fs.readFileSync(config.tlsDir+'/tls.key'), 
  cert: fs.readFileSync(config.tlsDir+'/tls.cert'), 
  ca: fs.readFileSync(config.tlsDir+'/ca.pem') 
}, function(req, res) {
  res.writeHead(200); 
  res.end('connect a WebSocket please'); 
});
httpsServer.listen(config.port);

var sockServer = sockjs.createServer();
sockServer.on('connection', function(conn) {
  conn.on('data', function(chunk) {
    handle(conn, chunk);
  });
});
sockServer.installHandlers(httpsServer, {
  prefix:'/sock'
});
console.log('Running on port '+config.port);

et accompagnons le d'un fichier “config.js” que l'on va déposer dans le même répertoire, comme ceci :

exports.config = {
  tlsDir: '/path/to/tls',
  port: 1234
};

Lancer ce script soit avec “node script.js” ou “forever start script.js”, et ouvrez cette application web Unhosted dans votre navigateur :

<!DOCTYPE html lang="en">
<html>
  <head>
    <meta charset="utf-8">
    <title>pinger</title>
  </head>
  <body>
    <p>
      Ping stats for wss://
      <input id="SockJSHost" value="example.com:1234" >
      /sock/websocket
      <input type="submit" value="reconnect"
        onclick="sock.close();" >
    </p>
    <canvas id="myCanvas" width="1000" height="1000"></canvas>
  </body>
  <script>
    var sock,
        graph = document.getElementById('myCanvas')
          .getContext('2d');

    function draw(time, rtt, colour) {
      var x = (time % 1000000) / 1000;//one pixel per second
      graph.beginPath();
      graph.moveTo(x, 0);
      graph.lineTo(x, rtt/10);//1000px height = 10s
      graph.strokeStyle = colour;
      graph.stroke();
      graph.fillStyle = '#eee';
      graph.rect(x, 0, 100, 1000);
      graph.fill();
    }

    function connect() {
      sock = new WebSocket('wss://'
        +document.getElementById('SockJSHost').value
        +'/sock/websocket');

      sock.onopen = function() {
        draw(new Date().getTime(), 10000, 'green');
      }

      sock.onmessage = function(e) {
        var sentTime = parseInt(e.data);
        var now = new Date().getTime();
        var roundTripTime = now - sentTime;
        draw(sentTime, roundTripTime, 'black');
      }

      sock.onclose = function() {
        draw(new Date().getTime(), 10000, 'red');
      }
    }
    connect();

    setInterval(function() {
      var now = new Date().getTime();
      if(sock.readyState==WebSocket.CONNECTING) {
        draw(now, 10, 'green');
      } else if(sock.readyState==WebSocket.OPEN) {
        sock.send(now);
        draw(now, 10, 'blue');
      } else if(sock.readyState==WebSocket.CLOSING) {
        draw(now, 10, 'orange');
      } else {//CLOSED or non-existent
        draw(now, 10, 'red');
        connect();
      }
    }, 1000);
  </script>
</html>

Voici une URL de données pour cela. Ouvrez-le, remplacer “example.com:1234” par le nom de votre propre serveur et laisser le tourner quelques temps. Il ping votre serveur sur le port indiqué une fois par seconde, et affiche graphiquement le temps de réponse entre l'envoi et la réception. Le résultat graphique devrait ressembler à quelque chose comme ça :

pinger-exemple

J'ai une connexion wifi pas très fiable où je me trouve en ce moment, vous voyez tout de même que la plupart des paquets finissent par arriver, bien que certains prennent plus de 10 secondes pour le faire. Quelques notes à ce sujet:

Un autre exemple, voilà ce que produit le fait de débrancher la connexion wifi pendant 15 minutes :

pinger-expbackoff

Et une autre illustration avec ce tracé plat - le point violet correspond au moment où j'ai cliqué sur 'Reconnecter'.

flatlining

Dans l'ensemble, WebSockets est un bon moyen de connecter votre application web Unhosted à votre serveur personnel. La semaine prochaine, comme promis, nous allons utiliser WebSocket pour créer une passerelle entre vos comptes Facebook et Twitter sous nodejs. Alors restez à l'écoute!

Commentaires bienvenus!

Suivant : Facebook et Twitter depuis nodejs