我的创业公司stick，一款实时协作白板应用，灵感源于线下协作的便捷性。stick的开发过程既富有挑战性，也令人兴奋。在完成项目后，我积累了大量经验，涵盖用户同步、高效数据处理以及系统稳定性保障等方面。
实时协作的必要性
实时协作对现代工作流程至关重要，无论是头脑风暴、文档编辑还是代码调试，即时反馈都能保持团队活力，实现高效沟通。Google Docs或Figma等应用已成功实现了这一点，而我致力于将这种便捷性引入创意头脑风暴领域。
实时协作的挑战
实时协作的挑战不仅在于数据同步，更在于打造流畅且引人入胜的用户体验。我利用Supabase解决了以下几个关键问题：
数据同步与乐观更新
实时同步数据是协作应用的常见难题。在Stick中，每个用户的更改都需要在所有活跃会话中立即反映。传统方法需要轮询和WebSocket，构建复杂的系统，并涉及大量的自定义逻辑和后端配置。
Supabase的解决方案：Supabase通过其原生实时数据同步机制简化了这一过程。useQuery hook能够轻松获取和同步数据（例如Stick的笔记），配置简便。Supabase处理WebSocket连接的复杂性，确保所有客户端自动保持同步，从而使开发者能够专注于功能开发，而非底层连接管理。
乐观更新：为了提升用户体验，即使在服务器保存后端更改之前，我也立即反映UI变化。
乐观更新的优势：乐观更新解决了网络延迟导致的UI延迟问题。当用户创建新笔记时，即使突变仍在处理中，更改也会立即显示在白板上。如果突变失败，则会回滚更改，确保数据一致性，同时保持流畅的用户体验。
const createNote = useMutation(api.notes.createNote).withOptimisticUpdate(
(localStore, args) => {
const existingNotes = localStore.getQuery(api.notes.getNotes, { boardId: actualBoardId }) || [];
const tempId = `temp_${Date.now()}` as Id;
const now = Date.now();
localStore.setQuery(api.notes.getNotes, { boardId: actualBoardId }, [
...existingNotes,
{ _id: tempId, _creationTime: now, ...args },
]);
}
);
新注释会立即显示在白板上，用户可以继续协作，无需等待服务器响应。只有当突变结果与预期不符时，UI才会相应更新。
实时在线状态跟踪
实时跟踪用户在线状态和在白板上的位置对实时协作至关重要。在Stick中，我需要显示用户光标位置，指示其他用户在白板上的操作。实时跟踪还能确保团队了解谁在活跃参与。
经验教训：实时跟踪用户光标位置需要频繁更新，如果管理不当，可能会压垮系统。
使用 Scrapfly SDK（scrapfly-sdk）在 TypeScript 或 JavaScript 中进行网页抓取，用于用户请求抓取 URL、绕过反爬虫防护、渲染页面等场景。
Supabase的解决方案：我使用了防抖函数来有效管理在线更新频率。此功能通过限制频繁更新来防止数据库被过多的请求淹没。
防抖函数的解释：防抖是一种技术，它只在指定延迟后触发函数，避免冗余或不必要的调用。在本例中，它有助于防止光标的小幅快速移动发送过多的更新。
export function usePresence(boardId: Id, isShared: boolean) {
// ... (代码与原文相同)
}
通过防抖更新，系统可以有效地跟踪用户活动，而不会压垮后端或导致性能问题。
数据库设计与索引
随着实时数据的增长，高效的数据库设计至关重要。我需要确保随着白板和用户数量的扩展，数据能够快速检索。
Supabase的帮助：Supabase的架构设计允许轻松定义表和索引。例如，在线状态表架构支持基于用户和白板的有效查询，并跟踪每个用户的最后更新时间。
presence: defineTable({
userId: v.id("users"),
boardId: v.id("boards"),
lastUpdated: v.number(),
cursorPosition: v.object({
x: v.number(),
y: v.number(),
}),
})
.index("by_board", ["boardId"])
.index("by_user_and_board", ["userId", "boardId"])
.index("by_board_and_lastUpdated", ["boardId", "lastUpdated"]);
这些索引确保即使有大量活跃用户或白板，数据检索速度也能保持快速。
端到端类型安全
Supabase与TypeScript的无缝集成是其主要优势之一。TypeScript提供的类型安全在构建实时系统时非常重要。通过类型安全的查询、突变和模式定义，我能够在开发过程中捕获潜在错误，使整个过程更流畅、更可预测。
经验与总结
我了解到高效的状态管理至关重要。实时系统固然复杂，但使用合适的工具可以显著简化开发。Supabase让我能够专注于打造出色的用户体验，而无需过多关注底层技术细节。
Stick的开发是一次有意义的经历，让我学习了大量关于实时系统的知识，以及如何使用工具简化复杂任务。对于希望实现类似功能的开发者，我的建议是从小型项目开始，充分利用现有工具，并在学习过程中迭代改进。
访问Stick项目体验这些功能，或查看源代码了解更多实现细节。
