当前位置：首页 > news >正文

避坑指南：若依集成通义千问时，如何处理流式响应和HTML样式渲染？

news 2026/6/12 18:13:21

若依框架集成通义千问的流式响应与HTML渲染实战指南

在前后端分离架构中集成AI大模型能力已成为提升系统智能化的关键路径，但开发者常会遇到两个技术痛点：流式响应数据的实时处理与富文本内容的样式渲染。本文将深入剖析若依（RuoYi）框架与通义千问整合过程中的核心解决方案，通过2000+字实战代码解析，带您掌握SSE流式传输优化与Markdown动态渲染的关键技术。

1. 流式响应(SSE)的工程化实现

通义千问API的流式响应特性允许数据分块传输，这对提升用户体验至关重要。在若依的Spring Boot后端中，我们通过Reactor编程模型实现高效的事件流处理：

// 服务层流式处理核心代码 @Override public Flux<String> sendMessageAndGetFluxMessage(PyMessage pyMessage) throws Exception { Flowable<ApplicationResult> result = AiUtil.getTyQwFluxMessage(pyMessage.getText()); return Flux.from(result) .map(data -> data.getOutput().getText()) .publishOn(Schedulers.boundedElastic()); }

关键实现要点：

使用Flowable处理来自通义千问的响应流
通过publishOn指定弹性线程池避免阻塞
控制器层设置MediaType.TEXT_EVENT_STREAM_VALUE响应类型

前端Vue组件通过EventSource API建立持久连接：

const response = await fetch(API_URL, { method: "post", headers: { "Authorization": "Bearer " + getToken(), "Content-type": "application/json" }, body: JSON.stringify(obj) }); const reader = response.body.getReader(); const decoder = new TextDecoder(); while (true) { const { done, value } = await reader.read(); if (done) break; // 流数据处理逻辑... }

2. 动态内容渲染的渐进式优化策略

AI返回的Markdown内容需要经过两次优化处理：

2.1 实时渲染优化（optimizeMessage）

在流式传输过程中进行基础格式处理：

function optimizeMessage() { currentMessageText = currentMessageText .replace(/---/g, "<hr>") .replace(/(#{3,})([^\*]*)\*\*([^\*]*)\*\*/g, "<h3><strong>$2$3</strong></h3>") .replace(/\*\*([^\n\*]+)\*\*/g, "<strong>$1</strong>") .replace(/\n/g, "<br>"); }

2.2 终局渲染优化（optimizeMessageAfterEnd）

在数据接收完成后执行深度转换：

function optimizeMessageAfterEnd() { currentMessageText = currentMessageText .replace(/- ((?:(?!<br>)(?!<hr>)(?!<h3>)(?!- ).)+)/g, "<li>$1</li>") .replace(/<\/li><li>/g, "</li><br><li>") .replace(/(。)\s*(<li>)/g, "$1<br>$2"); }

样式处理对比表：

处理阶段	主要功能	典型转换	技术挑战
实时渲染	基础格式处理	加粗→`<strong>`	避免过度处理未完整数据
终局渲染	复杂结构转换	`- 条目`→`<li>`	处理嵌套结构和特殊字符

3. 安全渲染与数据持久化方案

3.1 Vue中的安全渲染

使用v-html指令时需要特别注意XSS防护：

<div class="chat-text" v-html="message.text"></div>

防护措施：

后端接口对特殊字符进行编码
前端使用DOMPurify等库进行二次过滤
避免直接渲染用户输入内容

3.2 数据库存储优化

MySQL存储HTML内容时的转义处理方案：

// 前端编码 copyCurrentBotMessage.text = encodeURIComponent(copyCurrentBotMessage.text); // 后端解码（MyBatis处理层） @TableField(value = "text", jdbcType = JdbcType.VARCHAR) private String text; // 直接存储HTML内容

性能优化建议：

对频繁更新的消息内容使用单独的表分区
对大文本字段设置合适的字符集（推荐utf8mb4）
建立消息创建时间的索引提升查询效率

4. 工程实践中的异常处理机制

4.1 流式中断恢复

实现断线重连的健壮性方案：

let retryCount = 0; const MAX_RETRY = 3; async function connectStream() { try { const response = await fetch(API_URL, options); // ...处理流数据 retryCount = 0; // 重置重试计数器 } catch (error) { if (retryCount < MAX_RETRY) { retryCount++; setTimeout(connectStream, 1000 * retryCount); } } }

4.2 内容渲染容错

建立渲染异常的回退机制：

function safeRender(content) { try { return optimizeContent(content); } catch (e) { console.error('渲染失败:', e); return `<div class="error">${escapeHtml(content)}</div>`; } }

典型错误场景处理：