JavaScript Academy · Leçon

Envoyer et recevoir des messages

Échangez des données avec send et onmessage.

Envoyer et recevoir des messages est une leçon JavaScript Academy gratuite sur CoddyKit. Ceci est la leçon 2 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.

Envoyer du texte

Une fois la connexion ouverte, socket.send(string) transmet un message texte au serveur.

socket.onopen = () => {
  socket.send("ping");
};

Recevoir avec l’événement de message

onmessage se déclenche pour chaque trame entrante. Les données se trouvent dans event.data.

socket.onmessage = (event) => {
  console.log("Received:", event.data);
};

Structuration en JSON

Les WebSockets transportent des chaînes brutes. Pour envoyer des données structurées, sérialisez-les avec JSON.stringify, puis analysez-les à la réception.

socket.send(JSON.stringify({ type: "chat", text: "hi" }));
socket.onmessage = (e) => {
  const msg = JSON.parse(e.data);
  console.log(msg.type, msg.text);
};

Routage selon le type de message

Un modèle courant consiste à inclure un champ type et à distribuer le message en fonction de celui-ci.

socket.onmessage = (e) => {
  const msg = JSON.parse(e.data);
  switch (msg.type) {
    case "chat": showChat(msg); break;
    case "presence": updatePresence(msg); break;
  }
};

Envoyer des données binaires

send accepte également ArrayBuffer, les tableaux typés et Blob pour les charges utiles binaires.

const bytes = new Uint8Array([1, 2, 3, 4]);
socket.send(bytes.buffer);

Recevoir des données binaires

Avec binaryType = "arraybuffer", event.data est un ArrayBuffer que vous pouvez encapsuler dans un tableau typé.

socket.binaryType = "arraybuffer";
socket.onmessage = (e) => {
  if (e.data instanceof ArrayBuffer) {
    const view = new Uint8Array(e.data);
    console.log(view.length);
  }
};

Gestion de la contre-pression avec bufferedAmount

bufferedAmount indique le nombre de bytes mis en file mais pas encore envoyés. Vérifiez cette valeur avant de saturer la socket afin d’éviter une croissance illimitée de la mémoire.

if (socket.bufferedAmount < 1_000_000) {
  socket.send(payload);
}

Signaux de maintien

Envoyez régulièrement des messages de contrôle afin que les deux parties sachent que la connexion est active et que les intermédiaires ne ferment pas les connexions inactives.

setInterval(() => {
  if (socket.readyState === WebSocket.OPEN) {
    socket.send(JSON.stringify({ type: "ping" }));
  }
}, 30000);

Requête/réponse via WebSocket

Ajoutez un identifiant aux messages sortants et résolvez une promesse pending lorsque la réponse correspondante arrive.

const pending = new Map();
function request(payload) {
  const id = crypto.randomUUID();
  socket.send(JSON.stringify({ id, ...payload }));
  return new Promise((res) => pending.set(id, res));
}
socket.onmessage = (e) => {
  const msg = JSON.parse(e.data);
  if (pending.has(msg.id)) { pending.get(msg.id)(msg); pending.delete(msg.id); }
};

Mise en file avant l’ouverture

Si vous risquez d’envoyer un message avant l’ouverture de la socket, mettez les messages en mémoire tampon et videz cette file dans onopen.

const queue = [];
function safeSend(data) {
  if (socket.readyState === WebSocket.OPEN) socket.send(data);
  else queue.push(data);
}
socket.onopen = () => { queue.forEach((d) => socket.send(d)); queue.length = 0; };

Valider les données entrantes

Ne faites jamais confiance aux données reçues. Entourez JSON.parse d’une gestion des exceptions et validez leur structure avant de les utiliser.

socket.onmessage = (e) => {
  let msg;
  try { msg = JSON.parse(e.data); }
  catch { return; }
  if (typeof msg.type !== "string") return;
  handle(msg);
};

Vérification rapide

Vérifiez vos connaissances sur l’échange de messages.

Récapitulatif : envoyer et recevoir

Vous avez envoyé des données textuelles et binaires, géré onmessage, structuré les données en JSON, effectué le routage par type, surveillé bufferedAmount pour gérer la contre-pression, ajouté des signaux de maintien et mis les messages en file avant l’ouverture de la socket. Ensuite : le cycle de vie de la connexion.

Questions Fréquemment Posées

La leçon « Envoyer et recevoir des messages » est-elle gratuite ?

Oui — le texte complet de « Envoyer et recevoir des messages » 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 « Envoyer et recevoir des messages » ?

Échangez des données avec send et onmessage. 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 2 sur 4.

Combien de temps prend la leçon « Envoyer et recevoir des messages » ?

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