Socket IO #

Introduction #

Socket IO est une librairie Node.js, disponible au téléchargement depuis le registre NPM, qui est open-source et gratuite à l'utilisation.

Initialisation #

Installation #

Pour pouvoir installer la librairie, nous allons avoir besoin de deux librairies.

En effet, Socket IO vient avec un serveur et un client.

La commande pour installer Socket IO côté serveur est la suivante.

npm install socket.io

Si vous souhaitez installer la version à utiliser côté navigateur (dans un projet Vite.js par exemple), vous pouvez utiliser la commande suivante.

npm install socket.io-client

Nous verrons dans ce chapitre un exemple d'utilisation du côté serveur, puis du côté client de la librairie Socket IO.

Côté serveur #

Du point de vue du serveur, nous allons créer un serveur WebSocket qui se chargera d'intercepter les requêtes WebSocket et de les traiter. Pour cela, nous allons créer un nouveau fichier.

touch index.js

Dans ce fichier, nous allons importer et démarrer notre premier serveur WebSocket.

import { Server } from "socket.io";

const io = new Server(9000);

Ici, nous avons importé une classe Server qui nous permet d'instancier un objet io qui va nous servir à manipuler notre serveur. En argument de cette classe, nous pouvons passer le numéro du port d'écoute, il est donc en théorie possible d'avoir plusieurs serveur WebSocket sur un même serveur écoutant sur des ports différents.

Chaque fois qu'une requête WebSocket arrive sur notre serveur, un événement connection est déclenché, nous pouvons l'écouter avec la méthode on sur l'objet io.

import { Server } from "socket.io";

const io = new Server(9000);

io.on("connection", () => { 
  console.log("Nouvelle connexion !"); 
}); 

Nous pouvons évidemment manipuler le socket lié à cette connexion, pour par exemple envoyer des données. Il suffit de renseigner un argument socket dans notre fonction de rappel pour pouvoir ensuite utiliser la méthode socket.emit afin d'envoyer un couple de données qui contient le nom de l'événement ainsi que les données associées.

import { Server } from "socket.io";

const io = new Server(9000);

io.on("connection", (socket) => { 
  socket.emit("message", "Hello, world!"); 
});

Et si le client nous envoie à son tour des données, nous pouvons bien entendu les récupérer en écoutant un événement au travers de la méthode socket.on.

import { Server } from "socket.io";

const io = new Server(9000);

io.on("connection", (socket) => {
  socket.emit("message", "Hello, world!");

  socket.on("message", () => {
    console.log("Message ręcu depuis le client !");
  });
});

Et bien entendu, nous pouvons récupérer le contenu du message qui a été envoyé par le client.

import { Server } from "socket.io";

const io = new Server(9000);

io.on("connection", (socket) => {
  socket.emit("message", "Hello, world!");

  socket.on("message", (data) => {
    console.log(`Message ręcu depuis le client : ${data}`);
  });
});

Côté client #

Côté client, le code est très similaire à ce que nous avons vu côté serveur, la grande différence réside dans la manière d'initialiser le tunnel de connexion WebSocket.

import { io } from "socket.io-client";

const socket = io("ws://share.finances.com/apple");

socket.on("message", (data) => {
  console.log(data);
});

socket.emit("message", "Hello, world!");

Ici, nous avons importé la fonction io depuis la librairie socket.io-client afin de pouvoir créer un tunnel WebSocket, en renseignant l'adresse du serveur cible.