posts

《互联网产品的客户端架构·内容、社交与实时互动》 · 已发布章节索引(45 篇)

《互联网产品的客户端架构·内容、社交与实时互动》全 45 篇:13 章正文覆盖内容四条消费面、信息流、富文本、上传、互动、实时连接、重连补拉、在线状态、关系、通知、审核与搜索;附序、前言、目录与三篇附录,配可运行的 TypeScript 实验工程。

全卷 45 篇:13 章正文 + 序、前言、目录 + 附录 A/B/C。每节配可运行的 TypeScript 代码,代码块用 // file: / // tier: / // verify: 标注,可在实验工程中逐字节还原。

本页是卷二的完整索引。可以从目录与学习路径 按顺序通读,也可以按问题跳读。

全书概览

项目内容
书稿《互联网产品的客户端架构》卷二
已发布篇数45 篇(含目录与附录)
主线语言TypeScript(Node 26 原生类型剥离,零第三方依赖)
贯穿案例内容社区 + 私信 + 轻交易「回声」
阅读方式目录篇顺序通读,或按章节表跳读
上级专题书稿专题

前置

篇文章核心内容
序序从卷一结束的地方写起,交代内容、社交与实时为什么单独成卷,四条核心判断与本卷边界。
前言前言四卷分工、十三章结构、贯穿案例「回声」、social-client-lab 与三级可运行性。
目录目录13 章 39 节的结构、章节依赖、三条阅读路径与读完应能回答的六个问题。

第 1 章 内容端架构与 social-lab

节文章核心内容
1.11.1 「回声」的内容面:信息流、详情、互动、实时四条线把「回声」的客户端拆成信息流、详情、互动、实时四条消费线,逐条说明每条线需要什么数据、失败时能退到哪里,并用一段可运…
1.21.2 social-lab 的第一个决定:端上先画什么内容端的第一处架构决定不是选框架,而是决定哪份状态归谁所有。本节把服务端状态、会话状态与瞬时 UI 状态分开,用一段…
1.31.3 lab 的三条验证线:L1 纯逻辑、L2 进程内、L3 本地实时通道客户端实验最怕「测试全绿但线上照错」。本节把验证分成 L1 纯逻辑、L2 进程内流程、L3 本地实时通道三级,用一段…

第 2 章 信息流

节文章核心内容
2.12.1 游标分页:为什么页码在内容流里会失效内容流一旦插入新条目,页码就不再是位置:总数漂移会让第二页重复上一页的卡片,深分页还要求数据库扫过前 N 行。本节用…
2.22.2 去重、插入与位置保持分页只保证「不重不漏地取」,端上仍会遇到同一张卡片来自刷新、实时推送与翻页三条路径。本节用带假时钟的 TypeScr…
2.32.3 刷新策略:下拉、自动、回到前台该不该拉下拉、轮询、回到前台是三种不同意图的刷新,用同一个定时器处理只会在用户阅读时把列表顶走。本节用一段可运行的 Type…

第 3 章 内容渲染与富文本

节文章核心内容
3.13.1 结构化内容:把正文当成数据而不是 HTML 字符串正文不该是一段 HTML 字符串,而是一份可校验、可降级的块文档。本节定义段落、图片、视频、代码、引用五类块与行内标…
3.23.2 渲染边界与 sanitize:谁能写 HTML作者正文、运营配置、第三方嵌入的信任级别并不相同。本节把 sanitize 定义为能力边界而不是标签黑名单,给出作者…
3.33.3 媒体懒加载与占位:CLS 的端上来源图片把正文撑开的那一刻,CLS 就已经发生。本节把占位盒、首屏媒体优先级、懒加载触发条件与失败降级拆成可计算的纯函数…

第 4 章 媒体上传与资源

