JavaScript Academy · Leçon

Ouvrir une connexion WebSocket

Connectez-vous à un serveur WebSocket.

Ouvrir une connexion WebSocket est une leçon JavaScript 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 JavaScript Academy, et ta progression se synchronise sur le web et l'application CoddyKit. Le cours JavaScript Academy comprend 4 leçons au total.

Que sont les WebSockets ?

WebSockets fournissent une connexion persistante et bidirectionnelle entre le navigateur et le serveur, au moyen d’une seule connexion TCP. Contrairement au modèle requête/réponse HTTP, chaque partie peut envoyer des messages à tout moment : c’est idéal pour les discussions, les flux en direct et les jeux.

Les schémas ws et wss

Les URL WebSocket utilisent ws:// (non chiffré) ou wss:// (chiffré avec TLS). Préférez toujours wss:// en production, comme pour https.

const url = "wss://example.com/socket";

Créer une connexion

Créez une socket avec new WebSocket(url). La négociation commence immédiatement ; la connexion n’est prête qu’une fois ouverte.

const socket = new WebSocket("wss://example.com/socket");
console.log(socket.url);

L’événement d’ouverture

onopen se déclenche une fois la négociation terminée. Ce n’est qu’à ce moment que vous pouvez envoyer des données sans risque.

socket.onopen = (event) => {
  console.log("Connection established");
  socket.send("Hello server");
};

Alternative à addEventListener

Vous pouvez utiliser addEventListener plutôt que les propriétés on* pour associer plusieurs gestionnaires.

socket.addEventListener("open", () => {
  console.log("open via listener");
});

État readyState de la connexion

readyState indique le cycle de vie : CONNECTING (0), OPEN (1), CLOSING (2), CLOSED (3).

if (socket.readyState === WebSocket.OPEN) {
  socket.send("ready!");
}

Sous-protocoles

Un deuxième argument permet de négocier un sous-protocole. Le serveur en choisit un, que vous pouvez lire dans socket.protocol une fois la connexion ouverte.

const s = new WebSocket("wss://example.com", ["chat", "v2.chat"]);
s.onopen = () => console.log("Using", s.protocol);

Même origine et contenu mixte

Une page chargée via https ne peut ouvrir que des connexions wss:// : l’ouverture de ws:// est bloquée comme contenu mixte. Préparez vos URL en conséquence.

Type binaire

Définissez binaryType sur "blob" (valeur par défaut) ou "arraybuffer" pour contrôler la manière dont les trames binaires sont reçues.

socket.binaryType = "arraybuffer";

Un client minimal

Mettons tout cela en pratique : ouvrez la connexion, consignez son état et effectuez le nettoyage.

const socket = new WebSocket("wss://example.com/socket");
socket.onopen = () => console.log("opened");
socket.onclose = () => console.log("closed");

Délais d’attente de connexion

Les WebSockets n’ont pas de délai d’attente intégré pour la connexion. Utilisez un minuteur qui ferme la socket si onopen ne s’est pas déclenché à temps.

const socket = new WebSocket(url);
const timer = setTimeout(() => {
  if (socket.readyState !== WebSocket.OPEN) socket.close();
}, 5000);
socket.onopen = () => clearTimeout(timer);

Vérification rapide

Vérifiez les notions fondamentales des connexions.

Récapitulatif : ouvrir une connexion

Vous avez appris les schémas ws/wss, créé une socket avec new WebSocket, géré onopen, vérifié readyState, négocié des sous-protocoles et ajouté un délai d’attente de connexion. Ensuite : envoyer et recevoir des messages.

Questions Fréquemment Posées

La leçon « Ouvrir une connexion WebSocket » est-elle gratuite ?

Oui — le texte complet de « Ouvrir une connexion WebSocket » 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 JavaScript Academy, passe à CoddyKit PRO. Le cours JavaScript Academy comprend 4 leçons au total.

Qu'est-ce que j'apprendrai dans « Ouvrir une connexion WebSocket » ?

Connectez-vous à un serveur WebSocket. Tu pratiques JavaScript 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 JavaScript Academy ?

Aucune expérience préalable n'est requise. JavaScript 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 « Ouvrir une connexion WebSocket » ?

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 JavaScript Academy ?

Oui. Chaque leçon JavaScript 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

← Retour à JavaScript Academy