微信小程序使用 SSE 流式输出,进行 Ai 对话

微信小程序实战:利用SSE流式输出打造丝滑AI对话体验 本文详细介绍了如何在微信小程序中利用SSE(Server-Sent Events)技术实现流式输出,打造流畅的AI对话体验。通过配置wx.request参数、监听数据流事件、处理ArrayBuffer数据等核心步骤,开发者可以显著提升用户交互体验。文章还提供了性能优化、异常处理及安全防护等实用技巧,帮助开发者避免常见陷阱。 阅读详情
AI摘要

本文介绍了微信小程序使用 SSE 流式输出进行 AI 对话的实现逻辑,包括用 wx.request 开启流式、监听返回数据、处理 SSE 返回数据等。还指出了开发中遇到的问题,如真机调试无反应、数据非流式返回等,并给出解决办法,如升级工具、调整后端 Nginx 配置。

一.实现逻辑

1.使用 wx.request 开启流式输出(当然后端 也要开启 transfer-encoding: chunked)有些后端会默认开启 

this.requestTask = wx.request({
      url: 'xxxxxx',
      enableChunked: true, //开启 transfer-encoding chunked。
      method: 'POST',
      header: {
        'content-type': 'application/json',
        Authorization: `Bearer ${this.data.token}`
      },
      data: {
        question: message
      }
    })

2.使用 onChunkReceived 来监听返回的数据

    this.requestTask.onChunkReceived((res) => {
      console.log(res.data, 888)
      const parsed = this.decodeUint8Array(res.data)
      const temp = this.extractContentFromStream(parsed)
      console.log(temp)//转换之后的内容
    })

3.处理sse返回的数据(默认返回的是 ArrayBuffer(87) {} )

import encoding from '../../utils/encoding.js'
  
decodeUint8Array(uint8Array) {
    const data16 = this.buf2hex(uint8Array)
    const requestData = this.hexToStr(data16)
    return requestData
  },
  buf2hex(arrayBuffer) {
    return Array.prototype.map.call(new Uint8Array(arrayBuffer), (x) => ('00' + x.toString(16)).slice(-2)).join('')
  },

  hexToStr(hex) {
    let trimedStr = hex.trim()
    let rawStr = trimedStr.substr(0, 2).toLowerCase() === '0x' ? trimedStr.substr(2) : trimedStr
    let len = rawStr.length
    if (len % 2 !== 0) {
      return ''
    }
    let curCharCode 
    let resultStr = [] 
    for (let i = 0; i < len; i = i + 2) {
      curCharCode = parseInt(rawStr.substr(i, 2), 16)
      resultStr.push(curCharCode)
    }
    let bytesView = new Uint8Array(resultStr) 
    let str = new encoding.TextDecoder().decode(bytesView)
    return str
  }

4.需要两个文件 encoding.js 和 encoding-indexes.js 文件

二、问题

1.微信开发者工具中的 真机调试没反应(测试机 微信版本8.0.60)

   使用微信开发者工具的 预览 或者 上传体验版本 测试

2.在微信开发者工具中 即使你开启了  enableChunked: true, 数据也不是 流式返回,而是只响应了一次,一次性返回的

     升级最新版本的 微信开发者工具(我是这个原因,微信开发者工具太旧)

3.这时会遇到一个新的问题:微信开发者工具是 流式返回 但是真机测试又是一次性返回。。。。当时我真是吐血 ,看了微信开放社区 和 百度 ai 都没解决方法,最后发现是 后端 Nginx 配置问题 

location /products/ai/ {
    proxy_pass http://localhost:5000;      
    proxy_http_version 1.1;               
    proxy_set_header Connection "";        
    proxy_buffering off;                     
    chunked_transfer_encoding on;             
    proxy_hide_header Content-Length;        
}
后端在 nginx 加入之后 真机也能 流式返回

4.为什么会这样呢

因为后端使用的是 宝塔 ,默认会将 chunked 流式响应缓存/合并,有时即使后端返回 chunked,前端收到的却是带 Content-Length 的完整包,即是 一次性的返回数据,也就是说被 nginx 缓冲了流式输出,最终一次性返回。 上诉配置 就是 禁用缓存
微信小程序-接入sse数据流并实现打字机效果( ChatGPT ) 微信小程序接入sse接口并实现打字机效果 阅读详情

相关推荐

微信小程序中基于 SSE 实现轻量级实时通讯 —— 原理、实践与对比分析

本文深入探讨了在微信小程序开发中,如何通过 wx.request + enableChunked + onChunkReceived 方式,模拟 Server-Sent Events(SSE)实现轻量级实时通讯机制。文章系统分析了微信小程序常见的通讯方式,详解 SSE 的原理、优势及完整封装实践,结合实际代码模块,演示小程序端如何高效接收服务器推送的数据。并通过对比 WebSocket、TCP、UDP 等方案,总结适用场景与最佳实践,帮助开发者在不同业务需求下选择最优通讯策略,兼顾性能与稳定性。

