当前位置: 首页 > news >正文

微信小程序AI大模型流式输出实践与总结

背景

让Cursor生成小程序中大模型调用内容回复的流式输出时一直有问题,参考整理此文章。
参考原文:https://blog.csdn.net/weixin_47684422/article/details/145859543


一、什么是流式传输?

流式传输(Streaming)指的是将数据分为若干段(chunk),边生成边发送,客户端则边接收边处理。常见于视频播放、音频播放、AI对话等场景。其优点包括:

  • 降低延迟,提升响应速度
  • 支持大数据量分段处理
  • 改善用户体验(如AI逐字回复)

二、微信小程序中的流式传输方案

1. 微信小程序的限制

  • 无fetch:小程序没有浏览器的fetch接口,不能直接用Response.body.getReader()流式读取。
  • WebSocket不适用于所有后端:部分AI接口只支持HTTP流,不支持WebSocket。

2. 官方能力:onChunkReceived

微信小程序自基础库2.23.0起,wx.request新增了enableChunked参数和onChunkReceived回调,支持HTTP分块(chunked)传输。

要点:

  • enableChunked: true 开启流式传输
  • 监听onChunkReceived获取每一块数据
  • 需自行拼接与处理数据内容

三、代码实现

1. 发起流式请求

const requestTask = wx.request({url: `${config.baseUrl}/ai/deepSeek`,header: {"X-Access-Token": wx.getStorageSync("token"),},data: JSON.stringify({question: this.question,appId: config.APP_ID,userName: 'xxx'}),method: "POST",enableChunked: true, // 开启流式传输responseType: "arraybuffer", // 推荐使用arraybuffer,兼容性更好
});// 监听分块数据
if (requestTask?.onChunkReceived) {requestTask.onChunkReceived(this.handleChunkData);
} else {// 不支持流式,降级为普通请求this.normalRequest();
}

2. 分块数据处理

