Stabilisation d'un moteur de synchronisation temps réel avec WebSocket
السيناريو
Contexte : Vous reprenez une application Vue.js affichant en temps réel des transactions via WebSocket dans un tableau analytique interne. Le Problème : À chaque navigation entre pages, une nouvelle connexion WebSocket est ouverte sans fermer l'ancienne, provoquant des fuites mémoire et des messages dupliqués. Contraintes : Vous devez utiliser l'API Composition. Aucune librairie externe autorisée. La connexion doit être proprement fermée lors du démontage du composant. Code actuel : <script setup> import { ref, onMounted } from 'vue'; const messages = ref([]); onMounted(() => { const socket = new WebSocket('wss://example.com/feed'); socket.onmessage = (event) => { messages.value.push(event.data); }; }); </script> Livrable attendu : Refactoriser la logique afin d'assurer une seule connexion active et une fermeture correcte avec onUnmounted.
المهارات المستهدفة
حالات تطبيقية أخرى في Vue.js
- Stabilisation d'une liste dynamique mal rendueأساسي
- Stabilisation d'un watcher provoquant des appels API en boucleمتقدم
- Correction d'un champ contrôlé non synchroniséأساسي
- Correction d'un formulaire complexe avec objet réactif mal fusionnéمتقدم
- Correction d'un compteur réactif qui ne se met pas à jourأساسي
- Correction d'un problème asynchrone dans onMountedمتقدم
أسئلة أصلية من تصميم CodeDuel. لا ترتبط CodeDuel بأي ناشر أو هيئة اعتماد مذكورة؛ أسماء الشهادات والعلامات التجارية مملوكة لأصحابها، ولا تُذكر إلا للإشارة إلى المجال الذي يغطيه الاختبار. الإبلاغ عن محتوى