登录/ 注册
 找回密码
 立即注册
关闭

CSDN热搜

程序园 精品问答 技术交流 资源下载
返回列表 发新帖
首页 › 业界区 › 业界 ›使用fetchEventSource构建高效AI智能助手：文件搜索场景 ...

使用fetchEventSource构建高效AI智能助手：文件搜索场景的完整实现与深度解析

胁冉右 6 小时前
猛犸象科技工作室:网站开发，备案域名，渗透，服务器出租，DDOS/CC攻击，TG加粉引流
使用fetchEventSource构建高效AI智能助手：文件搜索场景的完整实现与深度解析

在当今AI技术飞速发展的浪潮中，如何将大模型的能力无缝集成到企业应用中，成为每个开发者面临的挑战。今天，我将分享一个基于fetchEventSource技术构建的AI智能文件搜索助手的完整实现，该组件已在企业级文档管理系统中成功应用，显著提升了用户检索效率。我们将深入剖析其技术实现，包括流式响应、SSE通信、Markdown渲染等核心功能。
一、技术背景：为什么选择SSE与fetchEventSource

在实现AI对话类应用时，我们通常面临两种技术路线选择：

  • WebSocket：双向全双工通信，适合实时交互场景
  • Server-Sent Events (SSE)：单向服务器推送，轻量级实现
对于AI助手这类服务器持续生成内容，客户端只需接收的场景，SSE具有明显优势：

  • 基于HTTP协议，无需特殊协议支持
  • 自动重连机制
  • 简单的消息格式
  • 浏览器原生支持
而@microsoft/fetch-event-source库则为我们提供了现代化、Promise风格的SSE API封装，相比原生EventSource具有更灵活的配置和控制能力。
二、功能需求与产品设计

我们的AI智能文件搜索助手需要实现以下核心功能：

  • 自然语言搜索：用户通过对话式提问搜索文件
  • 流式响应：AI生成内容时逐步展示，提升用户体验
  • 相关文件展示：搜索结果附带相关文件推荐
  • 历史记录管理：记录并展示用户最近的搜索记录
  • 富文本支持：支持Markdown、数学公式等复杂内容渲染
  • 文件预览集成：点击文件可直接查看内容
三、核心代码实现：从设计到落地

1. 组件结构与状态管理

首先，我们定义组件的核心数据结构：
  1. export default class AiIntelligentSearch extends Vue {
  2.   private searchQuery = ''; // 用户输入的搜索内容
  3.   private loading = false; // 加载状态
  4.   private recentSearches = [] as ISearchInfo[]; // 最近搜索记录
  5.   private searchFileList: Array<{ // 搜索结果列表
  6.     question: string;
  7.     content: string;
  8.     count: number;
  9.     fileList: IFile[] | Array;
  10.   }> = [];
  11.   private selectedTag = -1; // 选中的历史记录标签
  12.   private fileListStatus: { [key: number]: boolean } = {}; // 文件列表展开/收起状态
  13.   // ...其他状态
  14. }
复制代码
2. 流式响应实现：fetchEventSource深度应用