节文章核心内容
4.14.1 上传编排:分片、并发与进度语义一条 48MB 的视频会把上传器的问题全部放大:分片多大、并发几个、进度条该信哪个数、失败算不算完成。本节用内存传输…
4.24.2 断点续传与失败恢复上传到 87% 时进程被系统回收,回来后是从头开始还是接着传?本节把上传会话拆成会话 id、文件指纹、已确认分片清单…
4.34.3 图片格式选择与端上降级同一张封面图,在支持 AVIF 的手机上清晰又小,在旧 WebView 里却可能直接白屏。本节把能力探测、格式顺序、…

第 5 章 互动与乐观更新

节文章核心内容
5.15.1 点赞与收藏:本地先行、服务端为准点赞与收藏看似只是改一个布尔值,真正难的是本地先行之后如何让服务端裁决:绝对计数与增量事件冲突、列表与详情各存一份状…
5.25.2 评论的顺序、草稿与失败重发评论提交比点赞多出正文、时间顺序、草稿保存与失败重发。本节把一条评论拆成发送中、失败、已确认三态:用客户端 clie…
5.35.3 回滚的边界:哪些操作不能乐观点赞可以乐观,支付与下单不行。本节按回滚成本把写操作分成四档:即时可逆、可补偿、需服务端确认、绝不能乐观,并给出一个…

第 6 章 实时通道选型

节文章核心内容
6.16.1 轮询、SSE 与 WebSocket 的判定表实时选型常被简化成「聊天就上 WebSocket」,但真实约束远不止消息方向。本节把延迟、在线规模、运维能力、二进制…
6.26.2 一条实时连接的生命周期连接不是一个 connected 布尔值,而是 idle、connecting、open、reconnecting、…
6.36.3 降级路径:实时不可用时产品还能做什么实时通道会断,产品不能跟着白屏。本节把连接状态映射成角标、自动插入、输入中、评论框与在线状态五种能力,给出暂停、手动…

第 7 章 实时消息可靠性

节文章核心内容
7.17.1 重连与退避:把断线当成常态断线在移动端是常态。本节把重连拆成失败分类、指数退避、抖动与上限四个决策,给出一个可测试的纯函数退避模块,并复盘一次…
7.27.2 消息去重与有序:端上能保证什么同一条消息可能因重连补发、重试或多路径到达两次,晚到的消息也可能插到已经读过的位置。本节区分消息 id 与序列号,给…
7.37.3 断线期间的消息补拉与空洞检测重连后只拉最新一条,会让中间的缺口永远补不上。本节用已收序列号维护连续高水位,按批生成补拉区间,把补拉结果与实时推送…

第 8 章 在线状态与「正在输入」

节文章核心内容
8.18.1 presence 的近似语义:没有真正的「在线」客户端看到的「在线」不是事实,而是一次带衰减的观测。本节把 presence 拆成最后活跃时间、online/awa…
8.28.2 输入中状态的节流与超时输入中状态不是一次事件,而是一份几秒后自动过期的租约。本节用本地节流、远端超时、会话隔离与停发条件,把「正在输入」压…
8.38.3 状态展示的降级与隐私边界在线状态一旦涉及隐私,就不再是「显示什么」,而是「允许谁看到什么证据」。本节把可见性、关系、拉黑与连接降级组合成一张…

第 9 章 社交关系与可见性

节文章核心内容
9.19.1 关注、互关与关系缓存关注、粉丝与互关不是一张布尔表:方向、新鲜度和进行中的变更都要分别记录。本节用带假时钟的 FollowCache 实…
9.29.2 可见性规则在端上的表达可见性规则在端上只能表达为提示与预判,最终仍以服务端为准。本节把公开、关注可见、好友可见、仅自己可见映射为带置信度的…
9.39.3 拉黑与屏蔽:端上必须立即生效的部分拉黑是安全操作,端上必须先隐藏再同步:信息流、详情、评论、搜索、私信五处都要在请求发出前生效。本节实现 pendin…

第 10 章 通知与未读数

