API WebSocket : ouverture, message, fermeture et erreur
Créez une connexion WebSocket, envoyez et recevez des messages dans le gestionnaire de l’événement message, puis gérez les erreurs de connexion et les fermetures propres.
API WebSocket : ouverture, message, fermeture et erreur est une leçon Frontend Academy gratuite sur CoddyKit. Ceci est la leçon 1 sur 4. Tu peux lire la leçon complète ci-dessous gratuitement — puis la pratiquer en direct dans le navigateur avec un éditeur de code intégré et un tuteur IA 24/7. Elle fait partie du parcours d'apprentissage Frontend Academy, et ta progression se synchronise sur le web et l'application CoddyKit. Le cours Frontend Academy comprend 4 leçons au total.
Pourquoi les WebSockets ?
HTTP fonctionne selon un modèle requête-réponse. Pour les applications en temps réel (conversation, jeux multijoueurs, mises à jour en direct), vous avez besoin d'une communication bidirectionnelle persistante. Les WebSockets vous fournissent une seule connexion TCP qui reste ouverte et permet aux deux parties d'envoyer des messages à tout moment.
Créer un WebSocket
Construisez un WebSocket avec une URL ws:// ou wss://. Le navigateur gère la négociation de mise à niveau.
const ws = new WebSocket('wss://api.example.com/realtime');
// Always use wss:// (secure) in productionLes quatre événements
WebSocket possède quatre types d'événements : open (connectée), message (données reçues), close (connexion terminée) et error (problème).
ws.addEventListener('open', () => {
console.log('Connected');
ws.send(JSON.stringify({ type: 'subscribe', channel: 'updates' }));
});
ws.addEventListener('message', (event) => {
const data = JSON.parse(event.data);
console.log('Received:', data);
});
ws.addEventListener('close', (event) => {
console.log('Closed:', event.code, event.reason);
});
ws.addEventListener('error', (event) => {
console.error('Error:', event);
});Envoyer des messages
Utilisez ws.send(). Cette méthode accepte des chaînes de caractères, des ArrayBuffers, des objets binaires ou des ArrayBufferView. Pour les données structurées, appelez d'abord JSON.stringify.
ws.send('hello');
ws.send(JSON.stringify({ type: 'chat', text: 'Hi' }));
// Binary:
const buffer = new ArrayBuffer(8);
ws.send(buffer);Recevoir des messages
Examinez event.data : son type correspond à ce que le serveur a envoyé. Utilisez JSON.parse pour les données utiles sous forme d'objet.
ws.addEventListener('message', (event) => {
// typeof event.data: string | ArrayBuffer | Blob
if (typeof event.data === 'string') {
const msg = JSON.parse(event.data);
handleMessage(msg);
}
});État de la connexion (readyState)
Vérifiez ws.readyState : CONNECTING=0, OPEN=1, CLOSING=2, CLOSED=3. N'envoyez rien avant que l'état soit OPEN.
if (ws.readyState === WebSocket.OPEN) {
ws.send(message);
} else {
console.warn('Not connected yet');
}Fermer proprement
Appelez ws.close(code, reason). Codes de fermeture courants : 1000 (normale), 1001 (départ), 1008 (violation de la politique), 1011 (erreur du serveur).
ws.close(1000, 'User logged out');Stratégie de reconnexion
Les WebSockets se déconnectent lors des changements de réseau, des redémarrages du serveur, etc. Mettez en place une reconnexion avec une temporisation exponentielle.
let reconnectDelay = 1000;
function connect() {
const ws = new WebSocket('wss://api/realtime');
ws.addEventListener('open', () => { reconnectDelay = 1000; });
ws.addEventListener('close', () => {
setTimeout(connect, reconnectDelay);
reconnectDelay = Math.min(reconnectDelay * 2, 30000);
});
return ws;
}Signaux de maintien en vie
Les WebSockets inactifs sont arrêtés par les serveurs mandataires et les répartiteurs de charge après environ 60 secondes. Envoyez un ping toutes les 25 à 30 secondes pour maintenir la connexion active.
let pingInterval;
ws.addEventListener('open', () => {
pingInterval = setInterval(() => {
if (ws.readyState === WebSocket.OPEN) {
ws.send(JSON.stringify({ type: 'ping' }));
}
}, 25000);
});
ws.addEventListener('close', () => clearInterval(pingInterval));Authentification
Les WebSockets ne prennent pas en charge les en-têtes personnalisés. Options : 1) authentification via un jeton dans la chaîne de requête (?token=jwt) de l'URL WS ; 2) envoi d'un message d'authentification après l'ouverture ; 3) utilisation d'un cookie (fonctionne automatiquement pour une même origine).
// Query string:
const ws = new WebSocket(`wss://api/realtime?token=${jwt}`);
// Auth message:
ws.addEventListener('open', () => {
ws.send(JSON.stringify({ type: 'auth', token: jwt }));
});Hook React pour les WebSockets
Encapsulez le cycle de vie du WS dans une fonction personnalisée afin d'éviter les fuites de connexions.
function useWebSocket(url) {
const [messages, setMessages] = useState([]);
const wsRef = useRef(null);
useEffect(() => {
const ws = new WebSocket(url);
wsRef.current = ws;
ws.addEventListener('message', (e) => {
setMessages(m => [...m, JSON.parse(e.data)]);
});
return () => ws.close();
}, [url]);
return { messages, send: (msg) => wsRef.current?.send(JSON.stringify(msg)) };
}WebSocket ou HTTP/2 ou SSE
WebSocket : duplex intégral, les deux parties peuvent envoyer des données. La fonctionnalité de diffusion par le serveur de HTTP/2 : obsolète. Événements envoyés par le serveur : uniquement du serveur vers le client, plus simples, avec reconnexion automatique. Choisissez WS lorsque le client doit également envoyer des données (conversation) ; choisissez SSE pour les notifications à sens unique.
Vérification rapide
Quel est le code de fermeture WebSocket standard pour une fermeture normale et volontaire (par exemple, lorsque l'utilisateur s'est déconnecté) ?
Récapitulatif : API WebSocket
new WebSocket('wss://...') ouvre la connexion. Quatre événements : ouverture, message, fermeture et erreur. send() accepte une chaîne de caractères, ArrayBuffer ou Blob ; utilisez JSON.stringify pour les objets. Vérifiez readyState avant l'envoi. Utilisez close(1000) pour une fermeture propre. Reconnectez-vous avec une temporisation exponentielle. Envoyez un signal de maintien en vie toutes les 25 secondes. Authentifiez-vous via la chaîne de requête ou un message d'authentification. Encapsulez le tout dans une fonction hook pour React.
Questions Fréquemment Posées
La leçon « API WebSocket : ouverture, message, fermeture et erreur » est-elle gratuite ?
Oui — le texte complet de « API WebSocket : ouverture, message, fermeture et erreur » est gratuit à lire ici sur le web. Pour la pratiquer de manière interactive (un éditeur de code intégré et un tuteur IA 24/7) et déverrouiller le reste du cours Frontend Academy, passe à CoddyKit PRO. Le cours Frontend Academy comprend 4 leçons au total.
Qu'est-ce que j'apprendrai dans « API WebSocket : ouverture, message, fermeture et erreur » ?
Créez une connexion WebSocket, envoyez et recevez des messages dans le gestionnaire de l’événement message, puis gérez les erreurs de connexion et les fermetures propres. Tu pratiques Frontend Academy avec du code pratique que tu exécutes directement dans le navigateur, et un tuteur IA 24/7 répond à tes questions au fur et à mesure que tu avances dans la leçon.
Dois-je avoir de l'expérience pour commencer Frontend Academy ?
Aucune expérience préalable n'est requise. Frontend Academy sur CoddyKit est structuré pour les débutants jusqu'aux apprenants avancés, donc tu peux commencer ici ou depuis le début et avancer à ton rythme. Ceci est la leçon 1 sur 4.
Combien de temps prend la leçon « API WebSocket : ouverture, message, fermeture et erreur » ?
La plupart des leçons CoddyKit prennent environ 5–10 minutes. Chacune est courte et interactive, tu progresses régulièrement et tu repiques exactement où tu t'es arrêté sur le web et l'app.
Peux-tu écrire et exécuter du code dans cette leçon Frontend Academy ?
Oui. Chaque leçon Frontend Academy inclut un éditeur de code intégré, tu écris et exécutes du vrai code directement dans ton navigateur et tu reçois des retours IA instantanés — aucune configuration locale requise.
Toutes les leçons de ce cours
- API WebSocket : ouverture, message, fermeture et erreur
- Intégration du client Socket.io
- Événements envoyés par le serveur pour la diffusion unidirectionnelle
- Schémas d’interfaces en temps réel