核心在于aiStreamSearchFileList方法，它使用fetchEventSource实现服务器推送：
  1. async aiStreamSearchFileList() {
  2.   const ctrl = new AbortController(); // 用于中断请求
  3.   
  4.   try {
  5.     await fetchEventSource(process.env.VUE_APP_BASE_URL + '/api/aiStreamSearchFileList', {
  6.       headers: {
  7.         'Content-Type': 'application/json',
  8.         Accept: 'text/event-stream',
  9.       },
  10.       body: JSON.stringify({
  11.         limit: 10,
  12.         offset: 1,
  13.         st: this.searchQuery.trim() + '',
  14.         sort: 0,
  15.         sortType: 1,
  16.         fileAppCode: 'file_management',
  17.       }),
  18.       method: 'POST',
  19.       signal: ctrl.signal, // 传递信号以支持中断请求
  20.       openWhenHidden: true, // 页面退至后台时保持连接
  21.       
  22.       // 连接建立回调
  23.       onopen: async (response) => {
  24.         if (!response.ok) {
  25.           console.error('连接失败:', response.statusText);
  26.           ctrl.abort();
  27.         }
  28.       },
  29.       
  30.       // 收到消息回调
  31.       onmessage: (event) => {
  32.         try {
  33.           const data = JSON.parse(event.data);
  34.           if (data) {
  35.             if (data.status !== 'completed') {
  36.               // 处理流式数据
  37.               if (data.choices && data.choices[0].delta) {
  38.                 const content = data.choices[0].delta.content;
  39.                 if (content) {
  40.                   // 将内容追加到最新的搜索结果
  41.                   if (this.searchFileList.length > 0) {
  42.                     this.searchFileList[this.searchFileList.length - 1].content += content;
  43.                   }
  44.                 }
  45.               }
  46.               // 强制更新视图，显示最新内容
  47.               this.$forceUpdate();
  48.             } else {
  49.               // 处理完成状态
  50.               const lastItem = this.searchFileList[this.searchFileList.length - 1];
  51.               if (!lastItem.content) {
  52.                 lastItem.content = '未找到符合相似度要求的文档。';
  53.               }
  54.               ctrl.abort(); // 中断请求
  55.               this.loading = false;
  56.               this.$forceUpdate();
  57.             }
  58.           }
  59.         } catch (parseError) {
  60.           console.error('解析消息时出错:', parseError);
  61.           ctrl.abort();
  62.           this.loading = false;
  63.         }
  64.       },
  65.       
  66.       // 错误处理
  67.       onerror: (error) => {
  68.         console.error('发生错误:', error);
  69.         ctrl.abort();
  70.         this.loading = false;
  71.         this.$message.error('服务器连接中断，请稍后重试');
  72.       },
  73.       
  74.       // 连接关闭
  75.       onclose: () => {
  76.         ctrl.abort();
  77.         this.loading = false;
  78.         console.log('连接已关闭');
  79.       },
  80.     });
  81.   } catch (error) {
  82.     console.error('启动流式响应时出错:', error);
  83.     ctrl.abort();
  84.     this.loading = false;
  85.     this.$message.error('无法启动流式响应，请检查网络或服务器状态');
  86.   }
  87. }
复制代码
关键点解析：

  • 使用AbortController实现请求可取消
  • onmessage中处理流式数据，追加到最新搜索结果
  • this.$forceUpdate()确保Vue及时渲染新增内容
  • 错误处理完善，保证用户体验
3. 搜索执行流程整合

将普通搜索API与流式响应API结合使用：
  1. async searchAIFileList() {
  2.   this.loading = true;
  3.   const param = {
  4.     limit: 10,
  5.     offset: 1,
  6.     st: this.searchQuery.trim(),
  7.     sort: 0,
  8.     sortType: 1,
  9.   };
  11.   // 1. 先调用普通搜索API获取文件列表
  12.   const [err, res] = await to(EMSearchFileList(param));
  13.   
  14.   if (err) {
  15.     this.$message.error('搜索失败，请稍后重试');
  16.     this.loading = false;
  17.     return;
  18.   }
  20.   // 2. 构建初始搜索结果
  21.   const fileList = Array.isArray(res) ? res : [];
  22.   const searchResult = {
  23.     fileList,
  24.     content: '',
  25.     count: fileList.length || 0,
  26.     question: this.searchQuery.trim(),
  27.   };
  29.   // 3. 无结果时设置默认提示
  30.   if (!res || fileList.length === 0) {
  31.     searchResult.content = '未找到符合相似度要求的文档。';
  32.   }
  33.   
  34.   // 4. 添加到结果列表
  35.   this.searchFileList.push(searchResult);
  37.   // 5. 等待DOM更新后滚动到底部
  38.   this.$nextTick(() => {
  39.     this.scrollToBottom();
  40.   });
  42.   // 6. 执行流式响应获取AI生成内容
  43.   await this.aiStreamSearchFileList();
  44.   
  45.   // 7. 更新最近搜索记录
  46.   await this.getRecentSearchList();
  47.   
  48.   // 8. 清空输入框
  49.   setTimeout(() => {
  50.     this.searchQuery = '';
  51.     this.loading = false;
  52.   }, 1000);
  53. }
复制代码
这种两阶段设计确保了：

  • 先快速返回文件列表，提供即时反馈
  • 再通过流式响应逐步生成详细内容
  • 最后更新搜索历史，完善用户体验
