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

《互联网产品的客户端架构·内容、社交与实时互动》8.1 presence 的近似语义:没有真正的「在线」

客户端看到的「在线」不是事实,而是一次带衰减的观测。本节把 presence 拆成最后活跃时间、online/away/offline/unknown 四态与 TTL 过期,给出窗口判定、下一次转换时间与最后活跃文案的纯函数实现,并复盘一次把 socket 连通当成在线、导致用户对着「幽灵在线」发消息的事故。

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

《互联网产品的客户端架构·内容、社交与实时互动》7.3 断线期间的消息补拉与空洞检测

重连后只拉最新一条,会让中间的缺口永远补不上。本节用已收序列号维护连续高水位,按批生成补拉区间,把补拉结果与实时推送合并去重,并复盘一次「重连只同步最新消息」导致的历史消息永久丢失,说明补拉报告如何表达未完成状态,以及服务端历史过期后端上必须承认的边界。

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

《互联网产品的客户端架构·内容、社交与实时互动》7.2 消息去重与有序:端上能保证什么

同一条消息可能因重连补发、重试或多路径到达两次,晚到的消息也可能插到已经读过的位置。本节区分消息 id 与序列号,给出端上的去重集合、乱序缓冲窗口与冲突判定,并用可运行代码证明端上只能保证最终有序,不能保证实时有序,还会说明窗口边界与冲突上报为什么决定了故障是否可观测。

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

《互联网产品的客户端架构·内容、社交与实时互动》7.1 重连与退避:把断线当成常态

断线在移动端是常态。本节把重连拆成失败分类、指数退避、抖动与上限四个决策,给出一个可测试的纯函数退避模块,并复盘一次服务端重启后所有客户端同时重连、把网关打满的事故,最后说明网络从离线恢复时为什么要立即重连并清零计数,以及如何用确定随机源验证风暴是否真的被摊开。

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

《互联网产品的客户端架构·内容、社交与实时互动》6.3 降级路径:实时不可用时产品还能做什么

实时通道会断,产品不能跟着白屏。本节把连接状态映射成角标、自动插入、输入中、评论框与在线状态五种能力,给出暂停、手动、排队、禁用四类降级模式与恢复顺序,让页面在弱网下仍能读缓存、写草稿、手动刷新;队列只接受可幂等重放的写操作,并复盘一次整页空白事故。

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

《互联网产品的客户端架构·内容、社交与实时互动》6.1 轮询、SSE 与 WebSocket 的判定表

实时选型常被简化成「聊天就上 WebSocket」,但真实约束远不止消息方向。本节把延迟、在线规模、运维能力、二进制与上行频率写成结构化输入,用可测试的打分函数输出推荐、置信度与警告,说明同一份需求为什么允许有两个合理答案,并给出四组场景的分数对照与一次选型回滚复盘。

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

《互联网产品的客户端架构·内容、社交与实时互动》5.3 回滚的边界:哪些操作不能乐观

点赞可以乐观,支付与下单不行。本节按回滚成本把写操作分成四档:即时可逆、可补偿、需服务端确认、绝不能乐观,并给出一个可测试的 TypeScript 判定函数与七类操作的决策表;重点解释为什么资金、库存与对外通知不能靠本地回滚,以及重试策略如何与乐观策略解耦。

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

《互联网产品的客户端架构·内容、社交与实时互动》5.2 评论的顺序、草稿与失败重发

评论提交比点赞多出正文、时间顺序、草稿保存与失败重发。本节把一条评论拆成发送中、失败、已确认三态:用客户端 clientId 建占位,按时间正序合并,失败时保留原文与草稿,重试复用同一客户端幂等键,并完整复盘一次超时重试导致的重复评论与丢字事故。

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

《互联网产品的客户端架构·内容、社交与实时互动》5.1 点赞与收藏:本地先行、服务端为准

点赞与收藏看似只是改一个布尔值,真正难的是本地先行之后如何让服务端裁决:绝对计数与增量事件冲突、列表与详情各存一份状态、连点与取消产生乱序响应。本节给出一个带序号与意图层的 TypeScript 状态存储,用假时钟复现乱序响应,并完整复盘一次计数越点越少的线上问题。

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

《互联网产品的客户端架构·内容、社交与实时互动》4.3 图片格式选择与端上降级

