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

中国那个公司的网站做的最好看百度搜索页面

中国那个公司的网站做的最好看,百度搜索页面,如何做网站海报,商城网站风格背景 让Cursor生成小程序中大模型调用内容回复的流式输出时一直有问题,参考整理此文章。 参考原文:https://blog.csdn.net/weixin_47684422/article/details/145859543 一、什么是流式传输? 流式传输(Streaming)指的…

背景

让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标签等无用数据,需按业务过滤。

http://www.dtcms.com/wzjs/55754.html

相关文章:

  • 带积分的网站建设seo秘籍优化课程
  • 网站开发是什么工作百家号关键词seo优化
  • 怎样在网站上做专栏网站优化外包顾问
  • 网站怎么发布做微商站长之家的作用
  • 网站建设设计流程给公司做网站的公司
  • 浙江省建设厅 网站是多少南宁一站网网络技术有限公司
  • 罗湖网站建设的公司找资源最好的是哪个软件
  • 个人网站架设关键词分类哪八种
  • 网站文章后台写完前台不显示天津seo外包团队
  • 怎么引流到微信呢seo网络推广专员招聘
  • 天元建设集团有限公司电话号码seo新人培训班
  • 大型建站公司做网络推广的团队
  • 网站开发android客户端天津网站制作系统
  • 做食品网站需要什么条件天天seo站长工具
  • 网站开发阶段企业培训课程安排表
  • 县政府网站建设方案徐州seo外包公司
  • 网站维护项目免费的外链平台
  • 深圳购物商城网站建设网络销售公司怎么运作
  • 网站制作代码竞价网站
  • 企业的网站建设费账务处理广州:推动优化防控措施落
  • 微商平台appseo的中文是什么
  • 能免费做封面的网站指数运算公式大全
  • 网站图片自动轮换怎么做的山西优化公司
  • 网站链接分析seo快速整站上排名教程
  • 勒流网站建设百度搜索一下百度
  • 大连专业手机自适应网站制作登封网络推广公司
  • 广告公司有什么业务seo关键词排名优化系统源码
  • 建造师信息查询网郑州seo优化
  • discuz做资讯网站合适吗百度导航官网
  • 青岛企业如何建网站一个新手怎么去运营淘宝店铺