https://plumephp.com/posts/books/%E4%BA%92%E8%81%94%E7%BD%91%E4%BA%A7%E5%93%81%E7%9A%84%E5%AE%A2%E6%88%B7%E7%AB%AF%E6%9E%B6%E6%9E%84%E5%86%85%E5%AE%B9%E7%A4%BE%E4%BA%A4%E4%B8%8E%E5%AE%9E%E6%97%B6%E4%BA%92%E5%8A%A8/Recent content in 《互联网产品的客户端架构·内容、社交与实时互动》 · 已发布章节索引（45 篇） on PlumePHPHugozh-CNTue, 20 Oct 2026 23:00:00 +0800https://plumephp.com/inet-client-social-appendix-c-social-review-checklist/Tue, 20 Oct 2026 23:00:00 +0800https://plumephp.com/inet-client-social-appendix-c-social-review-checklist/一份可以直接带进评审会的内容社交客户端清单：按面与状态归属、读路径、写路径、实时连接、降级、安全审核、可观测七组展开，每条给出判据、需要的证据与常见反模式，并附评审记录模板与一次完整评审示例，适合方案评审、版本复核、风险台账与评审前证据准备。https://plumephp.com/inet-client-social-appendix-b-content-debugging/Tue, 20 Oct 2026 22:00:00 +0800https://plumephp.com/inet-client-social-appendix-b-content-debugging/按用户症状组织的内容与实时排查手册：重复卡片、位置跳动、详情白屏、图片灰块、点赞回退、评论失败、上传卡住、消息丢失、未读数不准、审核态闪现、联想串结果。每条给出可观察信号、常见根因、验证步骤与修复方向，最后附一张总表，便于值班时按症状快速定位。https://plumephp.com/inet-client-social-appendix-a-realtime-protocols/Tue, 20 Oct 2026 21:00:00 +0800https://plumephp.com/inet-client-social-appendix-a-realtime-protocols/把短轮询、长轮询、SSE 与 WebSocket 放在同一张表里逐项对照：通信方向、成本、断线语义、鉴权方式与典型故障。附录给出每种通道的最小实现、Last-Event-ID 与心跳的处理方式，以及一张按产品约束与项目阶段选择通道的判定表。https://plumephp.com/inet-client-social-13-3-quality-risks-v3/Tue, 20 Oct 2026 14:00:00 +0800https://plumephp.com/inet-client-social-13-3-quality-risks-v3/把首屏、弱网、断线、内存、审核与多端一致写成六条质量属性场景，每条给出刺激、响应、度量口径、预算与证据等级，用风险分级函数排出优先级，明确本卷只验证到 L2、哪些结论必须留给卷三的交易一致性与真机基线，并复盘一次把测试全绿当成质量结论的教训。https://plumephp.com/inet-client-social-13-2-fault-injection/Tue, 20 Oct 2026 10:30:00 +0800https://plumephp.com/inet-client-social-13-2-fault-injection/用可控网络适配器与假时钟注入断网、慢网、乱序和断线，验证离线排队不产生副作用、重连后按高水位补拉、补拉与实时消息去重、部分响应保留剩余空洞，并复盘一次离线连点把点赞翻回原状的事故，说明每个故障场景的断言，以及为什么 L2 适配器不能替代真实 socket 与真机弱网。https://plumephp.com/inet-client-social-13-1-e2e-scenario/Tue, 20 Oct 2026 09:00:00 +0800https://plumephp.com/inet-client-social-13-1-e2e-scenario/把发内容、信息流出现、点赞、评论与实时回复串成一条 L2 端到端流程，用内存服务端与真实模块组合，逐步断言信息流、互动关系、评论时间线与未读角标的状态归属，并复盘一次刷新只插新条目、不覆盖旧计数导致的双计事故，说明组合验证能证明什么、不能证明什么。https://plumephp.com/inet-client-social-12-3-discover-vs-feed/Mon, 19 Oct 2026 20:30:00 +0800https://plumephp.com/inet-client-social-12-3-discover-vs-feed/发现页不是换皮的信息流：运营位、榜单、专题与普通内容来自不同契约。本节用纯函数组合器实现固定槽位、跨源去重、占位与曝光 key，讲清位置为什么不能塌陷、去重优先级如何显式表达，给出可复用的布局校验规则，并复盘一次运营位为空导致整页错位的事故。https://plumephp.com/inet-client-social-12-2-search-paging-state/Mon, 19 Oct 2026 19:00:00 +0800https://plumephp.com/inet-client-social-12-2-search-paging-state/搜索结果页最容易丢的不是数据，而是状态：本节用纯函数 reducer 管理查询词、筛选条件、游标与版本号，讲清条件变化为什么必须重置游标、筛选如何安全放进 URL、返回时恢复什么，以及空结果与「没有更多」的区别，并复盘一次筛选后仍用旧游标翻页的事故。https://plumephp.com/inet-client-social-12-1-suggest-debounce/Mon, 19 Oct 2026 15:30:00 +0800https://plumephp.com/inet-client-social-12-1-suggest-debounce/联想框的难点在输入与响应之间：本节用可注入调度器的 TypeScript 控制器实现防抖、输入法组合抑制、取消在途请求与 latest-wins 版本号，解释缓存 key 为什么必须包含完整查询词，并复盘一次慢请求后到覆盖新结果的线上故障。https://plumephp.com/inet-client-social-11-3-report-chain/Mon, 19 Oct 2026 14:00:00 +0800https://plumephp.com/inet-client-social-11-3-report-chain/举报不是把一段文字发给服务端。本节用内存队列和假时钟实现举报负载、离线排队、去重、退避与成功回执，把举报时的内容快照冻结成不可覆盖的证据，给出快照、去重与退避共 8 条测试，并复盘一次作者编辑后证据被悄悄改写、举报被驳回的真实申诉失败事故。https://plumephp.com/inet-client-social-11-2-review-state-ui/Mon, 19 Oct 2026 10:30:00 +0800https://plumephp.com/inet-client-social-11-2-review-state-ui/审核中的内容最怕先闪正文再被替换。本节用五态状态机描述 draft、pending、review、published、hidden 的可见性与占位，把正文挂载与状态判断绑定，给出 8 条视图投影测试，并复盘一次审核态卡片先渲染正文、随后被占位覆盖的闪烁事故。https://plumephp.com/inet-client-social-11-1-precheck-client/Mon, 19 Oct 2026 09:00:00 +0800https://plumephp.com/inet-client-social-11-1-precheck-client/端上预检只能做早反馈，不能替代审核。本节用纯函数实现长度、格式、控制字符与少量高风险词的本地提示，区分硬阻断、可申诉复核与轻提示三类结果，给出带允许短语、零宽归一化和规则版本的 8 条测试，并复盘一次单字黑名单误拦「黄金周」正常游记的事故。https://plumephp.com/inet-client-social-10-3-push-degrade/Sun, 18 Oct 2026 20:30:00 +0800https://plumephp.com/inet-client-social-10-3-push-degrade/推送不是「有没有」的二值问题：权限被拒、系统通知关闭、令牌失效，三种情况的恢复路径完全不同。本节给出推送降级矩阵、打开应用时的补偿同步策略与「旧推送角标不能覆盖新已读」的规则，并用 TypeScript 实现计划器与角标合并，复盘一次关掉通知的用户永远看不到红点的事故。https://plumephp.com/inet-client-social-10-2-multi-device-read/Sun, 18 Oct 2026 19:00:00 +0800https://plumephp.com/inet-client-social-10-2-multi-device-read/同一个「已读」布尔值在两台设备之间一定会打架：甲读完 3 条，乙把整个会话标成已读，新消息到达后两边都显示已读。本节把已读建模为按会话单调前进的位置，用最大位置合并多端状态，处理回执失败重试与服务端总数覆盖，并复盘一次无位置回执把新消息误标已读的事故。https://plumephp.com/inet-client-social-10-1-unread-merge/Sun, 18 Oct 2026 15:30:00 +0800https://plumephp.com/inet-client-social-10-1-unread-merge/点赞、评论、关注与系统通知四种来源的未读数，为什么不能用一个 total += 1 维护。本节用服务端水位 ackSeq 与事件 id 划清「已计数」和「端上待确认」，给出按类型分组、99+ 上限与幂等合并的 TypeScript 实现，并复盘一次旧快照把角标从 4 覆盖回 3 的线上问题。https://plumephp.com/inet-client-social-09-3-block-immediate/Sun, 18 Oct 2026 14:00:00 +0800https://plumephp.com/inet-client-social-09-3-block-immediate/拉黑是安全操作，端上必须先隐藏再同步：信息流、详情、评论、搜索、私信五处都要在请求发出前生效。本节实现 pending/active/failed 三态 BlockStore、失败不回显的重试、只增不减的服务端快照合并，并复盘一次等确认导致弱网下仍能看到对方内容的事故。https://plumephp.com/inet-client-social-09-2-visibility-rules/Sun, 18 Oct 2026 10:30:00 +0800https://plumephp.com/inet-client-social-09-2-visibility-rules/可见性规则在端上只能表达为提示与预判，最终仍以服务端为准。本节把公开、关注可见、好友可见、仅自己可见映射为带置信度的预判，给出可测试的首屏骨架、服务端纠正、拒绝后清理缓存与受众提示的完整实现，并复盘一次预判过宽导致缓存标题与封面提前泄露的事故。https://plumephp.com/inet-client-social-09-1-follow-graph-cache/Sun, 18 Oct 2026 09:00:00 +0800https://plumephp.com/inet-client-social-09-1-follow-graph-cache/关注、粉丝与互关不是一张布尔表：方向、新鲜度和进行中的变更都要分别记录。本节用带假时钟的 FollowCache 实现四态关系缓存、TTL 降级、乐观关注与回滚，给出关系变化后的列表失效矩阵，并复盘一次把缓存互关当成私信授权、导致错误入口的事故。https://plumephp.com/inet-client-social-08-3-presence-privacy/Sat, 17 Oct 2026 20:30:00 +0800https://plumephp.com/inet-client-social-08-3-presence-privacy/在线状态一旦涉及隐私，就不再是「显示什么」，而是「允许谁看到什么证据」。本节把可见性、关系、拉黑与连接降级组合成一张展示决策表，明确 unknown 与 offline 的差别，给出可运行实现与测试，并复盘一次隐藏在线后仍能从活跃时间反推的事故。https://plumephp.com/inet-client-social-08-2-typing-throttle/Sat, 17 Oct 2026 19:00:00 +0800https://plumephp.com/inet-client-social-08-2-typing-throttle/输入中状态不是一次事件，而是一份几秒后自动过期的租约。本节用本地节流、远端超时、会话隔离与停发条件，把「正在输入」压成低频心跳，给出丢包、乱序、进程被杀与幽灵输入四类故障下的可运行实现与假时钟测试，并复盘一次每键发送导致群聊广播风暴、指示器随机闪烁的事故。https://plumephp.com/inet-client-social-08-1-presence-approximation/Sat, 17 Oct 2026 15:30:00 +0800https://plumephp.com/inet-client-social-08-1-presence-approximation/客户端看到的「在线」不是事实，而是一次带衰减的观测。本节把 presence 拆成最后活跃时间、online/away/offline/unknown 四态与 TTL 过期，给出窗口判定、下一次转换时间与最后活跃文案的纯函数实现，并复盘一次把 socket 连通当成在线、导致用户对着「幽灵在线」发消息的事故。https://plumephp.com/inet-client-social-07-3-gap-detection/Sat, 17 Oct 2026 14:00:00 +0800https://plumephp.com/inet-client-social-07-3-gap-detection/重连后只拉最新一条，会让中间的缺口永远补不上。本节用已收序列号维护连续高水位，按批生成补拉区间，把补拉结果与实时推送合并去重，并复盘一次「重连只同步最新消息」导致的历史消息永久丢失，说明补拉报告如何表达未完成状态，以及服务端历史过期后端上必须承认的边界。https://plumephp.com/inet-client-social-07-2-dedupe-order/Sat, 17 Oct 2026 10:30:00 +0800https://plumephp.com/inet-client-social-07-2-dedupe-order/同一条消息可能因重连补发、重试或多路径到达两次，晚到的消息也可能插到已经读过的位置。本节区分消息 id 与序列号，给出端上的去重集合、乱序缓冲窗口与冲突判定，并用可运行代码证明端上只能保证最终有序，不能保证实时有序，还会说明窗口边界与冲突上报为什么决定了故障是否可观测。https://plumephp.com/inet-client-social-07-1-reconnect-backoff/Sat, 17 Oct 2026 09:00:00 +0800https://plumephp.com/inet-client-social-07-1-reconnect-backoff/断线在移动端是常态。本节把重连拆成失败分类、指数退避、抖动与上限四个决策，给出一个可测试的纯函数退避模块，并复盘一次服务端重启后所有客户端同时重连、把网关打满的事故，最后说明网络从离线恢复时为什么要立即重连并清零计数，以及如何用确定随机源验证风暴是否真的被摊开。https://plumephp.com/inet-client-social-06-3-realtime-degrade/Fri, 16 Oct 2026 20:30:00 +0800https://plumephp.com/inet-client-social-06-3-realtime-degrade/实时通道会断，产品不能跟着白屏。本节把连接状态映射成角标、自动插入、输入中、评论框与在线状态五种能力，给出暂停、手动、排队、禁用四类降级模式与恢复顺序，让页面在弱网下仍能读缓存、写草稿、手动刷新；队列只接受可幂等重放的写操作，并复盘一次整页空白事故。https://plumephp.com/inet-client-social-06-2-connection-lifecycle/Fri, 16 Oct 2026 19:00:00 +0800https://plumephp.com/inet-client-social-06-2-connection-lifecycle/连接不是一个 connected 布尔值，而是 idle、connecting、open、reconnecting、closed、failed 之间的迁移。本节用可测试的状态机定义合法迁移、后退钩子、页面切后台与恢复、卸载清理，并复盘旧连接回调把新连接误标为 open 的事故。https://plumephp.com/inet-client-social-06-1-realtime-choice/Fri, 16 Oct 2026 15:30:00 +0800https://plumephp.com/inet-client-social-06-1-realtime-choice/实时选型常被简化成「聊天就上 WebSocket」，但真实约束远不止消息方向。本节把延迟、在线规模、运维能力、二进制与上行频率写成结构化输入，用可测试的打分函数输出推荐、置信度与警告，说明同一份需求为什么允许有两个合理答案，并给出四组场景的分数对照与一次选型回滚复盘。https://plumephp.com/inet-client-social-05-3-rollback-boundary/Fri, 16 Oct 2026 14:00:00 +0800https://plumephp.com/inet-client-social-05-3-rollback-boundary/点赞可以乐观，支付与下单不行。本节按回滚成本把写操作分成四档：即时可逆、可补偿、需服务端确认、绝不能乐观，并给出一个可测试的 TypeScript 判定函数与七类操作的决策表；重点解释为什么资金、库存与对外通知不能靠本地回滚，以及重试策略如何与乐观策略解耦。https://plumephp.com/inet-client-social-05-2-comment-order-draft/Fri, 16 Oct 2026 10:30:00 +0800https://plumephp.com/inet-client-social-05-2-comment-order-draft/评论提交比点赞多出正文、时间顺序、草稿保存与失败重发。本节把一条评论拆成发送中、失败、已确认三态：用客户端 clientId 建占位，按时间正序合并，失败时保留原文与草稿，重试复用同一客户端幂等键，并完整复盘一次超时重试导致的重复评论与丢字事故。https://plumephp.com/inet-client-social-05-1-optimistic-like/Fri, 16 Oct 2026 09:00:00 +0800https://plumephp.com/inet-client-social-05-1-optimistic-like/点赞与收藏看似只是改一个布尔值，真正难的是本地先行之后如何让服务端裁决：绝对计数与增量事件冲突、列表与详情各存一份状态、连点与取消产生乱序响应。本节给出一个带序号与意图层的 TypeScript 状态存储，用假时钟复现乱序响应，并完整复盘一次计数越点越少的线上问题。https://plumephp.com/inet-client-social-04-3-image-format/Thu, 15 Oct 2026 20:30:00 +0800https://plumephp.com/inet-client-social-04-3-image-format/同一张封面图，在支持 AVIF 的手机上清晰又小，在旧 WebView 里却可能直接白屏。本节把能力探测、格式顺序、尺寸变体、压缩参数与版本化 URL 串成一条可测策略：只在解码探测通过时使用新格式，按 DPR 选最小可用变体，解码失败沿降级链回退，并用内容哈希路径保证缓存不会串图。https://plumephp.com/inet-client-social-04-2-resume-upload/Thu, 15 Oct 2026 19:00:00 +0800https://plumephp.com/inet-client-social-04-2-resume-upload/上传到 87% 时进程被系统回收，回来后是从头开始还是接着传？本节把上传会话拆成会话 id、文件指纹、已确认分片清单与过期时间，给出恢复决策表、以服务端为准的对账规则和按错误类型分流的重试策略，并复盘一次本地清单比服务端多、最终拼出缺片文件的事故。https://plumephp.com/inet-client-social-04-1-upload-orchestration/Thu, 15 Oct 2026 15:30:00 +0800https://plumephp.com/inet-client-social-04-1-upload-orchestration/一条 48MB 的视频会把上传器的问题全部放大：分片多大、并发几个、进度条该信哪个数、失败算不算完成。本节用内存传输适配器与可注入时钟实现上传编排器，区分线路进度与已确认进度，并复盘一次进度跑到 100% 而服务端合并失败的事故，给出可测试的完成判定。https://plumephp.com/inet-client-social-03-3-media-placeholder/Thu, 15 Oct 2026 14:00:00 +0800https://plumephp.com/inet-client-social-03-3-media-placeholder/图片把正文撑开的那一刻，CLS 就已经发生。本节把占位盒、首屏媒体优先级、懒加载触发条件与失败降级拆成可计算的纯函数，用固有宽高和可视区域算出布局位移分数，复盘一次信息流图片加载导致误触的抖动事故与修复顺序，并给出与结构化块模型、sanitize 的接口边界。https://plumephp.com/inet-client-social-03-2-sanitize-boundary/Thu, 15 Oct 2026 10:30:00 +0800https://plumephp.com/inet-client-social-03-2-sanitize-boundary/作者正文、运营配置、第三方嵌入的信任级别并不相同。本节把 sanitize 定义为能力边界而不是标签黑名单，给出作者、运营、嵌入三套白名单策略，处理 URL 协议与实体编码绕过，并用测试复盘一次直接 innerHTML 导致的脚本注入事故与修复顺序。https://plumephp.com/inet-client-social-03-1-structured-content/Thu, 15 Oct 2026 09:00:00 +0800https://plumephp.com/inet-client-social-03-1-structured-content/正文不该是一段 HTML 字符串，而是一份可校验、可降级的块文档。本节定义段落、图片、视频、代码、引用五类块与行内标记，给出未知块降级、未来版本拒绝与确定性序列化的 TypeScript 实现，并用测试覆盖迁移、round-trip 与坏字段。https://plumephp.com/inet-client-social-02-3-refresh-policy/Wed, 14 Oct 2026 20:30:00 +0800https://plumephp.com/inet-client-social-02-3-refresh-policy/下拉、轮询、回到前台是三种不同意图的刷新，用同一个定时器处理只会在用户阅读时把列表顶走。本节用一段可运行的 TypeScript 策略模块给出逐触发的判定、刷新合并与节流、锚点位置保护，并复盘一次前后台切换风暴导致的三连请求与列表跳动，给出参数取值的依据。https://plumephp.com/inet-client-social-02-2-dedupe-position/Wed, 14 Oct 2026 19:00:00 +0800https://plumephp.com/inet-client-social-02-2-dedupe-position/分页只保证「不重不漏地取」，端上仍会遇到同一张卡片来自刷新、实时推送与翻页三条路径。本节用带假时钟的 TypeScript 窗口实现已见集合、按时间排序的实时插入、锚点 id 位置恢复与 epoch 乱序丢弃，并复盘一次淘汰条目后「越滑越少」的线上问题。https://plumephp.com/inet-client-social-02-1-cursor-pagination/Wed, 14 Oct 2026 15:30:00 +0800https://plumephp.com/inet-client-social-02-1-cursor-pagination/内容流一旦插入新条目，页码就不再是位置：总数漂移会让第二页重复上一页的卡片，深分页还要求数据库扫过前 N 行。本节用一段可运行的 TypeScript 实现时间戳加 id 的复合游标、开区间翻页与 end-of-feed 判定，并复盘一次热榜刷新导致的重复与漏项事故。https://plumephp.com/inet-client-social-01-3-lab-three-tiers/Wed, 14 Oct 2026 14:00:00 +0800https://plumephp.com/inet-client-social-01-3-lab-three-tiers/客户端实验最怕「测试全绿但线上照错」。本节把验证分成 L1 纯逻辑、L2 进程内流程、L3 本地实时通道三级，用一段可运行的 TypeScript 判定器逐级说明各自能证明什么、不能证明什么，并复盘一次因并发执行时序用例而产生的假绿灯事故。https://plumephp.com/inet-client-social-01-2-lab-first-paint/Wed, 14 Oct 2026 10:30:00 +0800https://plumephp.com/inet-client-social-01-2-lab-first-paint/内容端的第一处架构决定不是选框架，而是决定哪份状态归谁所有。本节把服务端状态、会话状态与瞬时 UI 状态分开，用一段可运行的 TypeScript 实现带游标、去重与淘汰上限的信息流容器，并复盘一次把游标存在组件里、导致返回页面后重复加载的真实事故。https://plumephp.com/inet-client-social-01-1-content-surface/Wed, 14 Oct 2026 09:00:00 +0800https://plumephp.com/inet-client-social-01-1-content-surface/把「回声」的客户端拆成信息流、详情、互动、实时四条消费线，逐条说明每条线需要什么数据、失败时能退到哪里，并用一段可运行的 TypeScript 把四条面的需求写成结构化输出与测试，最后复盘一次四件事混在一个页面里导致状态互相踩踏的真实事故。https://plumephp.com/inet-client-social-toc/Tue, 13 Oct 2026 11:00:00 +0800https://plumephp.com/inet-client-social-toc/《互联网产品的客户端架构·内容、社交与实时互动》的完整目录与学习路径：13 章 39 节从内容端四条消费面讲到信息流、渲染、上传、互动、实时连接、重连补拉、在线状态、关系、通知、审核与搜索，附实验工程、三条阅读路径、数字与版本口径，以及读完应能回答的六个问题。https://plumephp.com/inet-client-social-preface/Tue, 13 Oct 2026 10:00:00 +0800https://plumephp.com/inet-client-social-preface/前言说明卷二在四卷本中的位置、十三章的结构与依赖关系、贯穿案例「回声」的四条内容面、social-client-lab 的目录与三级可运行性，以及代码块三行头、数字口径、错误处理口径与本卷明确的边界，帮助读者决定从哪一章开始读、按什么路径读。https://plumephp.com/inet-client-social-foreword/Tue, 13 Oct 2026 09:00:00 +0800https://plumephp.com/inet-client-social-foreword/卷一讲清楚端上约束之后，真正难的部分才开始：内容要滚动、互动要即时、连接会断。这篇序说明为什么内容、社交与实时互动值得单独成卷，四条消费面共享哪四条核心判断，本卷十三章如何排布、坚持哪些立场、写给哪些读者，以及明确不承诺什么、与卷一如何衔接。