6.1 Concepts de base de WebSocket
WebSocket — c'est un protocole de communication qui offre un canal de communication duplex complet via une seule connexion TCP. Il permet d'effectuer un transfert de données bidirectionnel entre le client et le serveur, ce qui le rend idéal pour les applications nécessitant un échange de données en temps réel permanent, telles que les chats, les jeux en ligne et les systèmes de notification.
Avantages de WebSocket
- Communication bidirectionnelle : WebSocket assure un transfert de données bidirectionnel, permettant au serveur et au client d'envoyer des messages à tout moment.
- Moins de latence : par rapport aux requêtes HTTP traditionnelles, WebSocket réduit la latence grâce à une connexion continue.
- Moins de charge sur le serveur : WebSocket réduit le nombre de requêtes HTTP, diminuant ainsi la charge sur le serveur.
Composants principaux de WebSocket
- Serveur WebSocket : la partie serveur qui accepte et gère les connexions WebSocket.
- Client WebSocket : la partie cliente qui établit la connexion au serveur WebSocket et échange des données.
6.2 Travailler avec WebSocket en JavaScript
Travailler avec WebSocket en JavaScript se fait via l'objet WebSocket, qui fournit des méthodes pour établir la connexion, envoyer et recevoir des messages, ainsi que pour gérer les événements.
Création d'une connexion WebSocket :
JavaScript
const socket = new WebSocket('ws://server.example.com/chat');
Événements WebSocket :
open: déclenché lorsque la connexion est établie.message: déclenché lorsqu'un message est reçu du serveur.error: déclenché en cas d'erreur.close: déclenché lors de la fermeture de la connexion.
Exemple d'utilisation de WebSocket :
JavaScript
const socket = new WebSocket('ws://server.example.com/chat');
socket.addEventListener('open', (event) => {
console.log('Connected to the WebSocket server');
socket.send('Hello Server!');
});
socket.addEventListener('message', (event) => {
console.log('Message from server:', event.data);
});
socket.addEventListener('error', (event) => {
console.error('WebSocket error:', event);
});
socket.addEventListener('close', (event) => {
console.log('Disconnected from WebSocket server');
});
6.3 Exemple de serveur WebSocket avec Node.js
Pour créer un serveur WebSocket, on peut utiliser la bibliothèque ws dans Node.js.
Installation de la bibliothèque :
Terminal
npm install ws
Exemple de serveur WebSocket :
JavaScript
const WebSocket = require('ws');
const wss = new WebSocket.Server({ port: 8080 });
wss.on('connection', (ws) => {
console.log('New client connected');
ws.on('message', (message) => {
console.log('Received:', message);
ws.send(`Server says: ${message}`);
});
ws.on('close', () => {
console.log('Client disconnected');
});
});
console.log('WebSocket server is running on ws://localhost:8080');
6.4 Événements et méthodes WebSocket clés
Événements côté client :
onopen: déclenché lorsque la connexion WebSocket est établieonmessage: déclenché lorsqu'un message est reçu du serveuronclose: déclenché lorsque la connexion WebSocket est ferméeonerror: déclenché en cas d'erreur WebSocket
Méthodes côté client
send(data): envoie des données au serveurclose(code, reason): ferme la connexion WebSocket avec le code et la raison spécifiés
Événements côté serveur
connection: déclenché lorsque le client se connecte au serveurmessage: déclenché lorsque le serveur reçoit un message du clientclose: déclenché lorsque la connexion WebSocket est ferméeerror: déclenché en cas d'erreur WebSocket
Méthodes côté serveur
send(data): envoie des données au clientclose(code, reason): ferme la connexion WebSocket avec le code et la raison spécifiés
6.5 Exemples d'utilisation de WebSocket
Exemple : Chat en temps réel
Côté client :
HTML
<!DOCTYPE html>
<html>
<head>
<title>WebSocket Chat</title>
</head>
<body>
<input type="text" id="message" placeholder="Enter your message" />
<button onclick="sendMessage()">Send</button>
<div id="chat"></div>
<script>
const socket = new WebSocket('ws://localhost:8080');
const chat = document.getElementById('chat');
socket.onopen = function() {
console.log('WebSocket is open now.');
};
socket.onmessage = function(event) {
const message = document.createElement('p');
message.textContent = event.data;
chat.appendChild(message);
};
socket.onclose = function() {
console.log('WebSocket is closed now.');
};
socket.onerror = function(event) {
console.error('WebSocket error observed:', event);
};
function sendMessage() {
const messageInput = document.getElementById('message');
const message = messageInput.value;
socket.send(message);
messageInput.value = '';
}
</script>
</body>
</html>
Côté serveur :
JavaScript
const WebSocket = require('ws');
const server = new WebSocket.Server({ port: 8080 });
server.on('connection', (ws) => {
console.log('New client connected!');
ws.on('message', (message) => {
console.log('Received:', message);
// Broadcast du message à tous les clients connectés
server.clients.forEach(client => {
if (client.readyState === WebSocket.OPEN) {
client.send(message);
}
});
});
ws.on('close', () => {
console.log('Client disconnected');
});
ws.on('error', (error) => {
console.error('WebSocket error:', error);
});
});
console.log('WebSocket server is running on ws://localhost:8080');
GO TO FULL VERSION