leetcode-patterns 实时同步原理防抖上传与 Realtime 合并杜绝多设备数据冲突【免费下载链接】leetcode-patternsA pattern-based approach to learn technical interview questions项目地址: https://gitcode.com/gh_mirrors/le/leetcode-patternsleetcode-patterns 是一个基于模式分类的 LeetCode 面经刷题工具。这篇文章拆解它的实时同步机制如何靠「防抖上传 Realtime 合并」让你在不同设备上的完成状态、笔记和复习提醒保持一致彻底杜绝多设备数据冲突。多设备刷题为什么需要同步机制想象一下真实场景 地铁上用手机勾掉 3 道题回家后打开电脑进度却还没跟上 笔记本上刚写的解题笔记手机端看不到⚠️ 如果每次点击都立刻写回服务端高频操作会互相覆盖产生数据冲突leetcode-patterns 的进度数据已完成题目、星标、笔记、解题日期、复习提醒就存在每个用户的 user_progress 快照里。它不追求每次操作都同步而是用三层机制协作做到既流畅又一致。同步全景本地优先 防抖上传 Realtime 合并层级职责源码位置① 本地优先每次操作先写浏览器 localStorage操作永远零延迟src/lib/storage.ts② 防抖上传1 秒内的多次操作合并成一次上传src/lib/sync.ts③ Realtime 合并服务端把变更实时推送给其他设备本地比对后合并src/lib/sync.ts防抖上传1 秒缓冲期合并高频写入每次你勾选已完成、加星标或保存笔记组件都会调用syncNow()→scheduleUpload(userId)例如 QuestionsTable.tsx 中的 toggleCompleted。scheduleUpload的实现非常克制收到请求后启动一个1 秒定时器定时器到期前又来一次操作清掉旧定时器重新计时直到你停手 1 秒才真正执行一次upsert写入 user_progress 表也就是说连续刷 20 题只需 1 次网络请求且写入按onConflict: user_id保证每个用户只有一行记录天然避免覆盖竞争。离场兜底关页面前立即冲刷待发数据如果 1 秒内你就关闭了页面数据会丢吗不会。AuthProvider 注册了两个钩子beforeunload页面即将关闭visibilitychange页面切到后台比如切 App、锁屏两者都会触发 flushPendingUpload()把待发上传立即冲刷出去保证刷新即最新。Realtime 合并其他设备的改动秒级到达登录后客户端通过 Supabase Realtime 订阅user_progress表并且只监听属于自己user_id的 UPDATE 事件见 AuthContext.tsx 的频道订阅。收到推送后交给mergeFromRealtimePayload()本地合并不发起任何额外请求。5 秒自过滤窗口避免自己回显自己上传成功后服务端会把这次 UPDATE 广播给该用户的所有在线设备——包括刚上传的这台。如果直接合并就等于用旧状态覆盖自己。mergeFromRealtimePayload用一个lastUploadAt时间戳解决事件到达时若距本机上次上传不足 5 秒判定为自己的回显直接跳过src/lib/sync.ts#L94-L96。逐字段比对无变化就不落盘对completed、starred、notes、solved_dates、reminders五个字段逐一与本地状态比对setsEqual / recordsEqual只有真正有差异才写 localStorage并递增syncVersion通知表格组件重读本地数据、刷新界面。这避免了无意义的状态抖动和界面闪烁。完整的多设备同步时序打开网站 / 登录→downloadAndMerge()拉取远端快照远端是真相之源直接覆盖本地若远端还没有数据则把本地先推上去src/lib/sync.ts#L36-L57本机操作→ 写 localStorage → 防抖计时 1 秒停止操作→upsert到云端记录lastUploadAtRealtime 广播→ 其他设备收到 → 5 秒窗口判断 → 逐字段合并 → 界面刷新关页 / 切后台→flushPendingUpload()冲刷最后写入整个过程无需用户手动保存或刷新进度在多设备间自动对齐。核心逻辑还有完整的单元测试覆盖见 src/lib/sync.test.ts。关键源码速查防抖上传与冲刷src/lib/sync.tsRealtime 载荷合并src/lib/sync.tsRealtime 频道订阅与会话同步src/components/layout/AuthContext.tsx各操作触发上传的组件src/components/questions/QuestionsTable.tsx一句话总结 leetcode-patterns 的实时同步本质是三件套本地优先保证流畅、防抖上传合并高频写、Realtime 推送 5 秒自过滤 逐字段比对保证合并正确。三层各司其职让多设备刷题这件事零感知、零冲突。【免费下载链接】leetcode-patternsA pattern-based approach to learn technical interview questions项目地址: https://gitcode.com/gh_mirrors/le/leetcode-patterns创作声明：本文部分内容由AI辅助生成（AIGC），仅供参考 leetcode-patterns 实时同步原理：防抖上传与 Realtime 合并，杜绝多设备数据冲突
leetcode-patterns 实时同步原理防抖上传与 Realtime 合并杜绝多设备数据冲突【免费下载链接】leetcode-patternsA pattern-based approach to learn technical interview questions项目地址: https://gitcode.com/gh_mirrors/le/leetcode-patternsleetcode-patterns 是一个基于模式分类的 LeetCode 面经刷题工具。这篇文章拆解它的实时同步机制如何靠「防抖上传 Realtime 合并」让你在不同设备上的完成状态、笔记和复习提醒保持一致彻底杜绝多设备数据冲突。多设备刷题为什么需要同步机制想象一下真实场景 地铁上用手机勾掉 3 道题回家后打开电脑进度却还没跟上 笔记本上刚写的解题笔记手机端看不到⚠️ 如果每次点击都立刻写回服务端高频操作会互相覆盖产生数据冲突leetcode-patterns 的进度数据已完成题目、星标、笔记、解题日期、复习提醒就存在每个用户的 user_progress 快照里。它不追求每次操作都同步而是用三层机制协作做到既流畅又一致。同步全景本地优先 防抖上传 Realtime 合并层级职责源码位置① 本地优先每次操作先写浏览器 localStorage操作永远零延迟src/lib/storage.ts② 防抖上传1 秒内的多次操作合并成一次上传src/lib/sync.ts③ Realtime 合并服务端把变更实时推送给其他设备本地比对后合并src/lib/sync.ts防抖上传1 秒缓冲期合并高频写入每次你勾选已完成、加星标或保存笔记组件都会调用syncNow()→scheduleUpload(userId)例如 QuestionsTable.tsx 中的 toggleCompleted。scheduleUpload的实现非常克制收到请求后启动一个1 秒定时器定时器到期前又来一次操作清掉旧定时器重新计时直到你停手 1 秒才真正执行一次upsert写入 user_progress 表也就是说连续刷 20 题只需 1 次网络请求且写入按onConflict: user_id保证每个用户只有一行记录天然避免覆盖竞争。离场兜底关页面前立即冲刷待发数据如果 1 秒内你就关闭了页面数据会丢吗不会。AuthProvider 注册了两个钩子beforeunload页面即将关闭visibilitychange页面切到后台比如切 App、锁屏两者都会触发 flushPendingUpload()把待发上传立即冲刷出去保证刷新即最新。Realtime 合并其他设备的改动秒级到达登录后客户端通过 Supabase Realtime 订阅user_progress表并且只监听属于自己user_id的 UPDATE 事件见 AuthContext.tsx 的频道订阅。收到推送后交给mergeFromRealtimePayload()本地合并不发起任何额外请求。5 秒自过滤窗口避免自己回显自己上传成功后服务端会把这次 UPDATE 广播给该用户的所有在线设备——包括刚上传的这台。如果直接合并就等于用旧状态覆盖自己。mergeFromRealtimePayload用一个lastUploadAt时间戳解决事件到达时若距本机上次上传不足 5 秒判定为自己的回显直接跳过src/lib/sync.ts#L94-L96。逐字段比对无变化就不落盘对completed、starred、notes、solved_dates、reminders五个字段逐一与本地状态比对setsEqual / recordsEqual只有真正有差异才写 localStorage并递增syncVersion通知表格组件重读本地数据、刷新界面。这避免了无意义的状态抖动和界面闪烁。完整的多设备同步时序打开网站 / 登录→downloadAndMerge()拉取远端快照远端是真相之源直接覆盖本地若远端还没有数据则把本地先推上去src/lib/sync.ts#L36-L57本机操作→ 写 localStorage → 防抖计时 1 秒停止操作→upsert到云端记录lastUploadAtRealtime 广播→ 其他设备收到 → 5 秒窗口判断 → 逐字段合并 → 界面刷新关页 / 切后台→flushPendingUpload()冲刷最后写入整个过程无需用户手动保存或刷新进度在多设备间自动对齐。核心逻辑还有完整的单元测试覆盖见 src/lib/sync.test.ts。关键源码速查防抖上传与冲刷src/lib/sync.tsRealtime 载荷合并src/lib/sync.tsRealtime 频道订阅与会话同步src/components/layout/AuthContext.tsx各操作触发上传的组件src/components/questions/QuestionsTable.tsx一句话总结 leetcode-patterns 的实时同步本质是三件套本地优先保证流畅、防抖上传合并高频写、Realtime 推送 5 秒自过滤 逐字段比对保证合并正确。三层各司其职让多设备刷题这件事零感知、零冲突。【免费下载链接】leetcode-patternsA pattern-based approach to learn technical interview questions项目地址: https://gitcode.com/gh_mirrors/le/leetcode-patterns创作声明：本文部分内容由AI辅助生成（AIGC），仅供参考 RELATED READING
延伸阅读
更多一线实战笔记与深度复盘，助您持续精进