节文章核心内容
10.110.1 未读数的来源与端上合并点赞、评论、关注与系统通知四种来源的未读数,为什么不能用一个 total += 1 维护。本节用服务端水位 ackS…
10.210.2 多端已读:一致性从哪里来同一个「已读」布尔值在两台设备之间一定会打架:甲读完 3 条,乙把整个会话标成已读,新消息到达后两边都显示已读。本节…
10.310.3 推送降级:没有推送权限时怎么补推送不是「有没有」的二值问题:权限被拒、系统通知关闭、令牌失效,三种情况的恢复路径完全不同。本节给出推送降级矩阵、打…

第 11 章 内容审核与安全边界

节文章核心内容
11.111.1 端上预检:能拦什么、不能拦什么端上预检只能做早反馈,不能替代审核。本节用纯函数实现长度、格式、控制字符与少量高风险词的本地提示,区分硬阻断、可申诉…
11.211.2 审核态的内容 UI:占位、隐藏与申诉审核中的内容最怕先闪正文再被替换。本节用五态状态机描述 draft、pending、review、published…
11.311.3 举报链路与证据留存举报不是把一段文字发给服务端。本节用内存队列和假时钟实现举报负载、离线排队、去重、退避与成功回执,把举报时的内容快照…

第 12 章 搜索与发现

节文章核心内容
12.112.1 输入联想:防抖、竞态与缓存联想框的难点在输入与响应之间:本节用可注入调度器的 TypeScript 控制器实现防抖、输入法组合抑制、取消在途请…
12.212.2 结果分页与筛选状态的保持搜索结果页最容易丢的不是数据,而是状态:本节用纯函数 reducer 管理查询词、筛选条件、游标与版本号,讲清条件变…
12.312.3 发现页的推荐位与内容流的差异发现页不是换皮的信息流:运营位、榜单、专题与普通内容来自不同契约。本节用纯函数组合器实现固定槽位、跨源去重、占位与曝…

第 13 章 卷二收口:social-lab 端到端

节文章核心内容
13.113.1 端到端场景:发内容、互动、实时回复把发内容、信息流出现、点赞、评论与实时回复串成一条 L2 端到端流程,用内存服务端与真实模块组合,逐步断言信息流、互…
13.213.2 故障注入:断网、慢网与断线重连用可控网络适配器与假时钟注入断网、慢网、乱序和断线,验证离线排队不产生副作用、重连后按高水位补拉、补拉与实时消息去重…
13.313.3 质量场景与风险清单:进入卷三把首屏、弱网、断线、内存、审核与多端一致写成六条质量属性场景,每条给出刺激、响应、度量口径、预算与证据等级,用风险分…

附录

篇文章核心内容
附录 A附录 A轮询、SSE、WebSocket 的能力对照、断线语义、鉴权方式与选型判定表。
附录 B附录 B内容与实时问题排查手册:按十二类症状给出信号、根因、验证与修复方向。
附录 C附录 C内容社交客户端评审清单:七组判据、证据要求、反模式与评审记录模板。

怎么读这一卷

与其他书稿的边界

代码与可复现性

全部文章 Books game Java Indie golang 客户端开发 Minigame Saas rust Python
books

《互联网产品的客户端架构·内容、社交与实时互动》附录 C 内容社交客户端评审清单

一份可以直接带进评审会的内容社交客户端清单:按面与状态归属、读路径、写路径、实时连接、降级、安全审核、可观测七组展开,每条给出判据、需要的证据与常见反模式,并附评审记录模板与一次完整评审示例,适合方案评审、版本复核、风险台账与评审前证据准备。

7 分钟阅读
书稿 互联网产品 客户端架构
books

《互联网产品的客户端架构·内容、社交与实时互动》附录 B 内容与实时问题排查手册

按用户症状组织的内容与实时排查手册:重复卡片、位置跳动、详情白屏、图片灰块、点赞回退、评论失败、上传卡住、消息丢失、未读数不准、审核态闪现、联想串结果。每条给出可观察信号、常见根因、验证步骤与修复方向,最后附一张总表,便于值班时按症状快速定位。

8 分钟阅读
书稿 互联网产品 客户端架构
books

《互联网产品的客户端架构·内容、社交与实时互动》13.3 质量场景与风险清单:进入卷三