handleChunkData(res) {try {// 微信小程序ArrayBuffer转字符串let rawStr = Array.from(new Uint8Array(res.data)).map(byte => String.fromCharCode(byte)).join("");// 处理中文乱码rawStr = unescape(encodeURIComponent(rawStr));// 提取JSON内容const chunkJson = rawStr.split("data: ")[1];const rawData = JSON.parse(chunkJson);// 提取AI回复内容const text = rawData.choices?.[0]?.delta?.content;// 过滤无用内容(如<think>标签)if (text === "</think>") {this.isThink = false;}if (!this.isThink) {const tx = text.replace("</think>", "");this.streamBuffer += tx;// 实时渲染(可用markdown-it等库转换)const answer = this.list[this.list.length - 1];answer.content = markdown.render(this.streamBuffer);// 节流更新页面this.throttleUpdate();}} catch (e) {console.error("数据处理异常:", e);}
},

3. 辅助方法

// 节流更新,防止频繁渲染影响性能
throttleUpdate() {if (!this.updateTimer) {this.updateTimer = setTimeout(() => {this.$forceUpdate();this.scrollToBottom();this.updateTimer = null;}, 500);}
}

四、注意事项与优化建议

  1. 字段结束标识:小程序没有onReceivedEnd事件,无法直接判断流式内容是否结束。建议后端返回特殊标识(如[DONE])或协议字段,前端据此判断。
  2. 中文兼容性:ArrayBuffer转字符串时,注意处理中文编码问题,推荐用TextDecoderunescape(encodeURIComponent(...))方法。
  3. 性能优化:流式内容更新频繁,建议节流更新页面,避免卡顿。
  4. uniapp注意:如用uniapp,必须用wx.requestuni.request不支持chunked流。
  5. 内容过滤:部分大模型(如deepSeek)返回的内容含有think标签等无用数据,需按业务过滤。

相关文章:

微信小程序AI大模型流式输出实践与总结

背景 让Cursor生成小程序中大模型调用内容回复的流式输出时一直有问题&#xff0c;参考整理此文章。 参考原文&#xff1a;https://blog.csdn.net/weixin_47684422/article/details/145859543 一、什么是流式传输&#xff1f; 流式传输&#xff08;Streaming&#xff09;指的…...

操作系统理解(xv6)

xv6操作系统项目复习笔记 宗旨&#xff1a;只记大框架&#xff0c;不记细节&#xff0c;没有那么多的时间 一、xv6的页表是如何搭建的&#xff1f; xv6这个项目中&#xff0c;虚拟地址用了39位&#xff08;27位12位&#xff08;物理内存page偏移地址&#xff09;&#xff09…...

2024CCPC辽宁省赛 个人补题 ABCEGJL

Dashboard - 2024 CCPC Liaoning Provincial Contest - Codeforces 过题难度 B A J C L E G 铜奖 4 953 银奖 6 991 金奖 8 1664 B&#xff1a; 模拟题 // Code Start Here string s;cin >> s;reverse(all(s));cout << s << endl;A&#xff1a;很…...

Sentinel原理与SpringBoot整合实战

前言 随着微服务架构的广泛应用&#xff0c;服务和服务之间的稳定性变得越来越重要。在高并发场景下&#xff0c;如何保障服务的稳定性和可用性成为了一个关键问题。阿里巴巴开源的Sentinel作为一个面向分布式服务架构的流量控制组件&#xff0c;提供了从流量控制、熔断降级、…...

Python 训练营打卡 Day 31

文件的规范拆分和写法 把一个文件&#xff0c;拆分成多个具有着独立功能的文件&#xff0c;然后通过import的方式&#xff0c;来调用这些文件。这样具有几个好处&#xff1a; 可以让项目文件变得更加规范和清晰可以让项目文件更加容易维护&#xff0c;修改某一个功能的时候&a…...

vue+srpingboot实现多文件导出

项目场景&#xff1a; vuesrpingboot实现多文件导出 解决方案&#xff1a; 直接上干货 <el-button type"warning" icon"el-icon-download" size"mini" class"no-margin" click"exportSelectedFiles" :disabled"se…...

学习 Pinia 状态管理【Plan - May - Week 2】

一、定义 Store Store 由 defineStore() 定义&#xff0c;它的第一个参数要求独一无二的id import { defineStore } from piniaexport const useAlertsStore defineStore(alert, {// 配置 })最好使用以 use 开头且以 Store 结尾 (比如 useUserStore&#xff0c;useCartStore&a…...

linux中cpu内存浮动占用,C++文件占用cpu内存、定时任务不运行报错(root) PAM ERROR (Permission denied)

文章目录 说明部署文件准备脚本准备部署g++和编译脚本使用说明和测试脚本批量部署脚本说明执行测试定时任务不运行报错(root) PAM ERROR (Permission denied)报错说明处理方案说明 我前面已经弄了几个版本的cpu和内存占用脚本了,但因为都是固定值,所以现在重新弄个用C++编写的…...

数据湖和数据仓库的区别

在当今数据驱动的时代&#xff0c;企业需要处理和存储海量数据。数据湖与数据仓库作为两种主要的数据存储解决方案&#xff0c;各自有其独特的优势与适用场景。本文将客观详细地介绍数据湖与数据仓库的基本概念、核心区别、应用场景以及未来发展趋势&#xff0c;帮助读者更好地…...

OceanBase 开发者大会,拥抱 Data*AI 战略,构建 AI 数据底座

5 月 17 号以“当 SQL 遇见 AI”为主题的 OceanBase 开发者大会在广州举行&#xff0c;因为行程的原因未能现场参会&#xff0c;仍然通过视频直播观看了全部的演讲。总体来说&#xff0c;这届大会既有对未来数据库演进方向的展望&#xff0c;也有 OceanBase 新产品的发布&#…...

鸿蒙HarmonyOS最新的组件间通信的装饰器与状态组件详解

本文系统梳理了鸿蒙&#xff08;HarmonyOS&#xff09;ArkUI中组件间通信相关的装饰器及状态组件的使用方法&#xff0c;重点介绍V2新特性&#xff0c;适合开发者查阅与实践。 概述 鸿蒙系统&#xff08;HarmonyOS&#xff09;ArkUI提供了丰富的装饰器和状态组件&#xff0c;用…...

OneDrive登录,账号跳转问题

你的OneDrive登录无需密码且自动跳转到其他账号&#xff0c;可能是由于浏览器或系统缓存了登录信息&#xff0c;或存在多个账号的关联。以下是分步解决方案&#xff1a; 方案三对我有效。 强制手动输入密码 访问登录页面时&#xff1a; 在浏览器中打开 OneDrive网页版。 点击…...

9-码蹄集600题基础python篇

题目如上图所示。 这一题&#xff0c;没什么难度。 代码如下&#xff1a; def main():#code here# x,amap(int,input("").split(" "))# sum((1/2)*(a*x(ax)/(4*a)))# print(f"{sum:.2f}")x,amap(int,input().split())print(f"{((1/2)*(a*…...

CAU人工智能class3 优化器

优化算法框架 优化思路 随机梯度下降 随机梯度下降到缺点&#xff1a; SGD 每一次迭代计算 mini-batch 的梯度&#xff0c;然后对参数进行更新&#xff0c;每次迭代更新使用的梯度都只与本次迭代的样本有关。 因为每个批次的数据含有抽样误差&#xff0c;每次更新可能并不会 …...

学习 Android(十一)Service

简介 在 Android 中&#xff0c;Service 是一种无界面的组件&#xff0c;用于在后台执行长期运行或跨进程的任务&#xff0c;如播放音乐、网络下载或与远程服务通信 。Service 可分为“启动型&#xff08;Started&#xff09;”和“绑定型&#xff08;Bound&#xff09;”两大…...

SpringAI开发SSE传输协议的MCP Server

SpringAI 访问地址&#xff1a;Spring AI ‌ Spring AI‌是一个面向人工智能工程的应用框架&#xff0c;由Spring团队推出&#xff0c;旨在将AI能力集成到Java应用中。Spring AI的核心是解决AI集成的根本挑战&#xff0c;即将企业数据和API与AI模型连接起来‌。 MCP…...

【泛微系统】后端开发Action常用方法

后端开发Action常用方法 代码实例经验分享:代码实例 经验分享: 本文分享了后端开发中处理工作流Action的常用方法,主要包含以下内容:1) 获取工作流基础信息,如流程ID、节点ID、表单ID等;2) 操作请求信息,包括请求紧急程度、操作类型、用户信息等;3) 表单数据处理,展示…...

