Tuto NodeJS : Comment utiliser Socket.io

Lucas Roquilly

Publié le 22 mai 2020

L’utilisation des technologies plus “traditionnelles” (et plus populaires) que NodeJS, telles que le stack LAMP (Linux, Apache HTTP Server, MySQL et PHP) ont longtemps rendue plus difficiles certains types de projets nécessitant un grand nombre de requêtes au serveur. Exemple typique : le développement d’une application de messagerie instantanée, qui nécessite d’interroger le serveur très souvent et de garder un historique des dates et heures de chaque message.

Pour combler ces lacunes, le standard WebSocket a été développé et implémenté dans la plupart des navigateurs à partir de fin 2011. WebSocket est un protocole réseau et une API permettant de créer un canal de communication à double-sens (full-duplex) entre un serveur et un navigateur. Les données sont échangées sous forme de paquets via une interface de connexion (socket) TCP.

Grâce à cette technologie, il n’est plus nécessaire pour le client d’interroger très souvent le serveur pour rester à jour. En effet, le serveur peut lui-même envoyer des messages au client tant que le canal est ouvert. WebSocket est particulièrement adapté pour les applications nécessitant un échange continu de données (jeux en ligne, trading en temps réel, etc.). Il facilite également la mise en place de fonctionnalités modernes nécessaires à l’interactivité croissante des apps (notifications, édition de contenu synchronisée, messagerie instantanée, etc.).

npm affiche plus de 3.4 millions de téléchargements par semaine pour socket.io

La fiche de socket.io sur npm et ses 3,4M de téléchargements hebdomadaires

Socket.io se veut compatible avec toutes les plateformes, les navigateurs et les devices et met un point d’honneur à la fiabilité et la rapidité.

Dans ce tuto NodeJS, vous découvrirez la bibliothèque Socket.io qui utilise WebSocket pour établir une communication en temps réel, bidirectionnelle et événementielle entre serveur et clients.

Vous apprendrez également à installer et utiliser facilement Socket.io dans votre projet NodeJS, à créer une connexion entre votre serveur et vos clients ainsi qu’à émettre des évènements.

Installer Socket.io dans un projet NodeJS

Dans ce tuto Socket.io, nous utiliserons le framework Express.js pour créer un serveur Node facilement. Si vous ne connaissez pas ce framework, nous vous recommandons de suivre le guide complet Express.js.

Commençons par installer Express.js et Socket.io via npm avec :

npm install express
npm install socket.io

Express et Socketio sont désormais installés dans votre projet et prêts à être utilisés.

Établir une connexion WebSocket avec Socket.io

Commençons ensuite notre projet NodeJS par un "hello world" classique :

const express = require('express')
const bodyParser = require('body-parser')
const app = express()

app.use(bodyParser.json())
app.use(bodyParser.urlencoded({extended:true}))
app.use(express.static('public'))
app.get('/', function (req, res) {
   res.sendFile('index.html', { root: __dirname })
})

app.get('/json', function (req, res) {
   res.status(200).json({"message":"ok"})
 })

app.listen(3000, function () {
 console.log('Votre app est disponible sur localhost:3000 !')
})

Intégrons maintenant Socket.io et le code pour établir la connexion WebSocket :

const express = require('express')
const bodyParser = require('body-parser')
const app = express()

// ajout de socket.io
const server = require('http').Server(app)
const io = require('socket.io')(server)

app.use(bodyParser.json())
app.use(bodyParser.urlencoded({extended:true}))
app.use(express.static('public'))
app.get('/', function (req, res) {
   res.sendFile('index.html', { root: __dirname })
})

app.get('/json', function (req, res) {
   res.status(200).json({"message":"ok"})
})

// établissement de la connexion
io.on('connection', (socket) =>{
   console.log(`Connecté au client ${socket.id}`)
})

// on change app par server
server.listen(3000, function () {
 console.log('Votre app est disponible sur localhost:3000 !')
})


Chaque client se connectant à l’adresse localhost:3000/ déclenchera une connexion via WebSocket avec votre app Node.JS qui s'affichera dans les logs de la console serveur : “Connecté au client” avec son identifiant de socket.

Mais avant cela, il faut créer notre fichier index.html qui va contenir notre code de création de socket.

Créez le fichier avec :

mkdir public && touch index.html

Insérez le code HTML suivant :

<!DOCTYPE html>
<html>
<head>
  <meta charset="utf-8">
  <meta name="viewport" content="width=device-width">
  <title>Tuto WebSocket avec Socket.io et NodeJS par PracticalProgramming.fr</title>
</head>

<body>
  <H1>Hello</H1>
  <ul id="list">
    <li>Premier élément</li>
  </ul>

  <!-- CREATION SOCKET -->
  <script src="/socket.io/socket.io.js"></script>
  <script>
    const socket = io();
  </script>

  <!-- FIN CODE SOCKET -->
</body>
</html>

Notre navigateur a désormais la capacité d’utiliser socket.io pour communiquer avec notre serveur.

Lancez maintenant votre serveur avec la commande node index.js et rendez-vous sur l’adresse localhost:3000. Vous devriez avoir confirmation du bon établissement de la connexion entre le navigateur et le serveur dans votre console serveur :

La console serveur indique : “connecté au client” suivi de l’id du client : la connexion est bien établie.

La console serveur indique : “connecté au client” suivi de l’id du client : la connexion est bien établie.

