一個支持上百人同時打字的萬億字符畫布,服務器賬單每月只有5.52歐元。這個名叫“Trillion Characters”的實驗項目,打破了人們對實時協作應用成本的刻板印象。它沒有采用流行的前端框架,也不依賴復雜的客戶端狀態管理,而是把所有交互邏輯都搬到了后端,用一條持久連接就將HTML更新像電影流一樣推送出來。
正方會說,這驗證了超輕量后端驅動架構的可行性——Datastar這個11KB的框架,可能徹底改變我們對Web應用交互邊界的理解。反方卻擔心,每次按鍵都回傳服務器,渲染完整頁面再壓縮流回,這種模式能扛住真正的高并發嗎?我的判斷是:它不是銀彈,但確實為特定場景提供了極致的性價比和開發體驗。下面我們拆開看看這個項目的技術內核。
進入畫布,點擊任意位置就能開始打字,同時能看到其他用戶的光標在移動。整個過程里,瀏覽器除了Datastar和它的聲明式屬性,沒有執行任何其他自定義JavaScript。Datastar做了一個激進的架構選擇:消滅客戶端的狀態與邏輯。所有交互事件被發送到服務端,服務端根據當前數據庫狀態重新生成HTML片段,通過持久化的SSE(服務器推送事件)流返回,客戶端只負責渲染收到的HTML模板。就像在線看電影,只不過流媒體傳輸的不是視頻幀,而是頁面更新。
SSE并不是某種特殊連接,而是一個普通HTTP響應的類型。對一個經常更新整個頁面的應用來說,網絡帶寬似乎會成為瓶頸。但項目利用了SSE流的一項關鍵特性:會話級壓縮。與每次請求獨立進行gzip壓縮不同,瀏覽器內置的Brotli壓縮器可以在整個會話上下文中持續壓縮,只有當內容真正改變時才發送增量數據。據項目公布的數據,這種機制取得了50-4000倍的壓縮比,遠超傳統逐請求壓縮的效果。支撐這層體驗的,是國內一個精巧的DOM差異更新算法,它能以高性能方式無縫應用變化,讓用戶感覺不到整頁刷新。
傳統Web服務器遵循“請求-端點-響應”模式,而“Trillion Characters”采用了CQRS架構——命令查詢職責分離。讀和寫被完全分開:所有客戶端發出的命令(比如鍵入一個字符)被排隊,由服務器按固定頻率寫入數據庫;閱讀則根據當前數據庫狀態渲染HTML模板,公式為f(數據庫狀態)。有趣的是,渲染函數會針對每個客戶端做裁剪,只發送該客戶端當前可見的畫布區塊,從而大幅減少傳輸數據。這種區塊裁剪技術結合Brotli流式壓縮,是項目能在廉價VPS上支撐協作的核心。
那么字符是如何存儲的?畫布被劃分成45×45字符的矩形區塊,每個區塊作為一條記錄存入LMDB——一個內存映射的鍵值存儲引擎,讀寫速度極快。寫入存儲前,區塊會經過LZ4壓縮,消除空白和重復字符,進一步節省空間。區塊坐標被轉換成一維的莫頓碼鍵值,按Z-order存儲在B樹上,這樣在2D空間中相鄰的區塊,在磁盤上的存儲位置也相鄰,大幅減少查詢時的I/O跳躍。整個讀寫過程保證完整的ACID特性,畫布上每一個字符都已被原子性地保存到硬盤。你看到的不是臨時緩存,而是落盤的數據。
支持這一切的硬件,是德國一家公有云上最低配置的VPS,月費5.52歐元。該應用由開發者Elias de Jong構建,代碼完全開源在GitHub上。對一線開發者的啟示很直接:如果想快速搭建具有實時協作功能的產品,不一定非得引入Operational Transform或CRDT算法,也不一定需要Elixir/Phoenix這類高并發后端。用Datastar加上SSE架構,配合經過裁剪的渲染策略和緊湊存儲,完全可以用極低成本達到相近效果。但要注意,這種模式的擴容上限受單服務器內存和帶寬限制,適合用戶規模可控或區塊密集但交互頻率不高的場景。
回到開頭那個正方與反方的辯論:反方擔心服務器端渲染的延遲和帶寬難以應付大型協作,而正方看到的則是復雜性的大幅下降。Datastar實驗證明,如果應用UI交互復雜度不高,且用戶量在單機可承載范圍內,將狀態集中到服務端完全可以獲得令人滿意的體驗。將客戶端退化為純粹渲染視口,意味著前端不再有狀態同步的噩夢,后端也能利用CQRS天然支持多用戶。評判這項技術值不值得投用,不該用“能不能取代React”或“能不能做Google Docs”去衡量,而應該看手頭要解決的問題,是否需要如此重型的武器。當一個萬億字符的畫布可以用5歐元服務器輕松承載時,我們對實時協作的想象力,也應該重新校準了。
特別聲明:以上內容(如有圖片或視頻亦包括在內)為自媒體平臺“網易號”用戶上傳并發布,本平臺僅提供信息存儲服務。
Notice: The content above (including the pictures and videos if any) is uploaded and posted by a user of NetEase Hao, which is a social media platform and only provides information storage services.