把首屏、弱网、断线、内存、审核与多端一致写成六条质量属性场景,每条给出刺激、响应、度量口径、预算与证据等级,用风险分级函数排出优先级,明确本卷只验证到 L2、哪些结论必须留给卷三的交易一致性与真机基线,并复盘一次把测试全绿当成质量结论的教训。

9 分钟阅读
书稿 互联网产品 客户端架构
books

《互联网产品的客户端架构·内容、社交与实时互动》13.2 故障注入:断网、慢网与断线重连

用可控网络适配器与假时钟注入断网、慢网、乱序和断线,验证离线排队不产生副作用、重连后按高水位补拉、补拉与实时消息去重、部分响应保留剩余空洞,并复盘一次离线连点把点赞翻回原状的事故,说明每个故障场景的断言,以及为什么 L2 适配器不能替代真实 socket 与真机弱网。

8 分钟阅读
书稿 互联网产品 客户端架构
books

《互联网产品的客户端架构·内容、社交与实时互动》13.1 端到端场景:发内容、互动、实时回复

把发内容、信息流出现、点赞、评论与实时回复串成一条 L2 端到端流程,用内存服务端与真实模块组合,逐步断言信息流、互动关系、评论时间线与未读角标的状态归属,并复盘一次刷新只插新条目、不覆盖旧计数导致的双计事故,说明组合验证能证明什么、不能证明什么。

8 分钟阅读
书稿 互联网产品 客户端架构
books

《互联网产品的客户端架构·内容、社交与实时互动》12.3 发现页的推荐位与内容流的差异

发现页不是换皮的信息流:运营位、榜单、专题与普通内容来自不同契约。本节用纯函数组合器实现固定槽位、跨源去重、占位与曝光 key,讲清位置为什么不能塌陷、去重优先级如何显式表达,给出可复用的布局校验规则,并复盘一次运营位为空导致整页错位的事故。

9 分钟阅读
书稿 互联网产品 客户端架构
books

《互联网产品的客户端架构·内容、社交与实时互动》12.2 结果分页与筛选状态的保持

搜索结果页最容易丢的不是数据,而是状态:本节用纯函数 reducer 管理查询词、筛选条件、游标与版本号,讲清条件变化为什么必须重置游标、筛选如何安全放进 URL、返回时恢复什么,以及空结果与「没有更多」的区别,并复盘一次筛选后仍用旧游标翻页的事故。

10 分钟阅读
书稿 互联网产品 客户端架构
books

《互联网产品的客户端架构·内容、社交与实时互动》11.3 举报链路与证据留存

举报不是把一段文字发给服务端。本节用内存队列和假时钟实现举报负载、离线排队、去重、退避与成功回执,把举报时的内容快照冻结成不可覆盖的证据,给出快照、去重与退避共 8 条测试,并复盘一次作者编辑后证据被悄悄改写、举报被驳回的真实申诉失败事故。

9 分钟阅读
书稿 互联网产品 客户端架构
books

《互联网产品的客户端架构·内容、社交与实时互动》11.2 审核态的内容 UI:占位、隐藏与申诉

审核中的内容最怕先闪正文再被替换。本节用五态状态机描述 draft、pending、review、published、hidden 的可见性与占位,把正文挂载与状态判断绑定,给出 8 条视图投影测试,并复盘一次审核态卡片先渲染正文、随后被占位覆盖的闪烁事故。

9 分钟阅读
书稿 互联网产品 客户端架构
books

《互联网产品的客户端架构·内容、社交与实时互动》11.1 端上预检:能拦什么、不能拦什么

端上预检只能做早反馈,不能替代审核。本节用纯函数实现长度、格式、控制字符与少量高风险词的本地提示,区分硬阻断、可申诉复核与轻提示三类结果,给出带允许短语、零宽归一化和规则版本的 8 条测试,并复盘一次单字黑名单误拦「黄金周」正常游记的事故。

8 分钟阅读
书稿 互联网产品 客户端架构
books

《互联网产品的客户端架构·内容、社交与实时互动》10.3 推送降级:没有推送权限时怎么补

