0Pricing
Vue Academy · Leçon

Composable useWebSocket avec reconnexion

Encapsulation de WebSocket dans un composable, reconnexion automatique avec temporisation exponentielle et suivi de l’état

Composable useWebSocket avec reconnexion est une leçon Vue Academy gratuite sur CoddyKit. Ceci est la leçon 4 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.

Encapsuler WebSockets dans un composable

La gestion brute de WebSocket dispersée entre les composants devient vite difficile à maintenir. Un composable useWebSocket centralise l'état de la connexion, la reconnexion et la gestion des messages, et vous pouvez le réutiliser partout.

Nous allons le construire étape par étape.

Suivre l'état avec une référence réactive

Exposez l'état de la connexion sous la forme d'une référence status réactive afin que l'interface puisse afficher des indicateurs « Connexion », « Ouverte » ou « Fermée ».

import { ref } from "vue"

export function useWebSocket(url) {
  const status = ref("CLOSED") // CONNECTING | OPEN | CLOSED
  // ...
  return { status }
}

La fonction de connexion

Encapsulez l'ouverture de la connexion dans une fonction interne connect afin de pouvoir la rappeler ultérieurement pour vous reconnecter. Mettez à jour status à chaque événement du cycle de vie.

let ws
function connect() {
  status.value = "CONNECTING"
  ws = new WebSocket(url)
  ws.onopen = () => { status.value = "OPEN" }
  ws.onclose = () => { status.value = "CLOSED"; scheduleReconnect() }
}

Reconnexion avec un délai croissant

Se reconnecter instantanément dans une boucle serrée bombarde le serveur de requêtes. Utilisez une reprise progressive exponentielle : attendez plus longtemps après chaque tentative échouée, jusqu'à une limite.

let attempts = 0
function scheduleReconnect() {
  attempts++
  const delay = Math.min(1000 * 2 ** attempts, 30000)
  setTimeout(connect, delay)
}

Réinitialiser le délai de reprise après une réussite

Une fois la connexion établie, réinitialisez le compteur de tentatives afin que la prochaine déconnexion recommence la reprise progressive au début, plutôt qu'avec un délai déjà très long.

ws.onopen = () => {
  status.value = "OPEN"
  attempts = 0
  flushQueue()
}

Une file de messages hors connexion

Si l'utilisateur envoie un message alors que la connexion est interrompue, vous ne devez pas le perdre. Mettez les messages sortants en attente dans une file, puis videz-la une fois la connexion ouverte.

const queue = []
function send(data) {
  const payload = JSON.stringify(data)
  if (ws && ws.readyState === WebSocket.OPEN) {
    ws.send(payload)
  } else {
    queue.push(payload)
  }
}

Vider la file

Lorsque la connexion s'ouvre, traitez tout ce qui s'est accumulé. Retirez les éléments au début de la file afin de préserver leur ordre.

function flushQueue() {
  while (queue.length && ws.readyState === WebSocket.OPEN) {
    ws.send(queue.shift())
  }
}

Gestionnaires de messages typés

Permettez aux utilisateurs d'enregistrer des gestionnaires pour chaque type de message. Stockez les fonctions de rappel dans un dictionnaire et distribuez chaque message selon son type à la réception de chaque trame.

const handlers = {}
function on(type, cb) { handlers[type] = cb }

// inside connect:
ws.onmessage = (e) => {
  const msg = JSON.parse(e.data)
  if (handlers[msg.type]) handlers[msg.type](msg.payload)
}

Nettoyage dans onUnmounted

Le composable gère des minuteurs et une connexion. Détruisez-les lorsque le composant qui l'utilise est démonté, afin que la reconnexion ne continue pas après la disparition de la vue.

import { onUnmounted } from "vue"

let reconnectTimer
onUnmounted(() => {
  clearTimeout(reconnectTimer)
  if (ws) ws.close(1000, "component unmounted")
})

Éviter la reconnexion après une fermeture intentionnelle

Une fermeture propre (code 1000) effectuée lors de votre propre nettoyage ne doit NOT déclencher de reconnexion. Suivez un indicateur intentional et ignorez la planification lorsqu'il est activé.

let intentional = false
function close() { intentional = true; ws.close(1000) }

ws.onclose = () => {
  status.value = "CLOSED"
  if (!intentional) scheduleReconnect()
}

La structure complète du composable

Tout est désormais réuni : connexion à la création, exposition de status, send et on, mise en file d'attente hors connexion, reconnexion avec reprise progressive et nettoyage automatique.

export function useWebSocket(url) {
  const status = ref("CLOSED")
  // connect, scheduleReconnect, send, on, flushQueue, cleanup...
  connect()
  return { status, send, on, close }
}

// usage:
// const { status, send, on } = useWebSocket("wss://...")

Vérification rapide

Vérifiez votre compréhension de la stratégie de reconnexion.

Récapitulatif

Vous avez créé un composable useWebSocket robuste :

  • Une référence status reflète CONNECTING / OPEN / CLOSED pour l'interface.
  • La reconnexion utilise une reprise progressive exponentielle plafonnée, et le compteur est réinitialisé en cas de réussite.
  • Les messages sortants sont mis en file d'attente hors connexion, puis traités à l'ouverture.
  • Les trames entrantes sont distribuées aux fonctions de rappel correspondant à leur type.
  • Les minuteurs et la connexion sont nettoyés dans onUnmounted, et la reconnexion est ignorée après une fermeture intentionnelle.

Questions Fréquemment Posées

La leçon « Composable useWebSocket avec reconnexion » est-elle gratuite ?

Oui — le texte complet de « Composable useWebSocket avec reconnexion » 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 « Composable useWebSocket avec reconnexion » ?

Encapsulation de WebSocket dans un composable, reconnexion automatique avec temporisation exponentielle et suivi de l’état 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 4 sur 4.

Combien de temps prend la leçon « Composable useWebSocket avec reconnexion » ?

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