SSE + Markdown 流渲染：实现打字机效果

在即时聊天、AI助手等场景中，流式数据渲染已成为提升用户体验的关键技术。当服务器在1秒内返回十几条数据时，传统的一次性渲染会导致内容闪现问题。通过SSE(Server-Sent Events)协议配合Markdown流渲染，我们能够实现类似DeepSeek的逐字打印效果，让信息呈现更符合人类阅读节奏。

SSE协议相比WebSocket具备单向通信、自动重连、轻量化三大优势。通过EventSource接口建立连接后，服务器可持续推送带有Markdown格式的文本流：

“`javascript
const eventSource = new EventSource(‘/stream’);
eventSource.onmessage = (event) => {
typewriter.addToQueue(event.data);
};
“`

核心难点在于流数据的时序控制。我们创建Typewriter类实现队列管理，通过递归调用解决快速数据冲刷问题：

“`typescript
class Typewriter {
private queue: string[] = [];
private consuming = false;

constructor(private onConsume: (str: string) => void) {}

// 添加分段内容到队列
public addToQueue(str: string) {
this.queue.push(…str.split(”));
}

// 逐字消费队列
private consume() {
if (this.queue.length === 0) return;

this.onConsume(this.queue.shift()!);
setTimeout(() => this.consume(), 50); // 控制打字速度
}
}
“`

传统innerHTML全量更新会导致光标闪烁和样式丢失。我们采用DOM增量更新方案：
使用marked.js解析Markdown语法
通过正则表达式动态过滤控制字符
插入临时光标元素实现闪烁效果

“`javascript
// 动态更新内容区域
const renderMarkdown = (content) => {
const html = marked.parse(content + ‘|‘);
contentEl.innerHTML = html;
};
“`

改进原版实现的done方法，新增双重校验机制确保渲染完整性：
“`typescript
public done(callback?: () => void) {
const checkQueue = () => {
if (this.queue.length === 0) {
callback?.();
} else {
setTimeout(checkQueue, 100);
}
}
checkQueue();
}
“`

通过多层正则处理保证Markdown渲染稳定性：
“`regex
// 过滤特殊字符
/(\{1,3}|_{1,2}|~~|`)/g

// 保留换行符
.replace(/\n/g, ‘
‘)
“`

防抖机制控制渲染频率
DOM片段缓存技术
请求中断时自动回收资源