Triphop (2015)：实时 TODO 应用的探索

Source: Dev.to

概览

2015 年由开发者 Árpád Kiss（@rpi1337）发布的 Triphop 是一个实时 TODO 应用，展示了当时的网页开发实践。它将强大的前端框架与事件驱动的后端相结合，构建了一个响应式单页应用（SPA）。

技术栈

• 前端：AngularJS（v1.3.14）用于数据绑定和应用逻辑；Bootstrap（v3.3.1）用于样式。
• 后端：使用 Express 框架的 Node.js。
• 实时通信：Socket.IO 用于在所有已连接用户之间即时更新。
• 存储：自定义基于文件的 JSON 存储（store/data.json），而非传统数据库。

架构

后端遵循为 API‑first 设计改造的模型‑视图‑控制器（MVC）模式。

模型与数据存储

• List – 包含 id 和 title。
• Todo – 包含 id、listId（将其关联到特定列表）、title 和 description。

Store 模块（store/index.js）读取并写入 data.json。它提供 findAll、find、add、remove、commit 等方法，以操作内存中的数据并同步到文件系统。

控制器与路由

中心路由器（api/index.js）将 HTTP 方法和端点映射到控制器动作，例如：

GET  /api/lists          → ListsController.getLists
POST /api/lists/:id      → TodosController.addTodo

控制器（lists.js 和 todos.js）直接与 Store 交互，并使用 SocketService 向客户端广播更改。

客户端结构

客户端代码（app/js/main.js）遵循经典的 AngularJS 约定，将关注点划分为控制器和服务。

服务

• SocketService – 初始化 Socket.IO 连接并提供 subscribe 方法以监听服务器事件。
• ListsService 与 TodosService – 处理核心业务逻辑，向 Express API 发起 HTTP 请求，并监听实时 WebSocket 事件以保持内部数据数组的最新。

控制器

• MainController – 管理导航状态（在所有列表和特定列表内的任务之间切换）。
• HeaderController – 通过导航栏处理新列表的创建。
• ListController 与 TodosController – 将服务数据绑定到 HTML 视图，并暴露用于修改和删除条目的 UI 函数。

实时流程

当用户添加新 TODO 条目时，按以下顺序执行：

1. 前端：TodosController 调用 TodosService.add()，向服务器发送 POST 请求。
2. 后端：TodosController 接收请求，更新 Store，并调用 SocketService.publish('new-todo', todo.toJSON())。
3. SocketService 将事件广播给所有已连接的 WebSocket 客户端。
4. 前端：订阅了 new-todo 事件的 TodosService 接收负载，将新条目追加到其数据数组，并更新 UI。

此流程确保任何用户创建、修改或删除的列表或任务都会即时在其他所有用户的屏幕上反映出来，无需刷新页面。

结论

Triphop（2015）是一个简洁、轻量的实时 SPA 示例。通过结合 AngularJS、Express 和 Socket.IO，它展示了如何保持服务器状态与客户端状态的紧密同步。虽然如今更常见的是 React、Vue 等现代框架以及 PostgreSQL、Firebase 等数据库，Triphop 仍为实时网页架构的基础概念提供了宝贵的洞见。

源代码：