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

《互联网产品的客户端架构·内容、社交与实时互动》1.2 social-lab 的第一个决定:端上先画什么

内容端的第一处架构决定不是选框架,而是决定哪份状态归谁所有。本节把服务端状态、会话状态与瞬时 UI 状态分开,用一段可运行的 TypeScript 实现带游标、去重与淘汰上限的信息流容器,并复盘一次把游标存在组件里、导致返回页面后重复加载的真实事故。

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

《互联网产品的客户端架构·内容、社交与实时互动》1.1 「回声」的内容面:信息流、详情、互动、实时四条线

把「回声」的客户端拆成信息流、详情、互动、实时四条消费线,逐条说明每条线需要什么数据、失败时能退到哪里,并用一段可运行的 TypeScript 把四条面的需求写成结构化输出与测试,最后复盘一次四件事混在一个页面里导致状态互相踩踏的真实事故。

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

《互联网产品的客户端架构》卷二 · 目录与章节索引

《互联网产品的客户端架构·内容、社交与实时互动》的完整目录与学习路径:13 章 39 节从内容端四条消费面讲到信息流、渲染、上传、互动、实时连接、重连补拉、在线状态、关系、通知、审核与搜索,附实验工程、三条阅读路径、数字与版本口径,以及读完应能回答的六个问题。

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

《互联网产品的客户端架构·内容、社交与实时互动》序

卷一讲清楚端上约束之后,真正难的部分才开始:内容要滚动、互动要即时、连接会断。这篇序说明为什么内容、社交与实时互动值得单独成卷,四条消费面共享哪四条核心判断,本卷十三章如何排布、坚持哪些立场、写给哪些读者,以及明确不承诺什么、与卷一如何衔接。

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