腾讯混元AI聊天应用怎么实现流式显示

风萱酱_4872

风萱酱_4872

2026-10-04

808人浏览

原创

必须开启腾讯元器后台“流式输出”开关,小程序通过websocket连接wss://api.yuanqi.tencent.com/v1/chat/stream,监听onmessage解析delta.content追加文本,配合css光标动画或js零宽空格触发重绘,并实现断线重连与降级机制。

☞☞☞AI 智能聊天, 问答助手, AI 智能搜索, 多模态理解力帮你轻松跨越从0到1的创作门槛☜☜☜

腾讯混元ai聊天应用怎么实现流式显示

腾讯混元AI聊天应用要让AI回复像真人打字一样逐字出现,而不是等几秒后整段弹出,必须启用流式响应机制。这一步不开启,所有对话都会卡顿、延迟感强,用户会误以为服务没响应。

确认后端已启用流式接口

登录腾讯元器(yuanqi.tencent.com)→ 进入智能体工作台 → 找到目标智能体 → 点击「配置」→ 切换至「高级设置」标签页 → 检查「流式输出」开关是否为开启状态。【若此处关闭,前端无论怎么写也无法实现打字机效果】

该开关控制后端是否以 chunk 方式分批返回 token。关闭时,后端会缓存全部响应再一次性返回;开启后,每生成一个 token 就立即推送一次,是流式显示的硬性前提。

小程序端用 WebSocket 接收流数据

在微信小程序代码中,调用 wx.connectSocket 建立与腾讯元器流式接口的 WebSocket 连接,URL 格式为:wss://api.yuanqi.tencent.com/v1/chat/stream?bot_id=xxx&session_id=yyy。

连接成功后,监听 onMessage 事件。每次收到消息,解析 JSON 数据中的 delta.content 字段(不是 message.content),将其追加到当前消息节点的文本末尾。

注意:必须使用 delta.content。如果误取 message.content,会导致重复拼接或覆盖——因为后者是完整回复,而流式传输中每个 chunk 只含增量内容。

添加光标动画与防抖处理

方法一:CSS 实现闪烁光标
给显示 AI 回复的 <text></text> 或 <view></view> 元素添加类名 typing-cursor,并在 WXSS 中定义:.typing-cursor::after { content: "|"; animation: blink 1s infinite; },再补充 @keyframes blink { 0%, 100% { opacity: 1; } 50% { opacity: 0; } }。

腾讯混元
腾讯混元

腾讯混元是由腾讯公司推出的通用大语言模型与AI助手产品,基于自研的混元大模型体系打造,提供智能问答、内容生成、代码辅助、办公写作、知识检索等能力。用户可以通过网页端、移动端等方式使用,用于学习、工作和内容创作等多种场景。

下载

方法二:JS 动态插入
在每次追加 delta.content 后,用 setTimeout 延迟 30ms 插入一个不可见的零宽空格 \u200B,再立即删除——这个操作能强制触发视图重绘,避免部分低端安卓机出现文字“堆叠不刷新”问题。

这一步不做,光标会静止不动,失去“正在输入”的心理暗示,用户容易中途打断或重复发送。

处理流式中断与错误重连

第一步:监听 onClose 和 onError 事件,一旦触发,立即清空当前未完成的 AI 消息节点,并显示灰色提示文字:“网络波动,正在重试…”。

第二步:启动指数退避重连(初始延迟 500ms,每次失败×1.5,上限 5s)→ 调用 wx.connectSocket 重建连接 → 成功后,携带原 session_id 和断点位置(即已接收的 message_id)发起续传请求。

第三步:若连续重连 3 次失败,自动降级为非流式模式:向 https://api.yuanqi.tencent.com/v1/chat/completions 发送标准 POST 请求,等待完整响应后一次性渲染。

【session_id 必须全程透传,否则上下文断裂,AI 会忘记前面聊过什么】

相关文章

PHP速学视频免费教程(入门到精通)
PHP速学视频免费教程(入门到精通)

PHP怎么学习?PHP怎么入门?PHP在哪学?PHP怎么学才快?不用担心,这里为大家提供了PHP速学教程(入门到精通),有需要的小伙伴保存下载就能学习啦!

下载

本站声明:本文内容由网友自发贡献,版权归原作者所有,本站不承担相应法律责任。如您发现有涉嫌抄袭侵权的内容,请联系admin@php.cn

相关专题

更多
ChatGPT注册
ChatGPT注册

ChatGPT注册方法:1、访问OpenAI的官方网站,进入注册页面;2、完成注册后收到一份邮件,打开后点击验证账号;3、选择一个适合您需求的订阅计划;4、获得访问ChatGPT的权限即可。

2023.09.12

2073

9

国内免费ChatGPT大全
国内免费ChatGPT大全

ChatGPT是一种基于深度学习技术的自然语言处理模型,由OpenAI开发。它是GPT的一个变体,专门设计用于生成上下文相关的文本回复。ChatGPT被训练成一个聊天机器人,可以与用户进行对话交互。更多关于ChatGPT的文章详情请查看本专题,希望对大家能有所帮助。

2023.10.25

5085

20

手机安装chatgpt的方法
手机安装chatgpt的方法

手机安装chatgpt的方法:1、在ChatGTP官网或手机商店上下载ChatGTP软件;2、打开后在设置界面中,选择语言为中文;3、在对局界面中,选择人机对局并设置中文相谱;4、开始后在聊天窗口中输入指令,即可与软件进行交互。想了解更多chatgpt的相关内容,可以阅读本专题下面的文章。

2024.03.05

8381

9

chatgpt国内可不可以使用
chatgpt国内可不可以使用

chatgpt在国内可以使用,但不能注册,港澳也不行,用户想要注册的话,可以使用国外的手机号进行注册,注意注册过程中要将网络环境切换成国外ip。想了解更多chatgpt的相关内容,可以阅读本专题下面的文章。

2024.03.05

3376

10

chatgpt官网入口地址合集
chatgpt官网入口地址合集

本专题整合了chatgpt官网入口地址、使用教程等内容,阅读专题下面的文章了解更多详细内容。

2026.03.16

1838

24

chatgpt使用指南
chatgpt使用指南

本专题整合了chatgpt使用教程、新手使用说明等等相关内容,阅读专题下面的文章了解更多详细内容。

2026.03.16

557

20

ChatGPT编程开发实战教程
ChatGPT编程开发实战教程

本专题全面讲解ChatGPT在编程开发中的应用,包括代码生成、接口调试、Bug修复、前端页面开发、Python脚本编写及数据库优化等,帮助开发者提升效率。

2026.05.29

220

14

ChatGPT自媒体创作教程
ChatGPT自媒体创作教程

本专题聚焦ChatGPT在自媒体领域的应用,包括爆款标题生成、短视频脚本撰写、小红书文案优化、公众号排版及AI创意输出等内容,适合内容创作者与运营人员学习。

2026.05.29

239

15

ChatGPT零基础入门教程
ChatGPT零基础入门教程

本专题适合ChatGPT新手用户学习,内容涵盖账号注册、基础功能、提示词使用、插件工具、聊天技巧及常见问题处理,帮助快速掌握ChatGPT核心操作。

2026.05.29

537

15

热门下载

更多
网站特效
/
网站源码
/
网站素材
/
前端模板

精品课程

更多
相关推荐
/
热门推荐
/
最新课程