微信小程序-接入sse数据流并实现打字机效果( ChatGPT )

从流中获取的数据格式如下

图1

小程序调用SSE接口

const requestTask = wx.request({
      url: `xxx`, // 需要请求的接口地址
      enableChunked: true, // enableChunked必须为true
      method: "GET",
      timeout: '120000',
      success(res) {
        console.log(res.data)
      },
      fail: function (error) {
        // 请求失败的操作
        console.error(error);
      },
      complete: function () {
        // 请求完成的操作,无论成功或失败都会执行
        console.log('请求完成', str);
      }
    })
    // 监听服务端返回的数据
    requestTask.onChunkReceived(res => {
      console.log( res, res.data);
    })

我这边接收到的数据类型为Uint8Array,需要处理成text文本(如上图)

在这里插入图片描述

 // 监听服务端返回的数据
    requestTask.onChunkReceived(res => {
      console.log( res, res.data);
      // Uint8Array转为text格式
      let arrayBuffer = res.data;
      let decoder = new TextDecoder('utf-8');
      let text = decoder.decode(arrayBuffer);
      //正则匹配上所有event:data后面的文字
      const eventRegex = /event:data\ndata:"data:(.*?)"/g;
      const eventRegexErr = /event:600\ndata:"(.*?)"/g;
      let matches = [];
      let match;
      if (text.indexOf('600') != -1) {//如果获取响应失败
        while ((match = eventRegexErr.exec(text)) !== null) {
          wx.showToast({
            title: match[1],
          })
          matches.push(match[1]);
        }
        str = str + matches.join('')
      } else {//如果获取响应成功
        while ((match = eventRegex.exec(text)) !== null) {
          matches.push(match[1]);
        }
        //处理成字符串
        str = str + matches.join('')
        console.log(text, str);
      }
    })

使对话有打字机效果

参考自:小程序实现 ChatGPT 聊天打字兼自动滚动效果

that.handleRequestResolve(str)
handleRequestResolve(result) {
    const timestamp = Date.now();
    const index = this.data.messageList.length
    const newMessageList = `messageList[${index}]`
    const contentCharArr = result.trim().split("")
    const content_key = `messageList[${index}].content`
    const finished_key = `messageList[${index}].finished`
    this.setData({
      thinking: false,
      [newMessageList]: {
        id: timestamp,
        finished: false
      }
    })
    currentContent = ''
    this.showText(0, content_key, finished_key, contentCharArr);
  },
  showText(key = 0, content_key, finished_key, value) {
    /* 所有内容展示完成 */
    if (key >= value.length) {
      this.setData({
        loading: false,
        [finished_key]: true
      })
      // wx.vibrateShort()
      return;
    }
    currentContent = currentContent + value[key]
    /* 渲染回话内容 */
    this.setData({
      [content_key]: currentContent,
    })
    setTimeout(() => {
      /* 递归渲染内容 */
      this.showText(key + 1, content_key, finished_key, value);
    }, 50);
  },

完整代码

 getDataStream(data) {
    let str = ''
    let that = this
    // 基础库为2.33.0
    const requestTask = wx.request({
      enableChunked: true, // 开启分片模式
      url: 'xxx', // 需要请求的接口地址
      enableChunked: true, // enableChunked必须为true
      method: "GET",
      responseType: "arraybuffer",
      timeout: '120000',
      success(res) {
        console.log(res.data)
      },
      fail: function (error) {
        // 请求失败的操作
        console.error(error);
      },
      complete: function () {
        // 请求完成的操作,无论成功或失败都会执行
        console.log('请求完成', str);
      }
    })
    // 监听服务端返回的数据
    requestTask.onChunkReceived(res => {
      console.log(res, res.data);
      // Uint8Array转为text格式
      let arrayBuffer = res.data;
      let decoder = new TextDecoder('utf-8');
      let text = decoder.decode(arrayBuffer);
      //正则匹配上所有event:data后面的文字
      const eventRegex = /event:data\ndata:"data:(.*?)"/g;
      const eventRegexErr = /event:600\ndata:"(.*?)"/g;
      let matches = [];
      let match;
      if (text.indexOf('600') != -1) { //如果获取响应失败
        while ((match = eventRegexErr.exec(text)) !== null) {
          wx.showToast({
            title: match[1],
          })
          matches.push(match[1]);
        }
        str = str + matches.join('')
      } else { //如果获取响应成功
        while ((match = eventRegex.exec(text)) !== null) {
          matches.push(match[1]);
        }
        //处理成字符串
        str = str + matches.join('')
        console.log(text, str);
      }
      that.handleRequestResolve(str)

    })
    requestTask.offChunkReceived(res => {
      console.log('事件完成状态');
    })
  },
  handleRequestResolve(result) {
    const timestamp = Date.now();
    const index = this.data.messageList.length
    const newMessageList = `messageList[${index}]`
    const contentCharArr = result.trim().split("")
    const content_key = `messageList[${index}].content`
    const finished_key = `messageList[${index}].finished`
    this.setData({
      thinking: false,
      [newMessageList]: {
        id: timestamp,
        finished: false
      }
    })
    currentContent = ''
    this.showText(0, content_key, finished_key, contentCharArr);
  },
  showText(key = 0, content_key, finished_key, value) {
    /* 所有内容展示完成 */
    if (key >= value.length) {
      this.setData({
        loading: false,
        [finished_key]: true
      })
      // wx.vibrateShort()
      return;
    }
    currentContent = currentContent + value[key]
    /* 渲染回话内容 */
    this.setData({
      [content_key]: currentContent,
    })
    setTimeout(() => {
      /* 递归渲染内容 */
      this.showText(key + 1, content_key, finished_key, value);
    }, 50);
  },

