Trillion Characters：用 5 欧元 VPS 跑出的实时协作奇迹

背景

在当前的 Web 开发生态中，构建实时协作应用（如 Google Docs 或 Figma）通常被视为一项高成本、高复杂度的工程。开发者往往需要依赖庞大的前端框架（如 React、Vue 或 Svelte）来管理复杂的客户端状态，并配合昂贵的后端基础设施来处理 WebSocket 连接、冲突解决和状态同步。

然而，Elias de Jong 推出的 Trillion Characters 项目对这一范式提出了挑战。这是一个基于 Datastar 构建的实时协作实验，允许用户在一个无限画布上同时打字。其最引人注目的特性在于其极致的轻量化架构：除了 Datastar 本身及其属性外，页面不依赖任何客户端 JavaScript 逻辑。更令人震惊的是，这个能够支持多人实时协作、处理海量字符数据的应用，竟然运行在德国一台仅需 5.52 欧元的最低配置 VPS（虚拟专用服务器）上。

核心内容

Trillion Characters 不仅仅是一个打字游戏，它展示了一种彻底重构 Web 交互逻辑的架构理念。其核心机制可以分解为以下几个层面：

1. 架构反转：从“客户端逻辑”到“服务端流式渲染”

传统的前端框架（如 React、Vue、Svelte）通常将状态管理和交互逻辑保留在客户端浏览器中。而 Datastar 采取了一种激进的反向架构：

• 零客户端逻辑：浏览器被简化为一个纯粹的 HTML 渲染视口。它不具备处理复杂逻辑的能力，只负责显示原始 HTML。
• 服务端驱动：所有的交互逻辑、状态更新和数据处理全部移至后端。
• SSE 流式传输：页面更新通过持久化的 Server-Sent Events (SSE) 流式传输给客户端。这类似于流媒体电影，只不过传输的内容是 HTML 模板。当用户进行 UI 交互（如打字）时，服务器处理请求，生成新的 HTML 片段，并通过 SSE 推送回来。

2. 极致压缩与高效传输

虽然 SSE 传输的是完整的页面更新片段，但通过以下技术实现了极高的带宽效率：

• Brotli 压缩：利用浏览器内置的 Brotli 压缩算法，整个会话期间的数据流可以被压缩。只有当内容发生变化时，才会发送额外的字节。
• 超高压缩比：这种机制实现了 50 到 4000 倍的总压缩率，远超传统 gzip 响应所能达到的效果。
• DOM 差分算法：底层使用复杂的 DOM-morphing（DOM 变形/差异比对）算法，确保更新过程既高性能又无缝衔接。

3. 数据架构：CQRS 与 LMDB

为了支撑实时协作，系统摒弃了传统的 REPR（请求-端点-响应）模式，转而采用 CQRS（命令查询职责分离）架构模式：

• 读写分离：读取和写入操作被严格分离。
• 命令队列：来自所有客户端的命令（如输入字符）被排队，服务器以固定的更新频率批量写入数据库。
• 函数式渲染：页面作为当前状态的函数进行渲染，即 f(db state)。
• 客户端裁剪：渲染针对每个客户端进行定制，应用基于块（chunk-based）的裁剪技术，仅发送当前客户端可视区域内的内容。

4. 存储优化：空间局部性与原子性

字符数据的存储采用了高度优化的方案：

• LMDB 数据库：使用内存映射的键值存储数据库 LMDB，提供极快的读写速度。
• 分块存储：字符以 45x45 像素的块为单位存储。
• LZ4 压缩：在每个块的基础上应用 LZ4 压缩，消除空白字符和重复字符，进一步减小体积。
• Z-order 曲线：块的坐标作为键，使用 Morton codes 以 Z-order 曲线存储。这将二维的空间局部性转换为一维的排序顺序，完美适配 B-tree 存储结构。
• ACID 事务：数据库读写遵循完整的 ACID 特性，无任何妥协。画布上看到的每一个字符都已原子性地保存到磁盘。

关键要点

• 极简前端：应用仅依赖 11kB 的 Datastar JavaScript 框架，浏览器仅作为 HTML 渲染器，不包含任何客户端状态或逻辑。
• SSE 替代 WebSocket：利用 HTTP 响应类型的 SSE 进行持久化连接，通过会话级压缩实现远超 gzip 的带宽效率（压缩比达 50-4000x）。
• CQRS 架构：通过命令查询职责分离，将客户端交互转化为服务器端的命令队列，实现默认实时化和协作化。
• 高性能存储：使用 LMDB 结合 LZ4 压缩和 Z-order 空间索引，优化了二维字符数据的一维存储效率。
• 极致成本控制：整个高并发、实时协作应用运行在月费仅 5.52 欧元的德国 VPS 上，证明了该架构在资源利用上的惊人效率。
• 数据一致性：所有数据写入均保证 ACID 原子性，确保数据持久化的可靠性。

意义与影响

Trillion Characters 及其背后的 Datastar 框架，为 Web 开发提供了一种反直觉但极具潜力的替代方案。

首先，它挑战了“前端必须复杂”的行业共识。通过将所有逻辑移至后端，前端变得极其轻量，这不仅降低了客户端设备的负担，还可能提升应用的初始加载速度和可访问性。对于网络条件较差或设备性能较低的用户，这种“瘦客户端”架构具有显著优势。

其次，它展示了 SSE 在现代 Web 应用中的巨大潜力。尽管 WebSocket 在双向通信中占据主流，但 Trillion Characters 证明了在单向更新为主、配合高效压缩和差分算法的场景下，SSE 能够提供极具竞争力的性能和带宽效率。

最后，从基础设施成本的角度来看，该项目证明了通过合理的架构设计（如 CQRS、高效压缩、内存映射数据库），即使是最低成本的云服务也能支撑起复杂的实时协作应用。这对于初创公司、独立开发者以及希望降低运营成本的企业而言，具有重要的参考价值。它提醒我们，在追求功能复杂度的同时，不应忽视架构层面的优化与精简。