使用者往往需要持续数十甚至数百条消息来完成任务。只是刷新页面、网络掉线或多设备登录都会导致进度丢失。下面给出四个实战方案，帮助你从持久化、断线续传、流式渲染到跨设备同步，全方位解决常见痛点。

刷新不丢、断线能续——持久化与恢复机制

. 场景一：刷新页面对话消失

痛点：使用者聊了半小时却误触 F5。界面一片空白，让人愤怒并直接关闭网页。

解决每次 AI 回复完成，将完整对话序列化存入IndexedDB。

IndexedDB 封装：

import Dexie from 'dexie';const db = new Dexie;不过，db.version.stores({
sessions: 'sessionId。lastUpdated',messages: 'id,sessionId,timestamp',});async function saveMessages {
await db.messages.bulkPut(
messages.map }))
);await db.sessions.put });按理说，}
async function loadSession: Promise {
const cached = await db.messages.where.equals.toArray;return cached.sort=>a.timestamp-b.timestamp);}
useEffect => {
loadSession.n(localMsgs => {
setMessages;fetchFromServer.n(serverMsgs => {
if {
setMessages);saveMessages;}
})，});},)，

. 场景二：SSE 断线续传

痛点：大模型流式输出使用 SSE 时网络不稳定导致连接断开，使用者想继续已有内容而不是重新生成。

SSE 原生支持断线续传: 浏览器在重连时会自动发送 头。

服务端实现：

• 每个数据块携带 id。
• 接收到

前端实现:

class ResilientEventSource {
private url:string;private lastId:string='';private retryCount=0;private maxRetries=5;private eventSource:EventSource|null=null;connect=>void) {
const urlWithId = this.lastId?`${this.url}?lastEventId=${this.lastId}` : this.url;this.eventSource = new EventSource;this.eventSource.onmessage = event=>{
const data=JSON.parse;
按理说，if this.lastId=data.id;if onMessage;this.retryCount=0;}，this.eventSource.onerror=e=>{
this.eventSource?.close，const delay=Math.min,30000);setTimeout=>{
this.retryCount++;if{
console.log;this.connect;}
},delay)，};说起来，}
disconnect{this.eventSource?.close，怎么说呢，this.eventSource=null;}
}

. 流式渲染的状态管理进阶

痛点：SSE 高频推送时如果直接做 .push。整个虚拟滚动列表都会重渲染，即使其他消息没变。

使用归一化结构：

// 状态结构
interface ChatState{
entities:{:Message};order:string;怎么说呢，//仅存 ID 顺序
}
// 流式更新时
const updateStreamingMessage==>{
setState(prev=>({
...prev。entities:{...prev.entities,:{...prev.entities,content:prev.entities.content+deltaContent}}
}));}，

结合 Valtio:

import {proxy,useSnapshot} from 'valtio';const store=proxy;function MessageItem {
const snap=useSnapshot;const msg=snap.entities;return 

{msg.content}
}

. 跨设备同步

痛点：Pc 与手机同时登录，本地 IndexedDB 不互通。若无服务端全量存储，无法实现无缝切换。

MUST 使用服务端全量存储，通过 sessionId 拉取。可通过 WebSocket 或轮询增量同步，实现跨设备无缝体验。

. 📖 下一篇预告

👋 最终一篇硬核架构篇，请关注我别错过！

• 关注 👉 获取更新推送🔔
• 转发 ➡️ 给需要的同事或朋友分享吧！其实，
• 点赞 👍 + 收藏 ⭐ + 评论 💬 三连走起。让好内容流动起来，