Fondamentaux de WebSocket dans le navigateur
Ouvrez des connexions WebSocket, envoyez des messages et gérez les événements avec l’API WebSocket native.
Fondamentaux de WebSocket dans le navigateur est une leçon React 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 React Academy, et ta progression se synchronise sur le web et l'application CoddyKit. Le cours React Academy comprend 4 leçons au total.
Qu’est-ce que WebSocket ?
WebSocket est un protocole qui fournit une communication bidirectionnelle sur une seule connexion TCP. Contrairement à HTTP, la connexion reste ouverte, ce qui permet au serveur d’envoyer des données au client à tout moment.
Ouvrir une connexion
Créez un objet WebSocket avec une URL ws:// ou wss://. La connexion s’ouvre de manière asynchrone.
const ws = new WebSocket('wss://api.example.com/ws');
ws.onopen = () => {
console.log('Connection established');
};Envoyer des messages
Utilisez ws.send() pour envoyer des données. Vous pouvez envoyer des chaînes ou des données binaires (ArrayBuffer, Blob). Encodez les objets en JSON avant de les envoyer.
ws.onopen = () => {
ws.send(JSON.stringify({ type: 'join', room: 'general' }));
ws.send('Hello, server!');
};Recevoir des messages
L’événement onmessage se déclenche chaque fois que le serveur envoie des données. Les données se trouvent dans event.data, sous forme de chaîne ou de type binaire.
ws.onmessage = (event) => {
const data = JSON.parse(event.data);
console.log('Received:', data);
};Gérer les erreurs et la fermeture
Gérez les événements onerror et onclose. L’événement de fermeture inclut un code et une raison qui expliquent pourquoi la connexion s’est terminée.
ws.onerror = (error) => {
console.error('WebSocket error:', error);
};
ws.onclose = (event) => {
console.log(`Closed: ${event.code} ${event.reason}`);
if (event.wasClean) {
console.log('Clean disconnect');
} else {
console.log('Connection lost — will retry');
}
};Codes de fermeture
Codes de fermeture WebSocket standard : 1000 = normal, 1001 = départ, 1006 = anormal (aucune trame de fermeture), 1008 = violation de la politique.
readyState
ws.readyState vous indique l’état actuel de la connexion : CONNECTING (0), OPEN (1), CLOSING (2) ou CLOSED (3). Vérifiez toujours cet état avant d’envoyer des données.
function sendSafely(ws, data) {
if (ws.readyState === WebSocket.OPEN) {
ws.send(JSON.stringify(data));
} else {
console.warn('WebSocket not open, dropping message');
}
}Fermer la connexion
Appelez ws.close(code, reason) pour lancer une fermeture propre. Le serveur reçoit la trame de fermeture et peut répondre avec la sienne.
// Normal close
ws.close(1000, 'User logged out');
// Close from a cleanup effect
return () => ws.close();Données binaires
Définissez ws.binaryType = 'arraybuffer' (ou 'blob') pour recevoir des messages binaires. C’est utile pour l’audio, les images ou les protocoles personnalisés.
ws.binaryType = 'arraybuffer';
ws.onmessage = (event) => {
if (event.data instanceof ArrayBuffer) {
const view = new Uint8Array(event.data);
console.log('Binary message, bytes:', view.length);
} else {
console.log('Text message:', event.data);
}
};Battement de cœur / ping-pong
L’API WebSocket du navigateur n’expose pas les trames ping, mais vous pouvez implémenter un battement de cœur au niveau de l’application : envoyez un message ping toutes les N secondes et attendez une réponse pong.
function startHeartbeat(ws) {
return setInterval(() => {
if (ws.readyState === WebSocket.OPEN) {
ws.send(JSON.stringify({ type: 'ping' }));
}
}, 30_000);
}WebSocket et Server-Sent Events
Utilisez WebSocket pour les communications bidirectionnelles (conversations, jeux). Utilisez Server-Sent Events (SSE) pour les flux allant uniquement du serveur vers le client (notifications, flux en direct) : SSE fonctionne sur HTTP standard et se reconnecte automatiquement.
Vérification rapide
Quelle valeur de readyState indique que la connexion est ouverte et prête à envoyer des données ?
Récapitulatif
Créez des connexions avec new WebSocket(url), envoyez des objets encodés en JSON via ws.send() et gérez les événements onmessage, onerror et onclose. Vérifiez readyState avant d’envoyer des données et fermez proprement avec ws.close(1000).
Apprends React avec un tuteur IA — gratuit
Écris et exécute du vrai code dans ton navigateur, obtiens de l'aide instantanée d'un tuteur IA disponible 24h/24, et reprends là où tu t'es arrêté sur le web ou dans l'app.
- Cours
- 88
- Leçons
- 324
Questions Fréquemment Posées
La leçon « Fondamentaux de WebSocket dans le navigateur » est-elle gratuite ?
Oui — le texte complet de « Fondamentaux de WebSocket dans le navigateur » 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 React Academy, passe à CoddyKit PRO. Le cours React Academy comprend 4 leçons au total.
Qu'est-ce que j'apprendrai dans « Fondamentaux de WebSocket dans le navigateur » ?
Ouvrez des connexions WebSocket, envoyez des messages et gérez les événements avec l’API WebSocket native. Tu pratiques React 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 React Academy ?
Aucune expérience préalable n'est requise. React 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 « Fondamentaux de WebSocket dans le navigateur » ?
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 React Academy ?
Oui. Chaque leçon React 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
- Fondamentaux de WebSocket dans le navigateur
- Utiliser Socket.IO avec React
- Créer un composant de discussion en temps réel
- Reconnexion, gestion des erreurs et nettoyage