当前位置: 首页 > web >正文

实现对deepseek流式返回的json数据,进行逐字解析并实时渲染

要实现对 流式返回的 JSON 数据(如 DeepSeek 的 SSE 流式响应)进行 逐字解析并实时渲染,而不是等待整个 JSON 完整加载后再处理,需要明确以下目标和问题:


文章目录

    • 核心目标
    • 技术方案概述
      • 1. 使用 `fetch` + `ReadableStream` 接收流式数据
      • 2. 读取 chunk 并拼接到 buffer 中
    • 关键难点:如何解析未完成的 JSON?
      • 方法一:**按行或分隔符切分 chunks**
      • 方法二:**构建 JSON 增量解析器**
    • 实时渲染建议
    • 示例:整合完整流程
    • 注意事项

核心目标

  • 逐步接收数据流(chunk by chunk)
  • 逐步拼接字符串
  • 逐步解析 JSON(部分解析)
  • 实时渲染/更新 UI

技术方案概述

1. 使用 fetch + ReadableStream 接收流式数据

const response = await fetch('https://api.deepseek.com/stream-endpoint', {method: 'POST',headers: {'Content-Type': 'application/json'},body: JSON.stringify({prompt: '讲一个故事'})
});const reader = response.body.getReader();
const decoder = new TextDecoder();
let buffer = '';

2. 读取 chunk 并拼接到 buffer 中

while (true) {const { done, value } = await reader.read();if (done) break;buffer += decoder.decode(value, { stream: true });// 尝试解析 JSON 或提取部分内容processBuffer(buffer);
}

关键难点:如何解析未完成的 JSON?

JSON 是结构化的文本格式,如果只收到一部分内容(比如 { "text": "Hello" } 只收到 { "text": "Hel),直接使用 JSON.parse() 会报错。

方法一:按行或分隔符切分 chunks

假设 DeepSeek 返回的是 多段 JSON 对象(每行一个完整 JSON),可以按 \n 分割:

function processBuffer(buffer) {const lines = buffer.split('\n');lines.forEach(line => {if (line.trim() === '') return;try {const json = JSON.parse(line);console.log(json.text); // 实时获取 text 字段updateUI(json.text);    // 实时渲染到页面buffer = '';             // 清空已处理部分} catch (e) {// JSON 不完整,保留 buffer 继续拼接}});
}

方法二:构建 JSON 增量解析器

如果你的数据是一个完整的 JSON(例如 {"content": "Hel..."} 但被分片传输),可以尝试使用增量解析库,如:

  • jsonparse(Node.js / 浏览器可用)

示例:

import sax from 'jsonparse';const parser = new sax.Parser();parser.onValue = function (value) {if (this.stack.length === 1 && this.key === 'content') {updateUI(value); // 实时渲染 content 内容}
};function processBuffer(buffer) {try {parser.write(buffer);} catch (e) {// 忽略不完整 JSON 错误,继续等待更多数据}
}

实时渲染建议

你可以将每次解析出的内容追加到 DOM 中,模拟“打字效果”:

function updateUI(text) {const container = document.getElementById('output');container.textContent += text;container.scrollTop = container.scrollHeight; // 滚动到底部
}

示例:整合完整流程

async function startStreaming() {const response = await fetch('https://api.deepseek.com/stream-endpoint', {method: 'POST',headers: {'Content-Type': 'application/json'},body: JSON.stringify({ prompt: '讲一个故事' })});const reader = response.body.getReader();const decoder = new TextDecoder();let buffer = '';const parser = new sax.Parser();parser.onValue = function (value) {if (this.stack.length === 1 && this.key === 'content') {updateUI(value);}};while (true) {const { done, value } = await reader.read();if (done) break;buffer += decoder.decode(value, { stream: true });try {parser.write(buffer);buffer = ''; // 成功解析后清空 buffer} catch (e) {// JSON 不完整,保留 buffer 等待下一次拼接}}parser.close();
}function updateUI(text) {const container = document.getElementById('output');container.textContent += text;
}

注意事项

项目建议
后端支持确保接口返回的是 text/event-stream 类型,并开启 CORS
错误处理添加网络中断、JSON 解析失败等异常捕获机制
性能优化避免频繁操作 DOM,可使用 requestAnimationFrame 或节流
安全性如果涉及用户输入,需做 XSS 过滤
完整性校验最终仍需在 done 后对最终结果做一次完整 JSON 解析
http://www.xdnf.cn/news/10871.html

相关文章:

  • 优化 Spring Boot API 性能:利用 GZIP 压缩处理大型有效载荷
  • Golang 依赖注入:构建松耦合架构的关键技术
  • Silky-CTF: 0x02靶场
  • 信创时代下的信息化项目验收:企业如何应对国产化挑战?
  • 期货反向跟单运营逻辑推导思路
  • 持续领跑中国异地组网路由器市场,贝锐蒲公英再次登顶销量榜首
  • JSON to Excel 3.0.0 版本发布 - 从Excel插件到Web应用的转变
  • 数据驱动在线教育平台优化:用数据帮你变成“教书匠+数据控”
  • 口碑对比:杭州白塔岭画室和燕壹画室哪个好?
  • 汇编语言基础: 搭建实验环境
  • DMC-E 系列总线控制卡----雷赛板卡介绍(一)
  • 数据安全合规体系构建的“三道防线“
  • P1438 无聊的数列/P1253 扶苏的问题
  • 深度学习与特征交叉:揭秘FNN与SNN在点击率预测中的应用
  • 多线程编程的黄金三角模型
  • [yolov11改进系列]基于yolov11使用图像去雾网络UnfogNet替换backbone的python源码+训练源码
  • pytorch基本运算-导数和f-string
  • Easyui悬停组件
  • nav2笔记-250603
  • 国产高性能pSRAM选型指南:CSS6404LS-LI 64Mb QSPI伪静态存储器
  • 【网络安全 | 信息收集】灯塔(资产收集工具)安装教程
  • 【QT】`QTextCursor::insertText()`中插入彩色文本
  • Windows清理之后,资源管理器卡顿-解决方法
  • 【开源工具】Python+PyQt5打造智能桌面单词记忆工具:悬浮窗+热键切换+自定义词库
  • 【论文解读】FeINFN|Fourier-enhanced Implicit Neural Fusion Network for Multispectral
  • 黑马Java面试笔记之 消息中间件篇(Kafka)
  • Linux 软件安装方式全解(适用于 CentOS/RHEL 系统)
  • 【25.06】FISCOBCOS使用caliper自定义测试 通过webase 单机四节点 helloworld等进行测试
  • 多线程环境中,如果多个线程同时尝试向同一个TCP客户端发送数据,添加同步机制
  • 新版 Xcode 中 CoreData 模型编辑器显示拓扑图功能取消的替代方案