Recherche de site Web

Comment installer Express, un framework Node.js, et configurer Socket.io sur un VPS

Ce que vous apprendrez dans cet article

  • Comment installer NodeJS 0.10.16 en utilisant Node Version Manager (NVM)
  • Comment installer le framework d'application web Express pour NodeJS
  • Comment configurer un projet Express simple
  • Comment configurer socket.io dans Express
  • Envoyer des messages simples au client en temps réel
  • Comment écouter les messages en utilisant le JavaScript côté client

Étape 1 : Configurer NodeJS

Remarque : Vous pouvez ignorer cette étape si vous savez déjà que vous avez NodeJS installé v0.10.16

Node Version Manager (NVM) est un outil pour aider à installer différentes versions de NodeJS sur votre machine Linux. Pour utiliser NVM, assurez-vous d'avoir git et curl installés.

Connectez-vous à votre VPS (droplet) en utilisant SSH.

Si vous ne les avez pas installés, utilisez le gestionnaire de paquets de votre système pour les installer. Par exemple, sur une installation Ubuntu ou Debian, vous exécuteriez :

```
sudo apt-get install curl git
```

Vous devez maintenant exécuter le script d'installation de NVM :

curl https://raw.github.com/creationix/nvm/master/install.sh | sh

IMPORTANT : Vous devez maintenant vous déconnecter de votre boîte et vous reconnecter en utilisant SSH.

Testez pour vous assurer que la commande nvm fonctionne en tapant nvm dans le terminal. Si vous n'obtenez pas une erreur commande introuvable, alors vous avez correctement configuré NVM.

Pour installer la dernière version de Node (qui est 0.10.16 au moment de la rédaction de cet article), il suffit de taper :

nvm install 0.10.16

Puis attendez que l'installation soit terminée. Si l'installation a réussi, vous devriez obtenir une sortie indiquant : Now using node v0.10.16.

Tapez node -v dans le terminal pour vous assurer que vous utilisez la version spécifiée. Vous devriez obtenir la sortie : v0.10.16

Étape 2 : Configurer Express

Express est un framework d'application web pour Node. Il est minimal et flexible. Pour commencer à utiliser Express, vous devez utiliser NPM pour installer le module. Il suffit de taper :

npm install -g express

Cela installera l'outil de ligne de commande Express, qui aidera à créer une application web basique. Une fois que vous avez installé Express, suivez ces étapes pour créer un projet Express vide :

mkdir socketio-test

cd socketio-test

express

npm install

Ces commandes créeront un projet Express vide dans le répertoire que nous venons de créer socketio-test. Nous exécutons ensuite npm install pour obtenir toutes les dépendances nécessaires au fonctionnement de l'application. Pour tester l'application vide, exécutez node app puis accédez à votre navigateur à l'adresse http://yourDropletIp-or-domainName:3000. Vous devriez obtenir un simple message de bienvenue disant : « Bienvenue sur Express ».

Si vous voyez le message de bienvenue, alors vous avez une application Express de base prête et en fonctionnement !

Assurez-vous de tuer votre VPS avec la commande clavier Ctrl+C avant de continuer.

Étape 3 : Installation de Socket.io dans votre application Express

Tout d'abord, un résumé rapide de ce qu'est Socket.io. Socket.io est une bibliothèque JavaScript en temps réel. En bref, c'est une API WebSocket qui déterminera le type de connexion approprié à établir en fonction des capacités du navigateur, que ce soit le Long Polling AJAX, Flash, ou même simplement des WebSockets classiques.

Alors, comment commencer avec ça ? Tout d'abord, vous avez besoin d'un serveur Socket.io. Nous avons déjà un serveur Express prêt et en attente, tout ce que nous devons faire est d'ajouter la bibliothèque socket. Pour ce faire, nous devons l'ajouter au fichier package.json.

Votre fichier initial pourrait ressembler à quelque chose comme ceci :

{
  "name": "application-name",
  "version": "0.0.1",
  "private": true,
  "scripts": {
    "start": "node app.js"
  },
  "dependencies": {
    "express": "3.3.5",
    "jade": "*"
  }
}

Ajoutez maintenant un nouveau champ à la zone « dépendances » :

