À plusieurs

Deux volets, deux documents, une fusion. Ce ne sont pas deux vues d'un même éditeur : ce sont deux pairs joints par un transport, dans une page qui n'a pas de serveur.

Alice et Basile, sur cette pageCRDT Loro · transport en boucle locale

Le montage complet — document CRDT, transport, curseurs, commentaires, historique, et les deux pièges du démarrage — est surÉditer à plusieurs.

  1. Tapez à gauche. Le texte apparaît à droite, et le curseur d'en face porte le nom et la couleur de la personne.
  2. Coupez un pair avec le bouton En ligne. Le lien est suspendu, pas rompu : son curseur se fige en face.
  3. Écrivez dans les deux, dans la même phrase, puis rebranchez. Les deux moitiés se retrouvent, rien n'est écrasé et rien n'est perdu.

Pourquoi rien ne s'écrase

  • La fusion est un CRDT (Loro) : l'ordre d'arrivée n'a pas d'importance, et le résultat est le même chez tout le monde
  • Hors ligne n'est pas un cas particulier — c'est le cas général, avec une latence plus longue
  • Le texte fusionne caractère par caractère, donc deux personnes tiennent la même phrase
  • La reconnexion n'envoie pas le document : chaque pair annonce ce qu'il a, l'autre répond ce qui manque

Ce qui voyage à côté du texte

  • La présence — nom, couleur, position du curseur — passe par le même canal mais n'entre jamais dans le document
  • Les commentaires sont ancrés au texte, pas à un décalage : ils suivent la phrase quand elle bouge
  • L'historique vit dans le document, avec restauration ; il arrive donc avec le texte plutôt que par un second canal en retard
Le code, en détail →

Entre deux navigateurs

  • Un WebSocket, jamais du SSE : la synchronisation va dans les deux sens et le SSE ne descend que
  • nbe relay --port 8787, ou nbe serve qui garde aussi les documents
  • Le relais ne comprend rien à ce qu'il transporte — il recopie des octets, donc il ne peut pas les corrompre
  • Puis il sort du chemin : les pairs passent en WebRTC direct, et le relais reste le repli
  • Sur votre machine : pnpm --filter demo-collab dev démarre le relais avec le serveur, et la page ouverte dans plusieurs fenêtres vous donne autant de personnes (?room=mon-salon pour changer de salon)
Le transport en détail →