本文来自互联网用户投稿,该文观点仅代表作者本人,不代表本站立场。本站仅提供信息存储空间服务,不拥有所有权,不承担相关法律责任。如若转载,请注明出处:/a/526241.html

如若内容造成侵权/违法违规/事实不符,请联系我们进行投诉反馈qq邮箱809451989@qq.com,一经查实,立即删除!

相关文章

DNFOMP:杂乱环境中自动驾驶汽车导航的动态神经场最优运动规划器

DNFOMP:杂乱环境中自动驾驶汽车导航的动态神经场最优运动规划器 附赠自动驾驶学习资料和量产经验:链接 摘要 本文介绍了DNFOMP:杂乱环境中自动驾驶汽车导航的动态神经场最优运动规划器。动态变化环境中的运动规划是自动驾驶中最复杂的挑战之…

fakebook-攻防世界

题目 先目录扫描一下 dirseach 打开flag.php是空白的 访问robots.txt,访问user.php.bak <?php class UserInfo { public $name ""; public $age 0; public $blog ""; public function __construct($name, $age, $blog) { …

01 _ 分布式缘何而起:从单兵,到游击队,到集团军

这里先来聊聊什么是分布式。 与其直接用些抽象、晦涩的技术名词去给分布式下一个定义&#xff0c;还不如从理解分布式的发展驱动因素开始&#xff0c;我们一起去探寻它的本质&#xff0c;自然而然地也就清楚它的定义了。 这里将介绍分布式的起源&#xff0c;是如何从单台计算…

基于java+springboot+vue实现的健身房管理系统(文末源码+Lw)23-223

摘 要 传统办法管理信息首先需要花费的时间比较多&#xff0c;其次数据出错率比较高&#xff0c;而且对错误的数据进行更改也比较困难&#xff0c;最后&#xff0c;检索数据费事费力。因此&#xff0c;在计算机上安装健身房管理系统软件来发挥其高效地信息处理的作用&#xf…

Python异常值分析

异常值分析是检验数据是否有录入错误以及含有不合常理的数据。忽视异常值的存在是十分危险的&#xff0c;不加剔除地把异常值包括进数据的计算分析过程中&#xff0c;对结果会产生不良影响&#xff1b;重视异常值的出现&#xff0c;分析其产生的原因&#xff0c;常常成为发现问…

Grafana告警(邮件)自定义模板配置

一年前给客户部署配置过grafana&#xff0c;告警配置也是用的原始的&#xff0c;客户在使用过程中只需要一些核心点信息&#xff0c;想要实现这个就需要用Grafana的自定义告警模板以及编辑邮件模板。 通知模板 模板信息的配置中查阅了相关资料&#xff0c;自己组装了一套&…

获取淘宝销量API商品详情页原数据APP接口:测试key获取(含测试链接)

淘宝/天猫获得淘宝app商品详情原数据 API 返回值说明 item_get_app-获得淘宝app商品详情原数据 公共参数 名称类型必须描述keyString是调用key&#xff08;必须以GET方式拼接在URL中&#xff09;secretString是调用密钥api_nameString是API接口名称&#xff08;包括在请求地…

静态中间继电器 HJZ-J908 AC380V 导轨安装 JOSEF约瑟

系列型号&#xff1a; HJZ-J902静态中间继电器&#xff1b;HJZ-J905静态中间继电器&#xff1b; HJZ-J907静态中间继电器&#xff1b;HJZ-J907L静态中间继电器&#xff1b; HJZ-J908静态中间继电器&#xff1b;HJZ-J909静态中间继电器&#xff1b; HJZ-J910静态中间继电器&…

以XX公司为例的Acrel1000DP分布式光伏监控系统在5.98MW分布式光伏10KV并网系统的应用

分布式光伏监控系统 目前&#xff0c;光伏电站中装设的电力二次系统主要有光伏后台监控系统、计量系统、远动通讯屏、调度数据网屏、防孤岛保护装置、电能质量在线监测装置、频率电压紧急控制装置等&#xff0c;部分光伏电站还建设有向发电集团传输数据的系统。 分布式光伏监…

基于 SSM 物业管理系统设计与实现(内附设计LW + PPT+ 源码下载)

摘 要 进入二十一世纪以来&#xff0c;计算机技术蓬勃发展&#xff0c;人们的生活发生了许多变化。很多时候人们不需要亲力亲为的做一些事情&#xff0c;通过网络即可完成以往需要花费很多时间的操作&#xff0c;这可以提升人们的生活质量。计算机技术对人们生活的改变不仅仅包…

[C++][算法基础]模拟散列表(哈希表)

维护一个集合&#xff0c;支持如下几种操作&#xff1a; I x&#xff0c;插入一个整数 x&#xff1b;Q x&#xff0c;询问整数 x 是否在集合中出现过&#xff1b; 现在要进行 N 次操作&#xff0c;对于每个询问操作输出对应的结果。 输入格式 第一行包含整数 N&#xff0c;…

JS小项目-计算器

需求&#xff1a;根据素材制作如图所示页面&#xff0c;在页面输入第一个数和第二个数&#xff0c;单击&#xff08;加&#xff09;、&#xff0d;&#xff08;减&#xff09;、&#xff0a;&#xff08;乘&#xff09;、&#xff0f;&#xff08;除&#xff09;按钮时&#xf…

动态规划刷题(算法竞赛、蓝桥杯)--区间DP

1、题目链接&#xff1a;[NOI1995] 石子合并 - 洛谷 #include <bits/stdc.h> using namespace std; const int N210; int n,a[N],s[N]; int f[N][N];//存最小值 int g[N][N];//存最大值 int main(){memset(f,0x3f,sizeof f);//求最小初始化为无穷大 memset(g,-0x3f,size…

智慧能耗预付费系统解决方案——用户侧能源计量及收费

安科瑞电气股份有限公司 祁洁 15000363176 一、方案组织架构 二、方案特点 &#xff08;1&#xff09;多样组网&#xff0c;多样设备接入&#xff0c;多样部署&#xff1b; &#xff08;2&#xff09;集团管理、项目分级、分层拓扑&#xff1b; &#xff08;3&#xff09…

ImageView显示叠加图

imageView显示叠加图&#xff1a;背景是绿色&#xff0c;中间为add图标 <ImageViewandroid:id"id/iv_add_food"android:layout_width"80dp"android:layout_height"80dp"android:layout_below"id/iv_filter"android:layout_marginTo…

C语言 03 VSCode开发

安装好 C 语言的开发环境后&#xff0c;就需要创建项目进行开发了。 使用 IDE&#xff08;集成开发环境&#xff09;进行开发了。 C 语言的开发工具很多&#xff0c;现在主流的有 Clion、Visual Studio、VSCode。 这里以 VSCode 作为演示。 创建项目 安装 VSCode。 推荐直接在…

抖音-引流私域转化模式1.0现场视频,从抖音源源不断把人加到私域,

抖音-引流私域转化模式1.0现场视频&#xff0c;从抖音源源不断把人加到私域&#xff0c;让加到私域的粉丝买单 抖音-引流私域转化模式1.0现场视频&#xff0c;从抖音源源不断把人加到私域 - 百创网-源码交易平台_网站源码_商城源码_小程序源码 课程内容&#xff1a; 01.第一…

yolov8草莓及病害检测项目开发(python开发,带有训练模型,可以重新训练,并有Pyqt5界面可视化)

本次检测系统&#xff0c;可以通过图片、视频或摄像头三种形式检测&#xff0c;检测出开花、结果、熟果、草莓叶子健康、叶子缺钙、灰叶斑病等八大类别。基于最新的YOLO-v8训练的草莓检测模型和完整的python代码以及草莓的训练数据&#xff0c;下载后即可运行&#xff0c;输出检…

Centos7 安装GitLab

安装环境: 虚拟机:Centos7 最小安装 4核8G 下载GitLab 本次实验下载的是 gitlab-ce-14.1.0-ce.0.el7.x86_64.rpm 官网截图 清华源截图 安装包下载地址(官网;下载CE版本,EE是收费版本):https://packages.gitlab.com/gitlab/gitlab-ce国内镜像源下载地址(清华源):htt…

websocket实践

文章目录 背景WebSocket API使用场景优点 实例步骤 1: 设置 WebSocket 服务器步骤 2: 创建客户端 HTML 页面步骤 3: 测试 WebSocket 通信注意事项实际操作 参考资料 WebSocket 是一种在单个 TCP 连接上进行全双工通信的协议。它使得浏览器和服务器只需建立一个连接&#xff0c;…