同一张封面图,在支持 AVIF 的手机上清晰又小,在旧 WebView 里却可能直接白屏。本节把能力探测、格式顺序、尺寸变体、压缩参数与版本化 URL 串成一条可测策略:只在解码探测通过时使用新格式,按 DPR 选最小可用变体,解码失败沿降级链回退,并用内容哈希路径保证缓存不会串图。

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

《互联网产品的客户端架构·内容、社交与实时互动》4.2 断点续传与失败恢复

上传到 87% 时进程被系统回收,回来后是从头开始还是接着传?本节把上传会话拆成会话 id、文件指纹、已确认分片清单与过期时间,给出恢复决策表、以服务端为准的对账规则和按错误类型分流的重试策略,并复盘一次本地清单比服务端多、最终拼出缺片文件的事故。

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

《互联网产品的客户端架构·内容、社交与实时互动》4.1 上传编排:分片、并发与进度语义

一条 48MB 的视频会把上传器的问题全部放大:分片多大、并发几个、进度条该信哪个数、失败算不算完成。本节用内存传输适配器与可注入时钟实现上传编排器,区分线路进度与已确认进度,并复盘一次进度跑到 100% 而服务端合并失败的事故,给出可测试的完成判定。

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

《互联网产品的客户端架构·内容、社交与实时互动》3.3 媒体懒加载与占位:CLS 的端上来源

图片把正文撑开的那一刻,CLS 就已经发生。本节把占位盒、首屏媒体优先级、懒加载触发条件与失败降级拆成可计算的纯函数,用固有宽高和可视区域算出布局位移分数,复盘一次信息流图片加载导致误触的抖动事故与修复顺序,并给出与结构化块模型、sanitize 的接口边界。

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

《互联网产品的客户端架构·内容、社交与实时互动》3.2 渲染边界与 sanitize:谁能写 HTML

作者正文、运营配置、第三方嵌入的信任级别并不相同。本节把 sanitize 定义为能力边界而不是标签黑名单,给出作者、运营、嵌入三套白名单策略,处理 URL 协议与实体编码绕过,并用测试复盘一次直接 innerHTML 导致的脚本注入事故与修复顺序。

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

《互联网产品的客户端架构·内容、社交与实时互动》3.1 结构化内容:把正文当成数据而不是 HTML 字符串

正文不该是一段 HTML 字符串,而是一份可校验、可降级的块文档。本节定义段落、图片、视频、代码、引用五类块与行内标记,给出未知块降级、未来版本拒绝与确定性序列化的 TypeScript 实现,并用测试覆盖迁移、round-trip 与坏字段。

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

《互联网产品的客户端架构·内容、社交与实时互动》2.3 刷新策略:下拉、自动、回到前台该不该拉

下拉、轮询、回到前台是三种不同意图的刷新,用同一个定时器处理只会在用户阅读时把列表顶走。本节用一段可运行的 TypeScript 策略模块给出逐触发的判定、刷新合并与节流、锚点位置保护,并复盘一次前后台切换风暴导致的三连请求与列表跳动,给出参数取值的依据。

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

《互联网产品的客户端架构·内容、社交与实时互动》2.2 去重、插入与位置保持

分页只保证「不重不漏地取」,端上仍会遇到同一张卡片来自刷新、实时推送与翻页三条路径。本节用带假时钟的 TypeScript 窗口实现已见集合、按时间排序的实时插入、锚点 id 位置恢复与 epoch 乱序丢弃,并复盘一次淘汰条目后「越滑越少」的线上问题。

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

《互联网产品的客户端架构·内容、社交与实时互动》2.1 游标分页:为什么页码在内容流里会失效

内容流一旦插入新条目,页码就不再是位置:总数漂移会让第二页重复上一页的卡片,深分页还要求数据库扫过前 N 行。本节用一段可运行的 TypeScript 实现时间戳加 id 的复合游标、开区间翻页与 end-of-feed 判定,并复盘一次热榜刷新导致的重复与漏项事故。

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

《互联网产品的客户端架构·内容、社交与实时互动》1.3 lab 的三条验证线:L1 纯逻辑、L2 进程内、L3 本地实时通道

客户端实验最怕「测试全绿但线上照错」。本节把验证分成 L1 纯逻辑、L2 进程内流程、L3 本地实时通道三级,用一段可运行的 TypeScript 判定器逐级说明各自能证明什么、不能证明什么,并复盘一次因并发执行时序用例而产生的假绿灯事故。

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