Schémas d’interfaces en temps réel
Appliquez des mises à jour optimistes pour fournir un retour instantané, utilisez une file d’attente locale hors ligne et comparez les données entrantes pour ne mettre à jour que les éléments modifiés dans l’interface.
Schémas d’interfaces en temps réel est une leçon Frontend 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 Frontend Academy, et ta progression se synchronise sur le web et l'application CoddyKit. Le cours Frontend Academy comprend 4 leçons au total.
Le temps réel, c'est une expérience réellement fluide
Le temps réel ne se résume pas à la rapidité : l'interface doit être réactive, prévisible et tolérante à la latence. Trois schémas fondamentaux : les mises à jour optimistes, la mise en file d'attente locale et la détection intelligente des différences.
Mises à jour optimistes
Mettez immédiatement l'interface à jour après l'action de l'utilisateur, avant la confirmation du serveur. Rétablissez l'état précédent si le serveur refuse l'opération. L'application semble ainsi instantanée.
async function likePost(id) {
// 1. Optimistically update UI:
setLikes(l => ({ ...l, [id]: (l[id] || 0) + 1 }));
setLiked(prev => ({ ...prev, [id]: true }));
try {
await fetch(`/api/posts/${id}/like`, { method: 'POST' });
} catch (err) {
// 2. Rollback on failure:
setLikes(l => ({ ...l, [id]: (l[id] || 1) - 1 }));
setLiked(prev => ({ ...prev, [id]: false }));
toast.error('Could not like — please retry');
}
}Mises à jour optimistes avec des identifiants temporaires
Pour les éléments créés, attribuez-leur localement un identifiant temporaire. Remplacez-le par l'identifiant réel du serveur lorsque la réponse arrive.
async function addComment(text) {
const tempId = `tmp-${Date.now()}`;
setComments(c => [...c, { id: tempId, text, pending: true }]);
try {
const saved = await fetch('/api/comments', {
method: 'POST',
body: JSON.stringify({ text })
}).then(r => r.json());
setComments(c => c.map(m => m.id === tempId ? saved : m));
} catch (err) {
setComments(c => c.map(m => m.id === tempId ? { ...m, error: true } : m));
}
}Mise en file locale hors connexion
Lorsque le réseau est indisponible, mettez les actions en file localement et rejouez-les lorsqu'il revient. L'utilisateur peut continuer à travailler.
const queue = JSON.parse(localStorage.getItem('queue') || '[]');
function enqueue(action) {
queue.push(action);
localStorage.setItem('queue', JSON.stringify(queue));
trySend();
}
async function trySend() {
while (queue.length && navigator.onLine) {
const action = queue[0];
try {
await fetch(action.url, action);
queue.shift();
localStorage.setItem('queue', JSON.stringify(queue));
} catch {
break; // stop until online
}
}
}
window.addEventListener('online', trySend);Détection des différences dans les données en temps réel reçues
Si le serveur envoie la liste entière, comparez-la à l'état actuel et ne mettez à jour que les changements : vous évitez ainsi les rendus inutiles et les problèmes d'animation.
function applyServerSnapshot(newList, currentList) {
const current = new Map(currentList.map(i => [i.id, i]));
const result = newList.map(item => {
const prev = current.get(item.id);
if (!prev) return { ...item, _state: 'new' };
if (prev.updatedAt !== item.updatedAt) return { ...item, _state: 'updated' };
return prev;
});
return result;
}Mises à jour par correctifs
C'est préférable aux instantanés complets : le serveur envoie uniquement les champs modifiés. Appliquez-les progressivement : cela utilise moins de bande passante et accélère l'affichage.
// Server sends: { type: 'patch', id: 42, fields: { likes: 11 } }
ws.on('message', (msg) => {
if (msg.type === 'patch') {
setPosts(posts => posts.map(p =>
p.id === msg.id ? { ...p, ...msg.fields } : p
));
}
});Limiter les mises à jour à haute fréquence
Certains flux envoient de nombreuses mises à jour par seconde (position de la souris, variations des cours). Limitez les mises à jour de l'interface à environ 60 Hz pour éviter les saccades du navigateur.
import { throttle } from 'lodash-es';
const applyUpdate = throttle((data) => {
setData(data);
}, 16); // ~60fps
ws.on('tick', applyUpdate);Indicateurs de présence
Affichez en temps réel les autres utilisateurs connectés ou en train d'écrire. Le serveur publie des événements de présence ; le client affiche une liste avec des avatars.
ws.on('presence', ({ users }) => {
setOnlineUsers(users);
});
ws.on('typing', ({ user, isTyping }) => {
setTypingUsers(t => isTyping
? [...t.filter(u => u.id !== user.id), user]
: t.filter(u => u.id !== user.id));
});Bannière d'état de la connexion
Affichez une bannière discrète lorsque l'application est hors connexion ou en cours de reconnexion. Masquez-la lorsque la reconnexion est complète. Les utilisateurs tolèrent beaucoup mieux la latence lorsqu'ils voient ce qui se passe.
{!isConnected && (
<div className="connection-banner">
Reconnecting... Your changes will sync when you're back online.
</div>
)}Résolution des conflits
Les applications en temps réel doivent gérer les modifications simultanées en conflit. Stratégies : la dernière écriture gagne (simple, mais avec pertes), les vecteurs de version, OT (transformation opérationnelle) et les CRDT (Yjs, Automerge).
Les CRDT pour la collaboration
CRDT (types de données répliquées sans conflit) permettent la modification collaborative en temps réel sans serveur central. Bibliothèques : Yjs, Automerge. Utilisés par Figma, Linear et les applications de type Notion.
Performances : listes virtualisées
Les flux en temps réel peuvent devenir très longs. Utilisez des listes virtualisées (react-virtuoso, @tanstack/react-virtual) pour n'afficher que les éléments visibles : la mémoire et le CPU restent constants quel que soit le nombre total d'éléments.
Vérification rapide
Qu'est-ce qu'une « mise à jour optimiste » dans une interface en temps réel ?
Récapitulatif : schémas d'interface en temps réel
Les mises à jour optimistes donnent une impression d'instantanéité ; rétablissez l'état précédent en cas d'échec. Utilisez des identifiants temporaires pour les éléments créés. Mettez les actions en file localement pour assurer leur conservation hors connexion. Comparez les mises à jour du serveur ou appliquez-les sous forme de correctifs pour éviter les rendus inutiles. Limitez les flux à haute fréquence. Affichez la présence (en ligne, en train d'écrire) et des bannières d'état de la connexion. Utilisez les CRDT (Yjs, Automerge) pour la modification collaborative. Virtualisez les longues listes en temps réel.
Questions Fréquemment Posées
La leçon « Schémas d’interfaces en temps réel » est-elle gratuite ?
Oui — le texte complet de « Schémas d’interfaces en temps réel » 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 Frontend Academy, passe à CoddyKit PRO. Le cours Frontend Academy comprend 4 leçons au total.
Qu'est-ce que j'apprendrai dans « Schémas d’interfaces en temps réel » ?
Appliquez des mises à jour optimistes pour fournir un retour instantané, utilisez une file d’attente locale hors ligne et comparez les données entrantes pour ne mettre à jour que les éléments modifié… Tu pratiques Frontend 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 Frontend Academy ?
Aucune expérience préalable n'est requise. Frontend 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 « Schémas d’interfaces en temps réel » ?
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 Frontend Academy ?
Oui. Chaque leçon Frontend 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
- API WebSocket : ouverture, message, fermeture et erreur
- Intégration du client Socket.io
- Événements envoyés par le serveur pour la diffusion unidirectionnelle
- Schémas d’interfaces en temps réel