1、智能体项目里与AI大模型对话的时候，需要从后端的流式接口里取数据并实现打字机渲染效果。这里涉及到 Markdown 格式的渲染，所以需要配合 marked.js 实现，安装 marked.js ：
npm install marked引用：
import { marked } from 'marked';2、调用后端流式接口，并处理获取到的数据
// 建立连接
createSseConnect(){
let token = '1215421542125'
let that = this;
// 创建一个 AbortController 实例
that.abortController = new AbortController();
//接口请求参数
let sendData = {
message: that.currSendValue,
modelId:'1',
}
// 请求配置
const config = {
method: "post",
headers: {
"Content-Type": "application/json",
Accept: "text/event-stream",
clientid: "112121212121212121212",
Authorization: "Bearer " + token, // 根据实际情况获取 token
},
body: JSON.stringify(sendData),
signal: that.abortController.signal, // 将 AbortController 的 signal 传递给 fetch
};
let url = base.url + '/zntdata/stream';
// 发起请求
let thinkingTime = true;
fetch(url, config)
.then((response) => {
const reader = response.body.getReader();
const decoder = new TextDecoder("utf-8");
let buffer = "";
that.currSendValue = ''
// 处理接收到的消息
function processMessage(message) {
message = message.split("data:")[0];
const newChars = message.split("");
//解析深度思考
if (message.includes("<think>")) {
thinkingTime = true;
}
if (message.includes("</think>")) {
thinkingTime = false;
}
if (thinkingTime) {
that.charQueue2.push(...newChars);
} else {
that.charQueue.push(...newChars);
}
if (message.includes("[DONE]")) {
that.dialogId = message.substring(9)
}
// 启动打字机效果（如果尚未启动）
if (!that.isTyping) {
that.startTyping();
}
return false;
}
// 读取流式数据
function readStream() {
reader
.read()
.then(({ done, value }) => {
if (done) {
console.log("Stream ended",value);
return;
}
// 解码数据并添加到缓冲区
buffer += decoder.decode(value);
// 处理完整的事件 -- 非统一处理方法，需根据业务需求和接口数据格式处理
while (buffer.includes("data:")) {
if ( buffer.includes("[DONE]")) {
that.dialogId =
buffer.substring(buffer.indexOf('id:')+3).replaceAll('\n','')
}
const eventEndIndex = buffer.indexOf("data:");
let eventData = buffer.slice(0,eventEndIndex);
buffer = buffer.slice(eventEndIndex+5);
eventData = eventData.substring(0,eventData.lastIndexOf('\n\n'))
const message = eventData;
if (eventData) {
if (processMessage(message)) return;
}
}
// 继续读取
readStream();
}).catch((err) => {
console.error("Stream error:", err);
const lastQuestionIndex = that.dialogueList.length-1
that.dialogueList[lastQuestionIndex].content = that.dialogueList[lastQuestionIndex].content + '出错了，暂时无法回答您的问题，请稍后再试。'
});
}
// 开始读取流
readStream();
})
},
// 启动打字机效果
startTyping() {
const that = this;
that.isTyping = true;
const lastQuestionIndex = that.dialogueList.length-1
// 初始间隔时间
let intervalTime = 30; // 初始速度为 30ms
const minIntervalTime = 5; // 最小间隔时间，防止速度过快
const acceleration = 0.9; // 每次加速的比例（0.9 表示每次间隔时间减少 10%）
// 清除已有定时器
if (that.typingInterval) clearInterval(that.typingInterval);
// 定义打字机效果函数
function typeCharacter() {
if (that.charQueue.length === 0 && that.charQueue2.length === 0) {
clearInterval(that.typingInterval);
that.isTyping = false;
return;
}
if (that.charQueue2.length > 0) {
if (that.dialogueList[lastQuestionIndex].content == '正在思考中...') {
that.dialogueList[lastQuestionIndex].content = ''
}
// 取出一个字符并更新界面
let char = that.charQueue2.shift();
if (char) {
that.thinkText += char;
}
that.dialogueList[lastQuestionIndex].thinkText = marked.parse(that.thinkText) //渲染Markdown格式
}
if (that.charQueue.length > 0) {
let char = that.charQueue.shift();
if (char) {
that.answerWithFlow += char;
}
that.dialogueList[lastQuestionIndex].content = marked.parse(that.answerWithFlow) //渲染Markdown格式
}
// 滚动到底部
that.scrollToSending();
// 加速逻辑：减少间隔时间
intervalTime = Math.max(minIntervalTime, intervalTime * acceleration);
clearInterval(that.typingInterval); // 清除旧的定时器
that.typingInterval = setInterval(typeCharacter, intervalTime); // 设置新的定时器
}
// 启动打字机效果
that.typingInterval = setInterval(typeCharacter, intervalTime);
},
//保持最后一段对话实时出现在视口最下面
scrollToSending() {
this.$nextTick(() => {
if (this.$refs.dialogueBox) {
this.$refs.dialogueBox.scrollTop =
this.$refs.dialogueBox.scrollHeight +
this.$refs.dialogueBox.offsetHeight;
}
});
},
3、渲染数据。要保持Markdown的格式输出，不能直接使用花括号{{}}渲染数据，需要结合v-html使用。
以上就能实现逐字渲染的一个AI大模型对话需求
