0Pricing
Vue Academy · Leçon

Bases de WebSocket dans le navigateur

new WebSocket(url), onopen/onmessage/onerror/onclose, send() et readyState

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

Le temps réel dans le navigateur

HTTP fonctionne selon un modèle requête-réponse : le client envoie une demande, le serveur répond, puis la connexion se ferme. Pour une discussion, des tableaux de bord en direct ou des jeux multijoueurs, vous avez besoin que le serveur push des données sans qu’on le lui demande.

Le protocole WebSocket vous fournit une connexion unique, bidirectionnelle et de longue durée entre le navigateur et le serveur.

Ouvrir une connexion

Le navigateur fournit un constructeur global WebSocket. Transmettez-lui une URL utilisant le schéma ws:// (non chiffré) ou wss:// (TLS).

La création de l’objet démarre immédiatement l’établissement de la connexion.

const ws = new WebSocket("wss://echo.example.com/socket")

// Construction kicks off the connection.
// Nothing is sent yet — we wait for it to open.

Le gestionnaire onopen

La connexion n’est pas prête dès sa création. L’événement onopen se déclenche une fois l’établissement de la connexion terminé et le socket prêt à transporter des données.

Envoyez votre premier message depuis onopen, jamais avant.

const ws = new WebSocket("wss://echo.example.com/socket")

ws.onopen = () => {
  console.log("Connected!")
  ws.send("hello server")
}

Recevoir des messages

Les données entrantes arrivent via onmessage. La charge utile se trouve dans event.data et est une chaîne de caractères par défaut.

La plupart des applications envoient du JSON ; vous devez donc le parser pour le reconvertir en objet.

ws.onmessage = (event) => {
  const msg = JSON.parse(event.data)
  console.log("Got:", msg.type, msg.payload)
}

Envoyer des messages

Utilisez ws.send() pour transmettre des données. Les WebSockets transportent des chaînes brutes ou des données binaires ; encodez donc d’abord les objets avec JSON.stringify.

Les deux côtés s’accordent sur une structure, ici un type accompagné d’une payload.

function sendChat(text) {
  const msg = { type: "chat", payload: { text } }
  ws.send(JSON.stringify(msg))
}

sendChat("Good morning")

Un aller-retour complet

En réunissant l’ouverture, l’envoi et la réception, vous obtenez un client d’écho complet. Ouvrez le socket, envoyez les données à l’ouverture, puis consignez tout ce qui revient.

const ws = new WebSocket("wss://echo.example.com/socket")

ws.onopen = () => {
  ws.send(JSON.stringify({ type: "ping" }))
}

ws.onmessage = (event) => {
  const data = JSON.parse(event.data)
  console.log("Server replied:", data)
}

Fermer la connexion

L’événement onclose se déclenche lorsque la connexion prend fin, que vous ayez appelé ws.close() ou que le réseau ait été interrompu. L’événement contient un code numérique et une chaîne reason.

Le code 1000 indique une fermeture normale.

ws.onclose = (event) => {
  console.log("Closed:", event.code, event.reason)
  if (event.code !== 1000) {
    console.log("Unexpected close — may want to reconnect")
  }
}

// Trigger a clean close yourself:
// ws.close(1000, "done")

Gérer les erreurs

L’événement onerror se déclenche en cas de défaillance du transport. L’événement d’erreur lui-même fournit volontairement peu de détails pour des raisons de sécurité ; considérez-le comme un signal indiquant qu’un problème est survenu et qu’une fermeture est probablement imminente.

ws.onerror = (event) => {
  console.error("WebSocket error occurred")
  // onclose usually fires right after onerror.
}

La propriété readyState

ws.readyState est un nombre qui indique où se trouve le socket dans son cycle de vie. Vérifiez-le toujours avant d’envoyer des données afin de ne pas déclencher d’erreur sur un socket qui n’est pas encore ouvert.

  • 0 CONNECTING
  • 1 OPEN
  • 2 CLOSING
  • 3 CLOSED
function safeSend(data) {
  if (ws.readyState === WebSocket.OPEN) {
    ws.send(JSON.stringify(data))
  } else {
    console.warn("Not open, readyState =", ws.readyState)
  }
}

Constantes nommées de readyState

Plutôt que d’utiliser des nombres magiques, utilisez les constantes de la classe WebSocket. Elles sont bien plus explicites que 0, 1 ou 3.

console.log(WebSocket.CONNECTING) // 0
console.log(WebSocket.OPEN)       // 1
console.log(WebSocket.CLOSING)    // 2
console.log(WebSocket.CLOSED)     // 3

if (ws.readyState === WebSocket.OPEN) {
  ws.send("ready to talk")
}

Tout réunir dans Vue

Dans un composant Vue, vous créez généralement le socket dans onMounted et le détruisez dans onUnmounted. Les gestionnaires mettent à jour des références réactives que votre modèle affiche.

import { ref, onMounted, onUnmounted } from "vue"

const messages = ref([])
let ws

onMounted(() => {
  ws = new WebSocket("wss://echo.example.com/socket")
  ws.onmessage = (e) => messages.value.push(JSON.parse(e.data))
})

onUnmounted(() => ws && ws.close())

Vérification rapide

Vérifiez votre compréhension des valeurs de readyState de WebSocket.

Récapitulatif

Dans cette leçon, vous avez appris :

  • new WebSocket(url) démarre une connexion bidirectionnelle avec ws:// ou wss://.
  • onopen se déclenche lorsque le socket est prêt ; envoyez des données uniquement après cet événement.
  • onmessage fournit les données dans event.data ; parsez le JSON pour obtenir un objet.
  • ws.send(JSON.stringify(msg)) transmet les données.
  • onclose et onerror gèrent la fermeture et les défaillances.
  • readyState vaut 0 pour CONNECTING, 1 pour OPEN, 2 pour CLOSING et 3 pour CLOSED.

Questions Fréquemment Posées

La leçon « Bases de WebSocket dans le navigateur » est-elle gratuite ?

Oui — le texte complet de « Bases 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 Vue Academy, passe à CoddyKit PRO. Le cours Vue Academy comprend 4 leçons au total.

Qu'est-ce que j'apprendrai dans « Bases de WebSocket dans le navigateur » ?

new WebSocket(url), onopen/onmessage/onerror/onclose, send() et readyState Tu pratiques Vue 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 Vue Academy ?

Aucune expérience préalable n'est requise. Vue 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 « Bases 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 Vue Academy ?

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

  1. Bases de WebSocket dans le navigateur
  2. Client Socket.io avec Vue
  3. Créer un composant de discussion en temps réel
  4. Composable useWebSocket avec reconnexion
← Retour à Vue Academy