NodeJS

Appearance

Installer et utiliser Socket.IO ​

Introduction ​

Socket.IO est une bibliothèque JavaScript qui permet de créer des applications web en temps réel. Elle est basée sur le protocole WebSocket et permet de créer des applications bidirectionnelles entre le client et le serveur.

Installation ​

Pour installer Socket.IO, il suffit d'exécuter la commande suivante dans le dossier de votre projet :

bash
npm install socket.io
npm install socket.io

Exemple de Code ​

Imaginons que vous vouliez afficher l'heure actuelle sur votre page web, mise à jour en temps réel. Voici comment vous pourriez procéder avec Socket.IO :

Côté Serveur (Node.js) ​

javascript
import { Server } from 'socket.io';
import http from 'http';

const server = http.createServer();
const io = new Server(server);

io.on('connection', (socket) => {
    setInterval(() => {
        const currentTime = new Date().toLocaleTimeString();
        socket.emit('timeUpdate', currentTime);
    }, 1000);
});

server.listen(3000, () => {
    console.log('Server listening on port 3000');
});
import { Server } from 'socket.io';
import http from 'http';

const server = http.createServer();
const io = new Server(server);

io.on('connection', (socket) => {
    setInterval(() => {
        const currentTime = new Date().toLocaleTimeString();
        socket.emit('timeUpdate', currentTime);
    }, 1000);
});

server.listen(3000, () => {
    console.log('Server listening on port 3000');
});

Côté Client (HTML/JavaScript) ​

html
<!DOCTYPE html>
<html>
<head>
    <title>Real-Time Clock with Socket.IO</title>
    <script src="[/socket.io/socket.io.js](https://cdnjs.cloudflare.com/ajax/libs/socket.io/4.7.2/socket.io.js)"></script>
    <script>
        const socket = io();

        socket.on('timeUpdate', (time) => {
            document.getElementById('time').innerText = time;
        });
    </script>
</head>
<body>
    <h1>Current Time: <span id="time"></span></h1>
</body>
</html>
<!DOCTYPE html>
<html>
<head>
    <title>Real-Time Clock with Socket.IO</title>
    <script src="[/socket.io/socket.io.js](https://cdnjs.cloudflare.com/ajax/libs/socket.io/4.7.2/socket.io.js)"></script>
    <script>
        const socket = io();

        socket.on('timeUpdate', (time) => {
            document.getElementById('time').innerText = time;
        });
    </script>
</head>
<body>
    <h1>Current Time: <span id="time"></span></h1>
</body>
</html>

Explication Simple ​

  1. Côté Serveur : On crée un serveur HTTP et on initialise Socket.IO avec ce serveur. À chaque connexion d'un client, on envoie l'heure actuelle toutes les secondes à ce client grâce à setInterval.

  2. Côté Client : On se connecte au serveur Socket.IO et on écoute l'événement timeUpdate. Chaque fois que cet événement est reçu, on met à jour le contenu de l'élément HTML avec l'id time.

Astuces et Bonnes Pratiques ​

Optimiser l'Utilisation des Ressources

N'envoyez des mises à jour que lorsque c'est nécessaire. Par exemple, si vous n'avez pas besoin de précision à la seconde près, réduisez la fréquence d'envoi des données depuis le serveur.

Sécurité

Veillez à sécuriser la communication entre le client et le serveur, notamment en utilisant HTTPS et en gérant correctement les données sensibles.