如何成为更好的自己?

成为更好的自己是一个持续成长的过程&#xff0c;需要结合自我认知、目标规划和行动力。以下是一些具体建议&#xff0c;帮助你逐步提升&#xff1a; 1. 自我觉察&#xff1a;认识自己 反思与复盘&#xff1a;每天花10分钟记录当天的决策、情绪和行为&#xff0c;分析哪些做得…...

精益数据分析(74/126):从愿景到落地的精益开发路径——Rally的全流程管理实践

精益数据分析&#xff08;74/126&#xff09;&#xff1a;从愿景到落地的精益开发路径——Rally的全流程管理实践 在创业的黏性阶段&#xff0c;如何将抽象的愿景转化为可落地的产品功能&#xff1f;如何在快速迭代中保持战略聚焦&#xff1f;今天&#xff0c;我们通过Rally软…...

网站制作公司哪家强?(2025最新版)

在数字化时代&#xff0c;一个优质的网站是企业展示自身实力、拓展业务渠道的重要工具。无论是初创企业还是大型集团&#xff0c;都需要一个功能强大、设计精美的网站来吸引客户、提升品牌形象。但面对市场上众多的网站制作公司&#xff0c;如何选择一家靠谱的合作伙伴呢&#…...

23种经典设计模式(GoF设计模式)