推送不是「有没有」的二值问题:权限被拒、系统通知关闭、令牌失效,三种情况的恢复路径完全不同。本节给出推送降级矩阵、打开应用时的补偿同步策略与「旧推送角标不能覆盖新已读」的规则,并用 TypeScript 实现计划器与角标合并,复盘一次关掉通知的用户永远看不到红点的事故。

10 分钟阅读
书稿 互联网产品 客户端架构
books

《互联网产品的客户端架构·内容、社交与实时互动》10.2 多端已读:一致性从哪里来

同一个「已读」布尔值在两台设备之间一定会打架:甲读完 3 条,乙把整个会话标成已读,新消息到达后两边都显示已读。本节把已读建模为按会话单调前进的位置,用最大位置合并多端状态,处理回执失败重试与服务端总数覆盖,并复盘一次无位置回执把新消息误标已读的事故。

9 分钟阅读
书稿 互联网产品 客户端架构
books

《互联网产品的客户端架构·内容、社交与实时互动》10.1 未读数的来源与端上合并

点赞、评论、关注与系统通知四种来源的未读数,为什么不能用一个 total += 1 维护。本节用服务端水位 ackSeq 与事件 id 划清「已计数」和「端上待确认」,给出按类型分组、99+ 上限与幂等合并的 TypeScript 实现,并复盘一次旧快照把角标从 4 覆盖回 3 的线上问题。

9 分钟阅读
书稿 互联网产品 客户端架构
books

《互联网产品的客户端架构·内容、社交与实时互动》9.3 拉黑与屏蔽:端上必须立即生效的部分

拉黑是安全操作,端上必须先隐藏再同步:信息流、详情、评论、搜索、私信五处都要在请求发出前生效。本节实现 pending/active/failed 三态 BlockStore、失败不回显的重试、只增不减的服务端快照合并,并复盘一次等确认导致弱网下仍能看到对方内容的事故。

8 分钟阅读
书稿 互联网产品 客户端架构
books

《互联网产品的客户端架构·内容、社交与实时互动》9.2 可见性规则在端上的表达

可见性规则在端上只能表达为提示与预判,最终仍以服务端为准。本节把公开、关注可见、好友可见、仅自己可见映射为带置信度的预判,给出可测试的首屏骨架、服务端纠正、拒绝后清理缓存与受众提示的完整实现,并复盘一次预判过宽导致缓存标题与封面提前泄露的事故。

9 分钟阅读
书稿 互联网产品 客户端架构
books

《互联网产品的客户端架构·内容、社交与实时互动》9.1 关注、互关与关系缓存

关注、粉丝与互关不是一张布尔表:方向、新鲜度和进行中的变更都要分别记录。本节用带假时钟的 FollowCache 实现四态关系缓存、TTL 降级、乐观关注与回滚,给出关系变化后的列表失效矩阵,并复盘一次把缓存互关当成私信授权、导致错误入口的事故。

9 分钟阅读
书稿 互联网产品 客户端架构
books

《互联网产品的客户端架构·内容、社交与实时互动》8.3 状态展示的降级与隐私边界

在线状态一旦涉及隐私,就不再是「显示什么」,而是「允许谁看到什么证据」。本节把可见性、关系、拉黑与连接降级组合成一张展示决策表,明确 unknown 与 offline 的差别,给出可运行实现与测试,并复盘一次隐藏在线后仍能从活跃时间反推的事故。

11 分钟阅读
书稿 互联网产品 客户端架构
books

《互联网产品的客户端架构·内容、社交与实时互动》8.2 输入中状态的节流与超时

输入中状态不是一次事件,而是一份几秒后自动过期的租约。本节用本地节流、远端超时、会话隔离与停发条件,把「正在输入」压成低频心跳,给出丢包、乱序、进程被杀与幽灵输入四类故障下的可运行实现与假时钟测试,并复盘一次每键发送导致群聊广播风暴、指示器随机闪烁的事故。

10 分钟阅读
书稿 互联网产品 客户端架构