4. Markdown与数学公式渲染

为了支持复杂内容展示，我们集成了markdown-it和markdown-it-katex：
  1. renderedMarkdown(content: string) {
  2.   const md = new MarkdownIt({
  3.     html: true, // 启用HTML标签
  4.     linkify: true, // 自动识别URL
  5.     typographer: true, // 启用智能引号等
  6.   });
  7.   
  8.   // 添加数学公式支持
  9.   md.use(markdownItKatex, {
  10.     blockClass: 'katex-block',
  11.     errorColor: '#cc0000',
  12.     throwOnError: false,
  13.     macros: {
  14.       "\\RR": "\\mathbb{R}",
  15.       "\\p": "\\frac{\\partial #1}{\\partial #2}",
  16.     }
  17.   });
  18.   
  19.   // 自定义渲染规则
  20.   md.renderer.rules.link_open = (tokens, idx, options, env, self) => {
  21.     const token = tokens[idx];
  22.     token.attrPush(['target', '_blank']); // 增加target="_blank"
  23.     token.attrPush(['rel', 'noopener noreferrer']); // 增加安全属性
  24.     return self.renderToken(tokens, idx, options);
  25.   };
  27.   return md.render(content || '');
  28. }
复制代码
在模板中使用：
  1.   
复制代码
5. UI设计与交互优化

组件采用精心设计的UI布局，确保良好的用户体验：
  1.   
  2.    
  3.    
  4.       
  5.         {{ item.question }}
  6.       
  7.    
  9.    
  10.    
  11.       
  12.         
  13.         
  14.          
  15.         
  16.         
  17.         
  18.          0">
  19.          
  20.             <img src="https://www.cnblogs.com/@/assets/file-ai-list-search.svg" alt="" />
  21.             共找到{{ item?.fileList.length }}个相关文件
  22.          
  23.          
  24.             
  25.               {{ fileListStatus[index] ? '展开' : '收起' }}
  26.             
  27.          
  28.         
  29.         
  30.         
  31.         
  32.          
  33.             
  34.               <img :src="iconSrc(file.fiType || '')" alt="" />
  35.               {{ file.oldFileName }}
  36.             
  37.          
  38.         
  39.       
  40.    
  41.   
复制代码
关键交互细节：

  • 问题内容可点击复制
  • 文件列表可展开/收起
  • 支持文件图标根据类型动态显示
  • 搜索历史标签支持点击重搜
6. 实用工具方法
  1. // 滚动到最新消息
  2. scrollToBottom() {
  3.   const sectionList = this.$refs.sectionList as HTMLElement;
  4.   if (sectionList) {
  5.     const lastQaList = sectionList.querySelectorAll('.qa-list')[this.searchFileList.length - 1];
  6.     if (lastQaList) {
  7.       lastQaList.scrollIntoView({
  8.         behavior: 'smooth',
  9.         block: 'start',
  10.       });
  11.     }
  12.   }
  13. }
  15. // 复制问题内容
  16. copyQuestion(item: any) {
  17.   const textToCopy = item.question || '';
  18.   navigator.clipboard.writeText(textToCopy).then(() => {
  19.     message.success('复制成功');
  20.   }).catch(() => {
  21.     message.warning('复制失败');
  22.   });
  23. }
  25. // 获取文件图标
  26. get iconSrc() {
  27.   return (suffix: string) => {
  28.     return requireIcon(suffix);
  29.   };
  30. }
复制代码
四、性能优化与错误处理

1. 请求中断机制

使用AbortController实现请求可取消：
  1. const ctrl = new AbortController();
  2. // 传递信号
  3. await fetchEventSource(url, { signal: ctrl.signal });
  4. // 需要中断时
  5. ctrl.abort();
复制代码
2. 错误处理策略
  1. onerror: (error) => {
  2.   console.error('发生错误:', error);
  3.   ctrl.abort(); // 确保请求终止
  4.   this.loading = false;
  5.   // 显示用户友好错误
  6.   this.$message.error('服务器连接中断，请稍后重试');
  7. },
