在小程序中实现流式输出,尤其当涉及到AI大模型时,技术挑战尤为显著,因为这类模型往往需要处理巨量的数据.

第一次接入AI问答功Neng时,我像大多数人一样直接用了HTTP请求.

流式输出的核心价值就是让AI像真人对话一样逐字逐句响应,用户kan到第一个字开始就有 正在回答 的感知,心理等待时间大幅缩短。

// src\\modules\\ai\\ai.service.ts import { Injectable } from '@nestjs/common' import { ConfigService } from '@nestjs/config' import { ChatPromptTemplate } from '@langchain/core/prompts' import { ChatOpenAI, ChatOpenAIFields } from '@langchain/openai' @Injectable export class AiService { constructor {} // ... } 组件职责与技术实现

组件 职责 技术实现

LLM连接器 建立与语言模型的流式连接 openai库的chat.completions.create

标点检测器 实时分析文本流中的断句点 正则表达式+状态机

流式生成与完整语义的矛盾:LLM以token为单位逐步输出内容,而TTS需要完整的句子才Neng生成自然语音.

但是,您Ke以使用阿里云安全的其他产品和服务来实现对流式输出内容的审查。

{ "dependencies": { "@langchain/core": "^.", "@langchain/openai": "^." } } NestJS 配置

为了安全管理 OpenAI API 密钥等配置信息，我们需要设置 NestJS 的环境配置。

// types\global.d.ts import type { Request, Response } from 'express' declare global { type ExpressRequest = Request type ExpressResponse = Response } 实现原理

服务端实现在现代 web 应用中，AI 交互的实时性体验越来越重要。

客户端实现我们需要安装必要的依赖包：

// src\modules\ai\ai.service.ts import { Injectable } from '@nestjs/common' import { ConfigService } from '@nestjs/config' import { ChatPromptTemplate } from '@langchain/core/prompts' import { ChatOpenAI, ChatOpenAIFields } from '@langchain/openai' @Injectable export class AiService { constructor {} public async streamChat { try { const chatPromptTemplate = ChatPromptTemplate.fromMessages(, , ]) const chain = chatPromptTemplate.pipe const stream = await chain.stream for await { const content = chunk.content || '' if continue response.write} `) } response.write} `) } catch { response.write} `) } finally { response.end } } private get llm: ChatOpenAI { const options: ChatOpenAIFields = { apiKey: this.configService.get, model: this.configService.get, temperature: 0, streaming: true, configuration: { baseURL: this.configService.get, }, } return new ChatOpenAI } } NestJS 控制器实现细节

// src\modules\ai\ai.controller.ts import { AiService } from './ai.service' import { Body, Controller, Post, Res } from '@nestjs/common' @Controller export class AiController { constructor {} @Post public chatStream( @Body prompt: string, @Res response: ExpressResponse, ) { response.setHeader response.setHeader response.setHeader return this.aiService.streamChat } } 客户端实现代码细节

// Vue 组件示例 import { ref } from 'vue' import axios from 'axios' const prompt = ref const content = ref const loading = ref async function chat { if return content.value = '' loading.value = true try { const url = `http://localhost:/api/ai/chat/stream` const data = { prompt: prompt.value } const response = await axios.post(url, data, { responseType: 'stream', adapter: 'fetch', }) const reader = response.data.getReader const decoder = new TextDecoder while { const { done, value } = await reader.read if break const chunk = decoder.decode const lines = chunk.split.filter => i.startsWith) for { try { const data = JSON.parse) if return if throw new Error if { content.value += data.content } } catch { console.error } } } } catch { console.error content.value = `请求失败: ${error.message}` } finally { loading.value = false } }

NestJS结合OpenAI，实现流式问答输出的关键在于正确配置SSE响应头、处理流式数据以及优化用户体验。