Dans le bureau : le cahier
Un tableau infini, à plusieurs.
OsaBoard est un espace de travail collaboratif en temps réel. On pose des blocs sur un canvas infini (texte, code, Kanban, sondage, carte, base de données…), on les relie entre eux, et chacun voit les curseurs des autres bouger en direct.
01Le point de départ
« Au départ, c'était un tableau blanc. Au bout de quelques heures, c'était devenu un outil de travail. »
La première version d'OsaBoard était un simple tableau blanc partagé en WebRTC. Deux heures plus tard, je l'ai réécrite autour de React Flow : au lieu de traits, on manipule des blocs qu'on peut relier.
Le reste de la nuit a servi à ajouter des blocs utiles : du code, du Markdown, une checklist, un Kanban, un sondage, un minuteur, une carte, un agenda, la météo, et même une petite base SQL qui tourne dans le navigateur.
02En images
03Comment ça marche
Chaque participant garde une copie du tableau. Les changements voyagent directement entre les navigateurs.
Le serveur Socket.io ne sert qu'à présenter les participants.
Chaque participant ouvre un DataChannel avec chacun des autres : un vrai réseau à N personnes, sans serveur central.
Les gros contenus (images compressées, tableaux) sont découpés en morceaux de 16 Ko et réassemblés à l'arrivée.
18 types de nœuds personnalisés, reliés par des liens animés. Les curseurs de chacun s'affichent en direct.
Un tableau entier se sauvegarde dans un fichier et se rouvre dans une nouvelle room.
✦À toi de jouer
Une version miniature du canvas : déplace les blocs, ajoutes-en, et regarde les liens suivre.
!Les défis
ProblèmeSynchroniser l'état React Flow avec le réseau dans un useEffect relançait le rendu à l'infini.
SolutionLes mises à jour réseau passent par des fonctions de mise à jour ciblées, sans effet qui se déclenche lui-même.
ProblèmeCertaines connexions ne s'établissaient jamais.
SolutionLes candidats ICE n'étaient pas envoyés à temps : ils sont maintenant transmis dès qu'ils arrivent.
ProblèmeLe premier modèle ne reliait que deux participants.
SolutionUne topologie maillée : chaque nouvel arrivant ouvre une connexion avec chacun des participants déjà présents.
⏱Journal de bord
Première version, en verre dépoli.
On passe des traits aux blocs reliés.
YouTube, Markdown, curseurs, chat, glisser-déposer.
Les gros contenus passent enfin par le DataChannel.
De vrais outils sur le canvas.
Maillage WebRTC et support mobile.
Astuce : les flèches ← → de ton clavier passent d'un projet à l'autre.
