Utiliser NGINX et NGINX Plus avec Node.js et Socket.IO, l’API WebSocket

Patrick Nommensen

Dans cet article, nous allons parler de l’utilisation de NGINX et NGINX Plus avec Node.js et Socket.IO. Notre article sur la création d’applications web en temps réel avec WebSocket et NGINX a rencontré un franc succès. Nous allons donc poursuivre ici en présentant la documentation et les bonnes pratiques relatives à l’utilisation de Socket.IO.

Pourquoi utiliser NGINX avec Node.js et Socket.IO ?

Socket.IO est une API WebSocket devenue très populaire avec l’essor des applications Node.js. Cette API est réputée pour faciliter la création d’applications en temps réel, telles que les jeux en ligne ou les chats. NGINX 1.3.13 et les versions ultérieures, ainsi que toutes les versions de NGINX Plus, prennent en charge la mise en proxy des connexions WebSocket, ce qui permet d’utiliser Socket.IO. Le protocole WebSocket permet une communication en duplex intégral, ou bidirectionnelle, via une seule connexion TCP.

Les applications exécutées en production doivent généralement fonctionner sur le port 80 (HTTP), le port 443 (HTTPS), ou les deux. Cela peut s’avérer complexe si plusieurs composants de votre application interagissent avec l’utilisateur ou si vous utilisez un serveur web sur le port 80 pour fournir d’autres ressources. Il est donc nécessaire de mettre en place un proxy vers le serveur Socket.IO, et NGINX est la meilleure solution pour cela. Que vous disposiez d’une seule instance de votre application backend ou de plusieurs centaines, NGINX peut également répartir la charge entre vos serveurs en amont lorsque vous utilisez plusieurs nœuds.

Configuration de Socket.IO

Pour installer Node.js, téléchargez la distribution appropriée (ou utilisez un gestionnaire de paquets). Exécutez la commande npm install socket.io pour installer Socket.IO.

Pour cet exemple, nous supposons que le serveur Socket.IO de votre application en temps réel s’exécute sur le port 5000. Voici un modèle de fichier d’application Node server.js ; il s’agit d’un programme simple qui fait office de serveur et achemine les requêtes entrantes vers le port approprié sur lequel s’exécute le serveur Socket.IO.

var io = require('socket.io').listen(5000); 
io.sockets.on('connection', function (socket) {
  socket.on('set nickname', function (name) {
    socket.set('nickname', name, function () {
      socket.emit('ready');
    });
  });
 
  socket.on('msg', function () {
    socket.get('nickname', function (err, name) {
      console.log('Chat message by ', name);
    });
  });
});

Ajoutez du code JavaScript comme celui qui suit au fichier envoyé à votre client, par exemple index.html. Cet exemple envoie une demande de connexion à votre application afin d’établir une connexion WebSocket avec le navigateur de votre utilisateur.

<script src="/socket.io/socket.io.js"></script>
<script>
     var socket = io(); // your initialization code here.
</script>

Configuration de NGINX

Déclaration du serveur en amont

NGINX et NGINX Plus peuvent équilibrer la charge et répartir les sessions utilisateur entre plusieurs nœuds si votre application comporte plusieurs instances. Dans le contexte http de votre configuration NGINX ou NGINX Plus, incluez un bloc upstream pour définir les nœuds d’un groupe en amont.

Comme le montre l’exemple suivant, vous pouvez inclure le paramètre « weight » dans une directive « server » afin de définir la proportion de trafic qui lui est envoyée. Ici, srv1.app.com reçoit cinq fois plus de sessions que les autres serveurs. NGINX Plus étend les fonctionnalités de proxy inverse de NGINX grâce à des méthodes avancées de répartition de charge et à l’ajout de la persistance des sessions, de contrôles d’intégrité, de rapports d’état détaillés et de la reconfiguration à la volée des groupes de serveurs à charge répartie.

# in the http{} configuration block
upstream socket_nodes {
    ip_hash;
    server srv1.app.com:5000 weight=5;
    server srv2.app.com:5000;
    server srv3.app.com:5000;
    server srv4.app.com:5000;
}

Configuration de l’hôte virtuel

Maintenant que le groupe de serveurs en amont est déclaré, il faut configurer un serveur virtuel afin d’y diriger le trafic. Incluez au minimum la directive proxy_pass et indiquez le nom du groupe en amont. Comme le protocole WebSocket utilise l’en-tête Upgrade introduit dans HTTP/1.1, nous incluons la directive proxy_http_version.

server {
    server_name app.domain.com;
    location / {
        proxy_set_header Upgrade $http_upgrade;
        proxy_set_header Connection "upgrade";
        proxy_http_version 1.1;
        proxy_set_header X-Forwarded-For $proxy_add_x_forwarded_for;
        proxy_set_header Host $host;
        proxy_pass http://socket_nodes;
    }
}

Qu’en est-il des fichiers statiques ?

Pour fournir des ressources statiques, vous pouvez demander à NGINX de transmettre les requêtes à une instance Node.js en amont, mais dans la plupart des cas, il est plus efficace de laisser NGINX les servir directement.

Associée à la directive « server_name » du bloc « server » ci-dessus, la directive « location » suivante indique à NGINX de répondre aux requêtes des clients portant sur le contenu situé à l’adresse http://app.domain.com/assets/ en le servant depuis le répertoire local /path/to/assets. Vous pouvez optimiser davantage la gestion des fichiers statiques ou définir des paramètres d’expiration du cache adaptés à vos besoins.

location /assets {
    alias /path/to/assets;
    access_log off;
    expires max;
}

Dépannage

Si vous obtenez l’erreur suivante, vous utilisez probablement une version de NGINX antérieure à la version 1.3. WebSocket est pris en charge à partir de NGINX 1.3.13.

WebSocket connection to '...' failed: Error during WebSocket handshake: 'Connection' header value is not 'Upgrade': keep-alive socket.io.js:2371

Pour aller plus loin

• NGINX en tant que proxy WebSocket
• Comparaison des fonctionnalités de NGINX et NGINX Plus
• Spécifications techniques de NGINX Plus

Pour essayer NGINX Plus, commencez votre essai gratuit de 30 jours dès aujourd’hui ou contactez-nous pour discuter de vos cas d’utilisation.

À propos de l’auteur

Patrick Nommensen

Autres articles de Patrick Nommensen