目录 &#x1f340; 创建型设计模式&#xff08;5种&#xff09; 1. 单例模式&#xff08;Singleton&#xff09; 2. 工厂方法模式&#xff08;Factory Method&#xff09; 3. 抽象工厂模式&#xff08;Abstract Factory&#xff09; 4. 建造者模式&#xff08;Builder&am…...

深入解析Dify:从架构到应用的全面探索

文章目录 引言一、Dify基础架构1.1 架构概述1.2 前端界面1.3 后端服务1.4 数据库设计 二、Dify核心概念2.1 节点&#xff08;Node&#xff09;2.2 变量&#xff08;Variable&#xff09;2.3 工作流类型 三、代码示例3.1 蓝图注册3.2 节点运行逻辑3.3 工作流运行逻辑 四、应用场…...

电子电路:怎么理解放大电路中集电极电流Ic漂移?

如果放大电路中集电极电阻RC因为温度或老化而阻值变化&#xff0c;Vce Vcc - IcRc - IcRc&#xff0c;这会改变工作点&#xff0c;导致集电极的电流漂移。 IC漂移的定义&#xff1a;集电极电流随时间、温度等变化。影响IC的因素&#xff1a;β、IB、VBE、温度、电源电压、元件…...

【疑难杂症】Mysql 无报错 修改配置文件后服务启动不起来 已解决|设置远程连接

我修改配置后&#xff0c;服务无法启动可以试试用记事本打开后另存为&#xff0c;格式选择ANSI&#xff0c;然后重新启动mysql试试 设置运行远程、 1、配置my.ini文件 在[mysqld]下 添加bind-address0.0.0.0 2、设置root权限 使用MySql命令行执行&#xff0c; CREATE USER…...

Java基础 5.21

1.多态注意事项和细节讨论 多态的前提是&#xff1a;两个对象&#xff08;类&#xff09;存在继承关系 多态的向上转型 本质&#xff1a;父类的引用指向了子类的对象语法&#xff1a;父类类型 引用名 new 子类类型();特点&#xff1a;编译类型看左边&#xff0c;运行类型看…...

探索Puter:一个基于Web的轻量级“云操作系统”

在云计算与Web技术高度融合的今天,开发者们不断尝试将传统桌面体验迁移到浏览器中。近期,GitHub上一个名为Puter的开源项目吸引了社区的关注。本文将带你深入解析Puter的设计理念、技术架构与使用场景,探索它如何通过现代Web技术重构用户的“云端桌面”。 一、项目概览 Put…...

Java SpringBoot 项目中 Redis 存储 Session 具体实现步骤

目录 一、添加依赖二、配置 Redis三、配置 RedisTemplate四、创建控制器演示 Session 使用五、启动应用并测试六、总结 Java 在 Spring Boot 项目中使用 Redis 来存储 Session&#xff0c;能够实现 Session 的共享和高可用&#xff0c;特别适用于分布式系统环境。以下是具体的实…...

电商项目-商品微服务-规格参数管理,分类与品牌管理需求分析

本文章介绍&#xff1a;规格参数管理与分类与品牌管理的需求分析和表结构的设计。 一、规格参数管理 规格参数模板是用于管理规格参数的单元。规格是例如颜色、手机运行内存等信息&#xff0c;参数是例如系统&#xff1a;安卓&#xff08;Android&#xff09;后置摄像头像素&…...

Java 定时任务中Cron 表达式与固定频率调度的区别及使用场景

Java 定时任务&#xff1a;Cron 表达式与固定频率调度的区别及使用场景 一、核心概念对比 1. Cron 表达式调度 定义&#xff1a;基于日历时间点的调度&#xff0c;通过 秒 分 时 日 月 周 年 的格式定义复杂时间规则。时间基准&#xff1a;绝对时间点&#xff08;如每天 12:…...

2025年- H39-Lc147 --394.字符串解码(双栈,递归)--Java版

1.题目描述 2.思路 可以用递归也可以用双栈&#xff0c;这边用栈。 首先先创建一个双栈&#xff0c;一个栈存数字&#xff08;interger&#xff09;&#xff0c;另一个栈存字符&#xff08;character&#xff09;。设置数字临时变量num&#xff0c;设置字母临时变量curString在…...