复制代码
3. 空状态处理
  1. // 处理完成状态
  2. if (data.status === 'completed') {
  3.   const lastItem = this.searchFileList[this.searchFileList.length - 1];
  4.   // 确保空内容时有提示
  5.   if (!lastItem.content) {
  6.     lastItem.content = '未找到符合相似度要求的文档。';
  7.   }
  8.   // 确保fileList为数组
  9.   if (!Array.isArray(lastItem.fileList)) {
  10.     lastItem.fileList = [];
  11.   }
  12.   lastItem.count = lastItem.fileList.length || 0;
  13. }
复制代码
五、部署与集成

组件完整集成到企业文档管理系统中，需要处理的集成点：

  • 认证与授权：在请求头中添加token
  • 文件预览：集成现有文件预览组件
  1. viewFile(item: IFile) {
  2.   this.detailFileModal.open(item.fileID);
  3.   // 添加文件访问记录
  4.   ManageModule.addFileRecord(item.fileID);
  5. }
复制代码

  • 环境变量配置：使用process.env.VUE_APP_BASE_URL配置API地址
六、总结与展望

通过fetchEventSource实现的AI智能文件搜索助手，完美解决了传统搜索体验的不足：

  • 实时反馈：流式响应让等待感消失
  • 自然交互：对话式搜索降低使用门槛
  • 精准结果：AI理解用户真实意图
  • 无缝集成：与现有文件系统完美融合
未来优化方向：

  • 增加上下文感知，支持多轮对话
  • 优化提示工程，提高搜索准确率
  • 添加个性化推荐，基于用户历史行为
  • 支持多语言处理，满足国际化需求
七、完整代码示例

以下是组件的核心部分，完整代码请参考文末GitHub链接：
  1. <template>
  2.   
  3.     <main-header-component
  4.       :is-show-store-btn="false"
  5.       :is-show-search="false"
  6.       :is-show-upload-btn="false"
  7.     ></main-header-component>
  8.    
  9.       
  10.         
  11.          
  12.             
  13.               
  14.                 <img src="https://www.cnblogs.com/@/assets/file-ai-search-logo.svg" alt=""  />
  15.               
  16.               
  17.                
  18.                   文件搜索助手
  19.                   
  20.                     {{ data.isShowSearch ? '收起' : '展开' }}
  21.                   
  22.                
  23.               
  24.             
  26.             
  27.               AI搜索以自然语言处理和语义理解为核心，通过智能分类、个性化推荐及跨平台实时检索技术，精准捕捉用户意图并快速定位目标内容，同时支持多模态数据的关联分析，实现"对话式"高效搜索体验。
  28.             
  30.              0">
  31.               最近搜索
  32.               
  33.                
  34.                   <img v-if="selectedTag === tag.siId" src="https://www.cnblogs.com/@/assets/file-ai-question-search.svg" alt="" />
  35.                   {{ tag.content?.length > 10 ? tag.content.slice(0, 10) + '...' : tag.content }}
  36.                
  37.               
  38.             
  39.          
  40.          
  41.          
  42.          
  43.             
  44.          
  45.         
  46.         
  47.         
  48.         
  49.          
  50.             
  51.             
  52.               <img src="https://www.cnblogs.com/@/assets/file-ai-send.svg" alt="发送" />
  53.             
  54.          
  55.          
  56.             内容由各平台大模型生成，不能完全保证准确性和完整性，不代表我们的态度或观点
  57.          
  58.         
  59.       
  60.     </a-spin>
  61.     <file-detail-component ref="detailFileModal"></file-detail-component>
  62.   
  63. </template>
复制代码
这个实现不仅展示了fetchEventSource在AI应用中的强大能力，更提供了一套完整的企业级解决方案。通过精心设计的UI/UX和稳定的错误处理机制，为用户提供了流畅、可靠的智能搜索体验。希望这篇文章能为你的AI应用开发提供有价值的参考！

来源：程序园用户自行投稿发布，如果侵权，请联系站长删除
免责声明：如果侵犯了您的权益，请联系站长，我们会及时删除侵权内容，谢谢合作！
使用fetchEventSource构建高效AI
1.jpg
2.jpg
3.jpg
4.jpg
5.jpg

使用道具 举报

相关推荐
B Color Image Link Quote Code Smilies
您需要登录后才可以回帖 登录 | 立即注册
发帖
胁冉右
6 小时前

0

粉丝关注

24

主题发布

板块介绍填写区域，请于后台编辑
微信扫一扫