Émettre un événement WebSocket depuis un serveur NodeJS avec Socket.io

Maintenant que nous avons établi la connexion, nous allons pouvoir émettre des évènements WebSocket depuis votre serveur NodeJS.

Faisons évoluer notre fonction io.on(‘connection’) :

// établissement de la connexion

io.on('connection', (socket) =>{
   console.log(`Connecté au client ${socket.id}`)
   // émission d'un évènement
   io.emit('news','Voici un nouvel élément envoyé par le serveur')
})

Désormais, le serveur va émettre une chaîne de caractères (“Voici un nouvel élément envoyé par le serveur”) sur le socket nommé “news”.

Il faut désormais donner au navigateur la capacité d’interpréter ce socket en ajoutant une fonction à notre fichier index.js :

  <!-- CREATION SOCKET -->
  <script src="/socket.io/socket.io.js"></script>
  <script>
    const socket = io();

    // écoute du socket news
    socket.on('news', function(msg){
       console.log(msg)
    });
  </script>

  <!-- FIN CODE SOCKET -->

La fonction socket.on() va écouter le socket ayant pour nom “news” et va exécuter la fonction callback, ici simplement logger le message reçu.

On constate bien dans la console du navigateur que le message est bien envoyé par le serveur et affiché.

On constate bien dans la console du navigateur que le message est bien envoyé par le serveur et affiché.

Améliorons enfin notre script en affichant un message toutes les secondes et en les ajoutant à la liste :

// Création de la connexion

io.on('connection', (socket) =>{
   console.log(`Connecté au client ${socket.id}`)
   // émission d'un évènement
   io.emit('news','Voici un nouvel élément envoyé par le serveur')
})

  <!-- CREATION SOCKET -->
  <script src="/socket.io/socket.io.js"></script>
  <script>
    const socket = io();

    // écoute du socket news
    socket.on('news', function(msg){
       console.log(msg)
    });
  </script>

  <!-- FIN CODE SOCKET -->

Vérifions les modifications sur le navigateur :

hello world socket.io création evenement

Les événements s'affichent au fur et à mesure sur ma page HTML

Et voilà ! Vous connaissez maintenant les rudiments de la création d’une connexion WebSocket et d’évènements serveur en NodeJS avec Socket.io !

Émettre un évènement client via WebSocket

L’intérêt de WebSocket est que la communication instantanée est à double-sens. Le client, au même titre que le serveur, peut émettre des évènements.

Imaginez une page de jeu d’échecs en ligne. Celle-ci dispose d’une liste de tables où il existe entre une et deux places libres pour accueillir des joueurs. Pour une expérience agréable, l’utilisateur doit pouvoir voir en temps réel la liste des tables ainsi que le nombre de places qui y sont disponibles.

Si un joueur rejoint une table, le serveur doit informer les autres clients immédiatement qu’une place est prise sur cette table.

exemple d'utilisation de socket.io dans un jeu d'echec en ligne

Exemple d'utilisation de socket.io dans un jeu d'echec en ligne

Les alternatives à Socket.io pour NodeJS

evolution de socket.io et ses concurrents entre 2019 et 2020

evolution de socket.io et ses concurrents entre 2019 et 2020

Si Socket.io est une bibliothèque simple et performante, elle est loin d’être le seul ou même le plus téléchargé des modules dédiés au WebSocket sur npm. De nombreuses alternatives existent, des plus basiques au plus complètes.

BibliothèqueÉtoiles GitHubDescription
Socket.io49kComplet et simple d’utilisation, adapté dans la plupart des cas et soutenu par une communauté très active.
ws14kLa plus populaire et la plus rapide des bibliothèques. Propose moins de fonctionnalités que socket.io, nécessite python.
sockjs2kPermet de créer une connexion client – serveur à double-sens avec ou sans standard WebSocket. Fournis un support pour les entreprises

Derniers articles

Le dernier né des bases de données AWS, MemoryDB for Redis allie la souplesse et rapidité de Redis avec une sauvegarde résiliente, chose qui aujourd'hui n'existait que pour la solution Redis Entreprise. Avec MemoryDB for Redis, AWS entend bien prendre une part du gâteau de Redis Labs.

MongoDB a mis en service la version 5.0 de sa base de données NoSQL. Dans cet article, découvrez les nouveautés qu'apporte cette release ainsi que leurs explications.

Dans l'univers du Big Data et du Cloud, Snowflake a vu le jour en étant le premier fournisseur d'un Data Warehouse sur le cloud 100% scalable. Dans cet article, découvrez ce qu'est un Data Warehouse et en quoi Snowflake est une solution innovante pour les entreprises.

Souvent portée par une équipe d'analystes, la QA vient supporter l'équipe tech pour assurer que les évolutions en cours de développement et récemment déployés ne viennent pas perturber l'application. Dans cet article, découvrez comment les méthodes Shift-Left et Shift-Right viennent se complémenter pour assurer un bon niveau de qualité du logiciel déployé.

Docker Desktop est le client permettant de faire tourner des containers depuis son poste. Découvre ce tutoriel pour installer Docker sur ton Mac et faire tourner tes premiers containers.

Docker Desktop est le client permettant de faire tourner des containers depuis son poste. Découvre ce tutoriel pour installer Docker sur ton PC Windows et faire tourner tes premiers containers.

Les Jobs