学编程对数学成绩没帮助?

今天听到某机构直播说“学编程对数学成绩没帮助&#xff0c;如果想提高数学成绩那就单独去学数学”&#xff0c;实在忍不住要和各位家长聊聊我的思考&#xff0c;也欢迎各位家长评论。 恰在此时我看见了一道小学6年级的数学题如下&#xff0c;虽然题不难&#xff0c;但立刻让我…...

现代计算机图形学Games101入门笔记(十九)

光场 在近处画上图像&#xff0c;VR的效果。 任何时间任何位置看到的图像都不一样&#xff0c;是不是就是一个世界了。 光场就是任何一个位置往任何一个方向去的光的强度 知道光场就能知道这个物体长什么样子。 光线可以用一个点和一个方向确定。 也可以用2个点确定一条光线。 …...

STM32单片机GUI系统1 GUI基本内容

目录 一、GUI简介 1、emWin 2、LVGL (Light and Versatile Graphics Library) 3、TouchGFX 4、Qt for Embedded 5、特性对比总结 二、LVGL移植要求 三、优化LVGL运行效果方法 四、LVGL系统文件 一、GUI简介 在嵌入式系统中&#xff0c;emWin、LVGL、TouchGFX 和 Qt 是…...

Prometheus+Grafana实现对服务的监控

PrometheusGrafana实现对服务的监控 前言&#xff1a;PrometheusGrafana实现监控会更加全面&#xff0c;监控的组件更多 Prometheus官网 https://prometheus.io/docs/prometheus/latest/getting_started/ Grafana官网 https://grafana.com/docs/ 一、安装PrometheusGrafana 这…...

hook原理和篡改猴编写hook脚本

hook原理&#xff1a; hook是常用于js反编译的技术&#xff1b;翻译就是钩子&#xff0c;他的原理就是劫持js的函数然后进行篡改 一段简单的js代码 &#xff1a;这个代码是顺序执行的 function test01(){console.log(test01)test02() } function test02(){console.log(02)tes…...

Sign签证绕过

Sign的简介 Sign是指一种类似于token的东西 他的出现主要是保证数据的完整性&#xff0c;防篡改 就是一般的逻辑是 sign的加密的值和你输入的数据是相连的&#xff08;比如sign的加密是使用输入的数据的前2位数字配合SHA1 等这样的&#xff09; 绕过 &#xff1a;碰运气可以…...

【Vue篇】重剑无锋:面经PC项目工程化实战面经全解

目录 引言 一、项目功能演示 1. 目标 2. 项目收获 二、项目创建目录初始化 vue-cli 建项目 三、ESlint代码规范及手动修复 1. JavaScript Standard Style 规范说明 2. 代码规范错误 3. 手动修正 四、通过eslint插件来实现自动修正 五、调整初始化目录结构 1. 删除…...

JVM参数详解与实战案例指南(AI)

JVM参数详解与实战案例指南 一、JVM参数概述与分类 JVM参数是控制Java虚拟机运行时行为的关键配置项&#xff0c;合理设置这些参数可以显著提升应用性能。根据功能和稳定性&#xff0c;JVM参数主要分为三类&#xff1a; 标准参数&#xff1a;所有JVM实现都必须支持&#xff…...

C++通过空间配置器实现简易String类

C实现简易String类 在C中&#xff0c;使用空间配置器&#xff08;allocator&#xff09;实现自定义string类需要管理内存分配、释放及对象构造/析构。 #include <memory> #include <algorithm> #include <cstring> #include <stdexcept> #include &l…...

MyBatis:简化数据库操作的持久层框架

1、什么是Mybatis? MyBatis 本是apache的一个开源项目iBatis, 2010年这个项目由 apachesoftwarefoundation 迁移到了google code,由谷歌托管,并且改名为MyBatis 。 2013年11月迁移到Github。 iBATIS一词来源于“internet”和“abatis”的组合,是一个基于Java的持久层框…...