"socket.io": "latest",

Votre fichier résultant devrait ressembler à ceci :

{
  "name": "application-name",
  "version": "0.0.1",
  "private": true,
  "scripts": {
    "start": "node app.js"
  },
  "dependencies": {
    "socket.io": "latest",
    "express": "3.3.5",
    "jade": "*"
  }
}

Exécutez maintenant npm install une fois de plus pour installer la bibliothèque de sockets.

Partie 4 : Le code serveur

Maintenant que nous avons configuré toutes les dépendances, nous pouvons commencer le code ! Allez et ouvrez le fichier app.js dans le dossier de l'application Express. À l'intérieur, vous trouverez beaucoup de code généré automatiquement, supprimez-le tout et utilisez plutôt l'exemple suivant :

/**
 * Module dependencies.
 */
 
var express = require('express')
  , routes = require('./routes')
  , http = require('http');
 
var app = express();
var server = app.listen(3000);
var io = require('socket.io').listen(server); // this tells socket.io to use our express server
 
app.configure(function(){
  app.set('views', __dirname + '/views');
  app.set('view engine', 'jade');
  app.use(express.favicon());
  app.use(express.logger('dev'));
  app.use(express.static(__dirname + '/public'));
  app.use(express.bodyParser());
  app.use(express.methodOverride());
  app.use(app.router);
});
 
app.configure('development', function(){
  app.use(express.errorHandler());
});
 
app.get('/', routes.index);
 
 
console.log("Express server listening on port 3000");

Tout ce que ce fichier exemple a fait, c'est réorganiser le code généré automatiquement et ajouter la ligne var io=require('socket.io').listen(server); qui indique à socket.io d'écouter et d'utiliser notre serveur Express. Si vous exécutez votre application node, vous devriez voir apparaître : info - socket.io started.

Comment transportons-nous maintenant un message à l'utilisateur ?

Ajoutez les lignes suivantes à votre app.js juste en dessous de la dernière ligne.

io.sockets.on('connection', function (socket) {
    console.log('A new user connected!');
    socket.emit('info', { msg: 'The world is round, there is no up or down.' });
});

Cela enverra un nouveau message socket chaque fois qu'un nouvel utilisateur se connectera au serveur. Maintenant, nous avons juste besoin d'un moyen d'interagir avec le VPS côté client.

Partie 5 : Le code côté client

Naviguez vers le dossier public/javascripts à l'intérieur de votre application Express et ajoutez un nouveau fichier appelé client.js et mettez ce code dedans :

// connect to the socket server
var socket = io.connect(); 

// if we get an "info" emit from the socket server then console.log the data we recive
socket.on('info', function (data) {
    console.log(data);
});

Le code est simple mais il montre ce que vous pouvez faire avec Socket.io. Maintenant, nous devons juste inclure les scripts dans notre page principale.

Naviguez vers votre dossier views dans l'application Express et ouvrez layout.jade. Express n'utilise pas le HTML simple pour rendre ses pages. Il utilise un moteur de template appelé Jade. (Plus d'informations sur Jade peuvent être trouvées ici) Jade est simple et clair comparé au HTML simple. Pour ajouter notre script client et la bibliothèque cliente Socket.io, nous devons simplement ajouter ces lignes juste en dessous de link(rel='stylesheet', href='/stylesheets/style.css') :

script(type='text/javascript', src="/socket.io/socket.io.js")
script(type='text/javascript', src='javascripts/client.js')

Assurez-vous qu'ils sont alignés au même niveau d'indentation et NE mélangez PAS les tabulations et les espaces. Cela fera générer une erreur par Jade.

Revenez dans le répertoire socketio-test :

cd socketio-test

Enregistrez le fichier de mise en page et démarrez à nouveau votre application Express en utilisant : node app.

Partie 6 : Le tester

Naviguez maintenant de nouveau avec votre navigateur vers http://yourDropletIp-or-domainName:3000 et ouvrez la console des outils de développement. Vous devriez voir quelque chose comme ceci dans le journal :

Object {msg: "The world is round, there is no up or down."}

Ceci est un message envoyé directement du VPS au client en temps réel.

Soumis par : Aaron Shea