/tags/cloudflare/ Recent content in Cloudflare on 我的博客 Hugo zh-cn Mon, 09 Nov 2026 00:00:00 +0000 /posts/2026-11-09-cf-whiteboard/ Mon, 09 Nov 2026 00:00:00 +0000 /posts/2026-11-09-cf-whiteboard/ <p>用 Cloudflare Workers + Durable Objects 寫咗個<strong>多人實時電子白板</strong>，開個房間、把連結發出去，大家就可以一齊畫。</p> <p>源碼開放喺 GitHub：<a href="https://github.com/crazysarah/cf-whiteboard">crazysarah/cf-whiteboard</a>，<code>wrangler deploy</code> 一分鐘就開到自己嗰塊板。用法：房間名放喺 hash（<code>https://&lt;你的域&gt;/#房間名</code>），同一個 hash 就係同一塊板。</p> <h2 id="點解要自己寫一個">點解要自己寫一個</h2> <p>市面嘅白板工具（Miro、Excalidrawlive 嗰啲）要麼要註冊、要麼有牆。自己寫一個：</p> <ul> <li><strong>零註冊</strong>：開連結就畫，房間名即開即用</li> <li><strong>一個房間 = 一個 Durable Object</strong>：DO 係全球單實例強一致，天生就啱做房間狀態</li> <li><strong>WebSocket 用 Hibernation API</strong>：空房間唔佔 CPU 時間，hibernated 狀態免費——唔使驚養個白板燒錢</li> <li><strong>筆畫歷史存 DO 內置 SQLite</strong>：每 3 筆落盤，重新打開仲喺度（上限 5000 筆，舊嘅自動清）</li> <li><strong>截圖直接貼上牆</strong>：方便貼參考圖</li> <li><strong>一邊傾一邊畫</strong>：WebRTC 語音 P2P，DO 只轉發 SDP/ICE 信令，媒體流唔過 CF——<strong>零成本</strong></li> </ul> <h2 id="架構一句話">架構一句話</h2> <p><code>/room/&lt;name&gt;</code> 路由到同名 Durable Object；WebSocket 常駐但 hibernated（唔使 CPU 時間）；歷史入 SQLite；語音走 P2P 信令通道。</p> <h2 id="已知取捨">已知取捨</h2> <ul> <li>清空係廣播式：任何人按清空，全房清掉（undo 栈留返做後續）</li> <li>坐標係視口坐標，唔同屏幕比例睇到嘅畫面比例可能唔同（縮放適配後續加）</li> </ul> <p>有興趣可以直接開個房試下，或者攞源碼去 <code>wrangler deploy</code> 一分鐘開埋自己嗰塊板。</p>