西宁市网站建设高端关于网站建设的调研报告

在 UniApp 中实现流式 AI 聊天功能

介绍

在现代 Web 开发中，流式 API 响应能够显著提升用户体验，尤其是在与 AI 聊天接口进行交互时。本文将介绍如何在 UniApp 中使用 Fetch API 实现一个流式响应的 AI 聊天功能，包括实时更新聊天内容和滚动到底部的功能。

实现

用 Markdown 格式展示 AI 输出的内容

<!-- index.vue -->
<view v-else class="bot-message" :key="'bot-msg-' + index"><view class="avatar-container"><imageclass="message-avatar"src="/static/images/icon_robot.png"/></view><view class="message-content bot-bubble"><u-loading-iconv-if="isSendLoading &&index == chatMessages.length - 1 &&!getText(message.content)"></u-loading-icon><text v-else>// 用Markdown格式展示<AiMarkdownViewerclass="message-text":content="message.content"/><!-- {{ message.content || '服务异常，请重试' }} --></text></view>
</view><!-- AiMarkdownViewer.vue -->
// 使用showdown插件
<template><viewclass="markdown-container"v-html="parsedContent"ref="markdownContainer"></view>
</template><script>
import showdown from 'showdown'export default {name: 'AiMarkdownViewer',props: {content: {type: String,required: true,},},data() {return {converter: new showdown.Converter({tables: true,tasklists: true,simplifiedAutoLink: true,strikethrough: true,extensions: [this.tableEnhancement()],}),}},computed: {parsedContent() {if (this.content) {const processed = this.content.replace(/^```markdown\n([\s\S]*?)\n```$/gm, // 添加m标志处理多行(match, content) => {return content})return this.converter.makeHtml(processed)} else {return '微警灌云还在学习中，请您咨询当地派出所'}},},methods: {tableEnhancement() {return {type: 'output',filter: (text) => {// 为表格添加容器和样式类return text.replace(/<table>/g,'<div class="table-wrapper"><table class="data-table">').replace(/<\/table>/g, '</table></div>').replace(/<td>/g, '<td class="data-cell">').replace(/<th>/g, '<th class="header-cell">')},}},},
}
</script>
<style scoped lang="scss">
.markdown-container {margin: 0 auto;// padding: 20px;width: 100%;font-size: 26rpx;line-height: 1.7;color: #374151;white-space: normal; 
}
/deep/ {.table-wrapper {overflow-x: auto;margin: 1em 0;border: 1px solid #ebeef5;border-radius: 4px;box-shadow: 0 2px 12px 0 rgba(0, 0, 0, 0.1);.data-table {width: 100%;min-width: 600px;border-collapse: collapse;font-size: 28rpx;line-height: 1.5;.header-cell {background-color: #f8f9fa;color: #606266;font-weight: 600;padding: 12px 16px;border-bottom: 2px solid #ebeef5;white-space: nowrap;}.data-cell {padding: 12px 16px;border-bottom: 1px solid #ebeef5;color: #606266;min-width: 80px;&:empty::before {content: ' ';display: inline-block;width: 1px;}}tr:hover {background-color: #f5f7fa;}tr:nth-child(even) {background-color: #fafafa;}td:first-child,th:first-child {border-left: 1px solid #ebeef5;}td:last-child,th:last-child {border-right: 1px solid #ebeef5;}}}
}
/deep/ {h1,h2,h3,h4,h5,h6 {margin: 1em 0;font-weight: 600;color: #1f2937;&:not(h1) {border-bottom: 0.5px solid #e5e7eb;padding-bottom: 0.4em;}}h1 {font-size: 1.5em;}h2 {font-size: 1.4em;}h3 {font-size: 1.3em;}h4 {font-size: 1.2em;}h5 {font-size: 1.1em;}h6 {font-size: 1em;}// 列表样式ul,ol {margin: 0.8em 0;padding-left: 1.5em;li {margin: 0.4em 0;&::marker {color: #6b7280;}}}// 分割线hr {border: 0;height: 0.5px;background: #e5e7eb;margin: 1.5em 0;}// 代码块pre {background-color: #f9fafb;border-radius: 8px;padding: 1em;margin: 1.2em 0;border: 0.5px solid #e5e7eb;code {font-family: 'JetBrains Mono', Consolas, monospace;font-size: 13px;color: #374151;line-height: 1.6;}}// 行内代码code:not(pre code) {background-color: #f3f4f6;padding: 0.2em 0.4em;border-radius: 4px;font-size: 0.9em;color: #dc2626;}// 引用块blockquote {border-left: 3px solid #e5e7eb;margin: 1em 0;padding: 0.5em 1em;color: #4b5563;background-color: #f8fafc;border-radius: 0 4px 4px 0;}// 链接a {color: #3b82f6;text-decoration: none;&:hover {text-decoration: underline;}}
}
/deep/ {pre {code {display: block;width: 100%;overflow-x: auto;}}
}
</style>

我们需要使用 Fetch API 向 AI 聊天服务发送请求，并读取其流式响应。以下是实现的关键代码段。

async getAIChat(params, aiMessage) {  // 使用 Fetch API 进行流式请求  const response = await fetch(`${config.aiBaseUrl}/api/v1/chat/completions`, {  method: 'POST',  headers: {  Authorization: `Bearer ${config.apikey}`,  'Content-Type': 'application/json',  },  body: JSON.stringify(params),  });  // 检测响应状态  if (!response.ok) {  const errorData = await response.json();  throw new Error(errorData.message || '请求失败');  }  this.isSendLoading = false; // 更新加载状态  // 使用 response.body.getReader() 开始逐块读取流式响应，使用 UTF-8 编码解码数据。const reader = response.body.getReader();  const decoder = new TextDecoder('utf-8');  let done = false;  // 用于流式读取数据  while (!done) {  const { done: readerDone, value } = await reader.read();  done = readerDone;  if (value) {  // 逐块解码并拼接  const chunkText = decoder.decode(value, { stream: !done });  // 解析接收到的 JSON 数据  const lines = chunkText.split('\n'); // 按行分割  lines.forEach((line) => {  if (line.startsWith('data:')) {  const jsonString = line.substring(5).trim();  try {  const jsonData = JSON.parse(jsonString);  // 提取内容部分  const content = jsonData.choices?.[0]?.delta?.content || '';  if (content) {  aiMessage.content += content; // 更新聊天内容  // 清除开头的换行符  if (aiMessage.content.startsWith('\n')) {  aiMessage.content = aiMessage.content.slice(1);  }  // 刷新页面渲染  this.$forceUpdate(); // 确保视图更新  // 滚动到底部  this.$nextTick(() => {  this.scrollToBottom(); // 调用滚动到底部的方法  });  }  } catch (error) {  console.error('Error parsing JSON:', error);  }  }  });  }  }  
}