跳到主要内容

谈谈前端AI系列

  • sse请求，在ai中的应用，如何发sse请求，请求头如何配置
  • AI对话的流式内容如何实现
  • 服务端的逐块内容返回如何实现
    • 使用服务端的sdk
  • 谈谈大模型的token

AI对话的流式内容如何实现​

在 AI 对话中（如 ChatGPT、Claude、Gemini 等），可以看到“回答逐字输出”的效果，这种 流式响应（Streaming Response） 通常是通过 SSE 协议 实现的

  • SSE（Server-Sent Events）
  • 是一种单向通信机制，由服务器主动推送消息到客户端
  • AI 对话中，服务端通常不会一次性返回整段文本，而是随着模型生成 token 就实时发送给客户端
    • 前端通过fetch请求来获取流式内容
    • 通过响应内容的：
      • response.body.getReader();
    • 使用循环持续读取 SSE 数据，来进行不断获取读取文本来渲染

客户端接收流（fetch 实现）​

js
async function requestStream() {
  const response = await fetch('/api/ai/stream', {
    method: 'POST',
    headers: {
      'Content-Type': 'application/json',
    },
  });

  const reader = response.body.getReader();
  const decoder = new TextDecoder('utf-8');

  while (true) {
    const { done, value } = await reader.read();
    if (done) break;
    const text = decoder.decode(value, { stream: true });
    console.log(text); // 打印流式数据
  }
}

​

服务端逐块内容返回实现​

服务端通过 HTTP 分块传输（Chunked Transfer Encoding） 向客户端持续推送内容

响应头配置​

bash
HTTP/1.1 200 OK
Content-Type: text/event-stream
Connection: keep-alive
Cache-Control: no-cache
Transfer-Encoding: chunked
Header作用
Connection: keep-alive保持长连接，持续推送内容, 避免请求结束后自动关闭
Content-Type: text/event-stream告诉浏览器这是 SSE 数据流
Cache-Control: no-cache禁止中间层缓存，确保实时性
Transfer-Encoding: chunked启用分块传输模式，让数据可以一块块推送

注意问题​

  • 一定要禁用缓存
    • 若没有设置 Cache-Control: no-cache，中间层（如 CDN 或 Nginx）可能会缓存流式数据，导致内容卡顿或延迟。
  • 必须使用 UTF-8
    • SSE 要求 text/event-stream 的内容必须是 UTF-8 编码，否则浏览器端可能解码异常。
  • 保持连接不断开
    • 若请求超过一定时间（如 60 秒）被网关或反向代理断开，可以：
      • 定期发送心跳：res.write(': ping\n\n')
      • 或调整 Nginx / Cloudflare 超时时间。
  • 最后一块要显式结束
    • 服务端发送 [DONE] 或调用 res.end() 明确告知流结束。

大模型的token​

  • token是模型理解的文本的最小单位
  • 不同模型的有不同的token的分词计算规则
  • 模型计算成本按 token 计费

需要理解好模型的token

  • 控制成本：模型按 token 计费
  • 控制上下文长度：模型有最大 token 限制（如 GPT-4o = 128k tokens）

agent是如何工作的？​

  • 理解模型底层怎么运作
  • 用户发消息给模型，构造上下文，工具/技能调用，调用了就执行，把结果喂回去，继续循环，直接模型觉得任务完成了
    • 用户意图识别 → 选择上下文 → 选择工具/技能 → 执行 → 观察结果 → 继续循环 → 满足停止条件后输出。
    • 这里工具指 agent可调用外部的能力，如搜索、读写文件、 调用api、执行命令等等
    • 这里的继续循环是指 agent不会只思考一次，不会调用一次工具就结束，而是会根据上一步的结果，继续思考决定下一步，这是一个反复的过程
      • 继续循环 可以理解为继续思考，思考每一步决定要做的事情
      • 很多任务不是一步就能完成，需要经过几轮的思考，每一步都依赖上一步都结果，因此需要循环
      • 简单的理解：继续循环就是 agent 会根据上一步的结果继续思考，并决定下一步要做什么；做完之后再根据新结果继续判断，直到任务完成

AI应用的TTFB指标如何优化？​

用户发起请求，到看到第一个 token 的时间

  • 减少上下文体积 context
  • 精简的提示词 prompt

AI应用内容输出的流畅度如何优化？​

  • 增量渲染
  • 分块 markdown parse
  • 虚拟列表