学习AI 工程师第 3 天：小程序中调用豆包模型，实现ai助手（打字机效果与流式输出）

A ：流式输出（Streaming） ：
【后端技术】指 AI 模型生成文本时‌逐块（chunk）返回数据‌，而非等全部内容生成完再一次性返回

‌B：打字机效果（Typing Effect）‌ ：
【前端交互表现】指将接收到的文本‌逐字或逐段显示‌，它不仅能缓解用户等待的焦虑，还能模拟真实对话的感觉。

一、项目概述

微信小程序中接入（豆包模型）火山引擎豆包 API，并实现类似 ChatGPT 的打字机流式输出效果。
学习目标：

1. 学习流式输出 SSE 的原理
2. 小程序中，SSE 实现打字机效果的 AI 聊天框
3. 解决流式输出的断行、乱码问题

项目技术：

1. 打字机效果渲染：通过前端定时器模拟逐字输出。
2. 聊天历史持久化：使用 wx.setStorageSync 保存记录。
3. 工程化代码结构：配置分离、逻辑清晰、

二、核心知识点详解

1. SSE (Server-Sent Events) 流式输出

1.1 概念：SSE 是一种基于 HTTP 的、允许服务器向客户端单向推送数据的技术。在大模型（LLM）应用中，它是实现 "流式输出" 的基石。

1.2 SSE 工作流程：

• 客户端发起请求：建立一个长连接 HTTP 请求。
• 服务器保持连接：Content-Type 设置为 text/event-stream。
• 数据分批推送：服务器处理一点就推一点，格式通常为 data: {...}\n\n。
• 客户端解析渲染：通过事件监听接收数据块并实时更新 UI。

1.3 技术选定 ：

由于微信小程序原生 wx.request 对标准 SSE 流支持有限，本项目采用主流小程序实现ai助手的做法：

请求模式：设置 stream: false、一次性拿到完整回复后，前端通过定时器模拟 "打字机" 效果（兼容性极好，不需要处理复杂的流解析）。

2. 小程序中打字机效果的 AI 聊天框实现：核心逻辑在于 startTypewriter 函数

2.1 实现思路 ：

先占位：收到用户消息后，立即在界面上放一个 "Loading" 状态的空消息框。

锁索引：由于数组是动态变化的，必须提前锁定该条 AI 消息在 messages 数组中的下标（msgIndex），否则 setData 时可能会更新错位置。

2.2 定时器逐字追加 ：

使用 setInterval 按照 TYPE_SPEED (30ms) 的间隔触发。

每次截取字符串 fullText.substring(0, currentIndex)。

通过 this.setData({[messages[${msgIndex}].content]: ...}) 进行局部更新。

三、完整实践代码

从模型的注册-模型3个核心参数的获取-小程序代码的实现-完整闭环：https://blog.csdn.net/qq_41930094/article/details/160587731?spm=1001.2014.3001.5501