qq_40791475的博客 3512

微信小程序中使用Server-Sent Events(SSE)

使用wx.request的chunked模式在微信小程序里实现Server-Sent Events(SSE)

aurawing的专栏 9851

微信小程序SSE流式响应实现:AI对话逐字输出的完整方案

SSE(Server-Sent Events)是一种基于HTTP长连接的服务器推送技术,允许服务端持续向客户端发送数据。其核心原理是客户端发起一次请求后,连接保持打开,服务端可不断写入数据,浏览器通过EventSource或fetch流式读取。这种机制天然适合AI对话、实时通知、行情刷新等场景。然而在微信小程序中,原生wx.request不支持流式读取,也没有EventSource。借助miniprogram-fetch-stream库,底层通过enableChunked和onChunkReceived获取

weixin_33423874的博客 291

微信小程序对接SSE接口记录

微信小程序对接SSE接口记录,主要记录了一些使用注意事项

weixin_44860135的博客 1万+

微信小程序实战:基于SSE流式输出打造丝滑AI对话体验

本文详细介绍了如何在微信小程序中利用SSE(Server-Sent Events)技术实现流式AI对话体验。通过实战案例解析了后端配置、前端实现及性能优化技巧,帮助开发者打造更自然的AI交互体验,显著提升用户留存率。重点涵盖SSE流式输出、wx.request配置及异常处理等关键技术点。

weixin_29324401的博客 506

微信小程序AI对话卡在流式输出?手把手教你排查wx.request + SSE的三大坑(附Nginx配置)

本文详细解析了微信小程序AI对话中流式输出(SSE)的实现与常见问题排查,重点解决wx.request + SSE在真机调试中的三大坑点,包括开发者工具版本、微信版本兼容性和Nginx代理缓冲问题,并提供了完整的Nginx配置方案和数据处理优化技巧。

weixin_30336061的博客 317

微信小程序AI对话卡在流式输出?手把手教你排查wx.request+SSE的Nginx配置坑

本文详细解析了微信小程序AI对话流式输出中遇到的Nginx配置问题,提供了从开发者工具到真机调试的全链路解决方案。重点介绍了如何通过优化Nginx配置(如关闭proxy_buffering)和正确处理前端SSE数据,确保AI对话的流畅体验。

weixin_28715953的博客 259

告别轮询!用wx.request的onChunkReceived在微信小程序里实现打字机效果的AI聊天

本文详细介绍了如何在微信小程序中利用`wx.request`的`onChunkReceived`实现流式输出的AI打字机效果。通过解析二进制流、优化渲染性能及避坑指南,帮助开发者打造丝滑的AI对话体验,显著提升用户参与感和响应速度。

weixin_28716443的博客 360

Go+微信小程序实战:构建流式ChatGPT对话应用

在AI应用开发领域,API集成与实时通信是核心技术。其原理在于通过后端服务桥接大模型能力,利用WebSocket等协议实现低延迟数据交换。这项技术的价值在于能够将前沿AI能力无缝融入实际业务场景,显著提升用户体验和交互自然度。典型的应用场景包括智能客服、内容创作助手和个性化推荐系统。本文以热门的ChatGPT API和微信小程序生态为例,深入探讨如何利用Go语言的高并发特性和小程序的便捷生态,构建支持流式输出与上下文管理的智能对话应用,并分享在工程实践中关于性能优化和部署配置的关键经验。

weixin_33725239的博客 513

uniapp结合SSE实现小程序AI聊天流式打字机效果

本文详细介绍了如何在uniapp中结合SSE技术实现小程序AI聊天的流式打字机效果。通过SSE的实时数据传输和前端动画处理,模拟真人对话体验,显著提升用户交互感。文章包含完整代码示例和性能优化方案,帮助开发者快速实现类似功能。

weixin_29009881的博客 694

使用 UniApp 在微信小程序中实现 SSE 流式响应

服务端发送事件(Server-Sent Events, SSE)是一种允许服务器向客户端推送实时更新的技术。SSE 提供了一种单向的通信通道,服务器可以持续地向客户端发送数据,而不需要客户端频繁发起请求。这对于需要实时更新的应用场景非常有用。流式传输的特点是将数据逐步传输给客户端,而不需要等待完整的响应生成。这意味着在传输过程中,数据会逐步发送给客户端,而不是一次性发送所有数据,对于基于文本的AI对话来说,这意味着每个单词或短语可以随着模型预测它们时即时显示出来,从而营造出一种更加自然和动态的交流体验。

AaronZZH 的博客 8452

Tao-8k前端交互应用:集成微信小程序的AI对话功能开发

本文介绍了如何在星图GPU平台上自动化部署tao-8k镜像,以快速构建集成于微信小程序的AI对话应用。通过该方案,开发者能够轻松为小程序添加具备上下文记忆能力的智能客服或聊天助手,实现流畅的交互体验。