Spring Boot集成Spring AI与Milvus实现智能问答系统

在Spring Boot中集成Spring AI与Milvus实现智能问答系统 引言 随着人工智能技术的快速发展&#xff0c;越来越多的企业开始探索如何将AI能力集成到现有系统中。本文将介绍如何在Spring Boot项目中集成Spring AI和向量数据库Milvus&#xff0c;构建一个高效的智能问答系统。 …...

软件工程(六):一致性哈希算法

哈希算法 定义 哈希算法是一种将任意长度的输入&#xff08;如字符串、文件等&#xff09;转换为固定长度输出的算法&#xff0c;这个输出称为“哈希值”或“摘要”。 常见的哈希算法 哈希算法哈希位数特点MD5128位快速&#xff0c;但已不安全SHA-1160位安全性提高&#xf…...

Linux内存分页管理详解

Linux内存分页管理详解:原理、实现与实际应用 目录 Linux内存分页管理详解:原理、实现与实际应用 一、引言 二、内存分页机制概述 1. 虚拟地址与物理地址的划分 2. 分页的基本原理 三、虚拟地址到物理地址的转换 1. 地址转换流程 2. 多级页表的遍历 四、多级页表的…...

work-platform阅读

Redis存储的是字节数据&#xff0c;所以任何对象想要存进redis&#xff0c;都要转化成字节。对象转化为字节流的过程&#xff0c;叫序列化&#xff0c;反之&#xff0c;叫反序列化 Redis 序列化详解及高性能实践-CSDN博客https://blog.csdn.net/zhangkunls/article/details/14…...

在 Excel xll 自动注册操作 中使用东方仙盟软件————仙盟创梦IDE

windows 命令 "C:\Program Files\Microsoft Office\root\Office16\EXCEL.EXE" /X "C:\Path\To\仙盟.xll" excel 注册 Application.RegisterXLL "XLMAPI.XLL" 重点代码解析 excel 命令模式 [ExcelCommand(Description "使用参数")] …...

微调后的模型保存与加载

在Hugging Face Transformers库中&#xff0c;微调后的模型保存与加载方式因微调方法&#xff08;如常规微调或参数高效微调&#xff09;而异。 一、常规微调模型的保存与加载 1、 保存完整模型 使用 save_pretrained() 方法可将整个模型&#xff08;包含权重、配置、分词器…...

PostgreSQL 日常维护

目录 一、基本使用 1、登录数据库 2、数据库操作 &#xff08;1&#xff09;列出库 &#xff08;2&#xff09;创建库 &#xff08;3&#xff09;删除库 &#xff08;4&#xff09;切换库 &#xff08;5&#xff09;查看库大小 3、数据表操作 &#xff08;1&#xff…...

Ntfs!ATTRIBUTE_RECORD_HEADER结构$INDEX_ROOT=0x90的一个例子

Ntfs!ATTRIBUTE_RECORD_HEADER结构$INDEX_ROOT0x90的一个例子 1: kd> dx -id 0,0,899a2278 -r1 ((Ntfs!_FILE_RECORD_SEGMENT_HEADER *)0xc431a400) ((Ntfs!_FILE_RECORD_SEGMENT_HEADER *)0xc431a400) : 0xc431a400 [Type: _FILE_RECORD_SEGMENT_HEADER …...

leetcode hot100刷题日记——7.最大子数组和

class Solution { public:int maxSubArray(vector<int>& nums) {//方法一&#xff1a;动态规划//dp[i]表示以i下标结尾的数组的最大子数组和//那么在i0时&#xff0c;dp[0]nums[0]//之后要考虑的就是我们要不要把下一个数加进来&#xff0c;如果下一个数加进来会使结…...

LlamaIndex

1、大语言模型开发框架的价值是什么? SDK:Software Development Kit,它是一组软件工具和资源的集合,旨在帮助开发者创建、测试、部署和维护应用程序或软件。 所有开发框架(SDK)的核心价值,都是降低开发、维护成本。 大语言模型开发框架的价值,是让开发者可以更方便地…...