weixin_42524864的博客 32

微信小程序AI对话模板:流式输出与上下文管理实战

微信小程序与AI大模型结合,是当前智能客服、对话机器人等场景的常见技术方案。其核心原理在于前后端分工:小程序端负责界面渲染与消息收发,服务端封装模型API、维护会话上下文并处理流式返回。这种架构的技术价值在于降低AI对话产品的开发门槛,同时保障密钥安全与响应体验。典型应用场景包括智能客服、个人助手、教育答疑等。本文分享的AI对话小程序模板,完整实现了用户发消息、请求AI、流式回显、存储历史的链路,并提供了上下文轮数限制、流式中文乱码处理、setData性能优化等工程实践,帮助开发者快速跑通并二次开发。

weixin_42668301的博客 237

uni-app 中实现 AI 对话功能的流式数据(SSE - Server-Sent Events)处理

H5 端:最简单,直接使用标准的API。App 端不支持流式,需要借助fetchpolyfill 库(如)来实现,这也是最现代、最接近 Web 标准的做法。微信小程序端:能力最受限,但可以通过标志接收分块数据,然后手动编写解析器来处理 SSE 格式的字符串流。这是最复杂但也是唯一可行的方法。代码组织:利用uni-app强大的条件编译#ifdef#endif),可以将所有平台的逻辑封装在统一的接口后面,让业务代码保持干净整洁。

chaoxxggg的博客 2270

AI对话微信小程序模板:从流式SSE到上线避坑指南

大模型对话应用开发中,流式输出(SSE)是决定产品体验的关键技术,它能将模型逐字生成的内容实时推送给用户,告别等待时的焦虑感。然而微信小程序受限于域名校验、HTTPS证书和基础库能力,无法直接连接大模型接口,需要服务端中转。通过微信的enableChunked参数,小程序端可以基于普通HTTPS请求接收SSE分块数据,实现打字机效果,兼顾实现成本与交互体验。这种“前端+网关+模型”的链路模式,正是AI对话小程序模板的核心价值:屏蔽底层协议细节,让开发者聚焦对话逻辑与产品验证。无论是快速搭建原型,还是生产环境

weixin_29057065的博客 348

AI聊天机器人微信小程序模板:流式输出与上下文裁剪

AI聊天机器人落地微信小程序时,影响体验的核心是对话数据流:消息状态、流式输出、上下文裁剪与本地缓存共同决定长会话稳定性。流式输出基于分块传输与SSE,将模型回复逐段送达视图,降低首字等待;上下文裁剪按字符预算保留最近多轮,避免超限与费用膨胀;本地缓存采用分key存储和容量上限,保障历史会话回显。其技术价值在于提升弱网、切后台和长会话场景的稳定性,适用于客服助手、知识问答、教育咨询等AI对话入口。模板将请求封装、会话管理、消息气泡和页面状态拆分到config、utils、components与pages,便

weixin_34242819的博客 132

什么是流式输出(SSE):从概念到 FastAPI 实践,再到 TDesign AI Chat 小程序的接入

本指南围绕 TDesign 微信小程序 AI Chat 组件库配套文档《什么是流式输出》展开,系统讲解 Server-Sent Events(SSE)流式输出的核心概念、典型应用场景,以及在 Python(FastAPI)侧创建 SSE 接口的完整步骤;在此基础上结合仓库源码,深入说明大模型(LLM)采用流式输出的原因,以及如何在微信小程序中通过 `wx.request` 的分块接收能力解析流式数

gitblog_00788的博客 393

Apache Hop环境搭建实战:从零到一的下载、安装与配置指南

本文详细介绍了Apache Hop环境搭建的全过程,包括下载、安装与配置指南。从选择正确的JDK17版本到设置关键环境变量,再到启动GUI界面和解决常见问题,提供了全面的实战指导。适合数据工程师和ETL开发者快速上手这一强大的数据集成工具。

weixin_42634811的博客 574
上一篇: uniapp中使用pinia 以及持久化插件
const_TLJ
博客等级 码龄4年 34粉丝 8原创
评论
成就一亿技术人!
拼手气红包6.0元
还能输入1000个字符
 
 条评论被折叠 查看
添加红包

请填写红包祝福语或标题

个

红包个数最小为10个

元

红包金额最低5元

当前余额3.43元 前往充值 >
需支付:10.00元
成就一亿技术人!
领取后你会自动成为博主和红包主的粉丝 规则
hope_wisdom
发出的红包
实付元
使用余额支付
点击重新获取
扫码支付
钱包余额 0

抵扣说明:

1.余额是钱包充值的虚拟货币,按照1:1的比例进行支付金额的抵扣。
2.余额无法直接购买下载,可以购买VIP、付费专栏及课程。

余额充值