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

news2024/11/24 19:01:54

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

图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 聊天打字兼自动滚动效果

 handleRequestResolve(result) {
    this.setData({
      currentContent: ''
    })
    const contentCharArr = result.trim().split("")
    this.showText(0, contentCharArr);
  },
  showText(key = 0, value) {
    /* 所有内容展示完成 */
    if (key >= value.length) {
      // wx.vibrateShort()
      return;
    }
    /* 渲染回话内容 */
    this.setData({
      currentContent: this.data.currentContent + value[key],
    })
    setTimeout(() => {
      /* 递归渲染内容 */
      this.showText(key + 1, 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) {
    this.setData({
      currentContent: ''
    })
    const contentCharArr = result.trim().split("")
    this.showText(0, contentCharArr);
  },
  showText(key = 0, value) {
    /* 所有内容展示完成 */
    if (key >= value.length) {
      // wx.vibrateShort()
      return;
    }
    /* 渲染回话内容 */
    this.setData({
      currentContent: this.data.currentContent + value[key],
    })
    setTimeout(() => {
      /* 递归渲染内容 */
      this.showText(key + 1, value);
    }, 50);
  },

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

如若内容造成侵权/违法违规/事实不符,请联系多彩编程网进行投诉反馈,一经查实,立即删除!

相关文章

Golang | Leetcode Golang题解之第18题四数之和

题目&#xff1a; 题解&#xff1a; func fourSum(nums []int, target int) (quadruplets [][]int) {sort.Ints(nums)n : len(nums)for i : 0; i < n-3 && nums[i]nums[i1]nums[i2]nums[i3] < target; i {if i > 0 && nums[i] nums[i-1] || nums[i]…

今日科普:车祸导致颈部挥鞭样损伤,该怎样治疗

王先生因一次严重的车祸遭遇了颈部挥鞭样损伤。车祸后&#xff0c;他感到颈部和上肢持续性的刀割样疼痛&#xff0c;麻木不堪&#xff0c;严重影响了日常生活。王先生为了寻求疼痛缓解&#xff0c;来到了北京精诚博爱医院。经过详细的检查&#xff0c;医生决定为他实施颈交感射…

高端大气自适应全屏酷炫渐变卡片html源码图片切换特效html5源码导航引导网站源码

源码特点&#xff1a; 1&#xff1a;手工书写DIVCSS、代码精简无冗余。 2&#xff1a;自适应结构&#xff0c;全球先进技术&#xff0c;高端视觉体验。 3&#xff1a;SEO框架布局&#xff0c;栏目及文章页均可独立设置标题/关键词/描述。 4&#xff1a;附带测试数据、安装教程、…

少儿编程 2024年3月电子学会图形化编程等级考试Scratch二级真题解析(判断题)

2024年3月scratch编程等级考试二级真题 判断题&#xff08;共10题&#xff0c;每题2分&#xff0c;共20分&#xff09; 26、下列积木块运行结果为false 答案&#xff1a;错 考点分析&#xff1a;考查积木综合使用&#xff0c;重点考查逻辑或积木的使用&#xff0c;或运算是只…

postgresql发布和订阅

一、发布订阅介绍 发布和订阅使用了pg的逻辑复制的功能&#xff0c;通过发布端创建publication与表绑定&#xff0c;订阅端创建subscription同时会在发布端创建逻辑复制槽实现逻辑复制功能 逻辑复制基于 发布&#xff08;Publication&#xff09; 与 订阅&#xff08;Subscri…

性能优化 - 你知道开发React项目中,可以做哪些性能优化吗

难度级别:中高级及以上 提问概率:75% 在React项目开发中,面临着比较大的问题就是组件更新以及重复渲染的问题,基于这两点,我们可以在日常开发工作中,可以通过以下几点,来提升React的性能,加快组件更新对比,避免过多的重复渲染问题。 …

FR中隐藏系统管理--用户管理中 表格中每条数据中的编辑按钮,删除按钮

比如隐藏删除按钮&#xff1a; var userTableTools BI.Constants.getConstant("dec.constant.user.table.tools")for(var key in userTableTools){if(key "delete"){var deleteItem userTableTools["delete"]deleteItem.invisible true;}}

python|map

# 定义一个平方函数 def square(x): return x ** 2 # 创建一个数字列表 numbers [1, 2, 3, 4, 5] # 使用 map 函数将平方函数应用于列表中的每个元素 squares map(square, numbers) #将numbers绑定上一个函数 print(type(square)) print(square)# 将结果转换为列表…

Macos 部署自己的privateGpt(2024-0404)

Private Chatgpt 安装指引 https://docs.privategpt.dev/installation/getting-started/installation#base-requirements-to-run-privategpt 下载源码 git clone https://github.com/imartinez/privateGPT cd privateGPT安装软件 安装&#xff1a; Homebrew /bin/bash -c…

游戏公司面试题系列-CocosCreator实现虚拟摇杆控制角色移动中心旋转自转小球割草旋转逻辑

游戏公司面试题系列-CocosCreator实现虚拟摇杆控制角色移动&中心旋转自转小球&割草旋转逻辑<&#xff01;&#xff01;&#xff01;文章末尾有完整代码下载链接地址&#xff01;&#xff01;&#xff01;> Hello大家好&#xff01;今天我们来用最新的CocosCreat…

老子云、AMRT3D、眸瑞科技

老子云概述 老子云3D可视化快速开发平台&#xff0c;集云压缩、云烘焙、云存储云展示于一体&#xff0c;使3D模型资源自动输出至移动端PC端、Web端&#xff0c;能在多设备、全平台进行展示和交互&#xff0c;是全球领先、自主可控的自动化3D云引擎。 平台架构 平台特性 1、基…

深入了解iOS内存(WWDC 2018)笔记-内存诊断

主要记录下用于分析iOS/macOS 内存问题的笔记。 主要分析命令&#xff1a; vmmap, leaks, malloc_history 一&#xff1a;前言 有 3 种思考方式 你想看到对象的创建吗&#xff1f;你想要查看内存中引用对象或地址的内容吗&#xff1f;或者你只是想看看 一个实例有多大&#…

Utilize webcam to capture photo with camera

1. Official Guide& my github Official course my github 2. Overcome Webcam js Error in Chrome: Could not access webcam link 直接把代码拷贝到本机的下述目录下 To ignore Chrome’s secure origin policy, follow these steps. Navigate to chrome://flags/#un…

nginx 配置访问地址和解决跨域问题(反向代理)

1、配置访问地址&#xff08;通过ip访问&#xff09; //配置ip访问地址 location ^~/auditApp{alias /usr/local/front-apps/cbd/auditApp;index index.html;if (!-e $request_filename) {rewrite ^/(.*) /auditApp/index.html last;break;}} 2、解决跨域问题&…

Unity2023使用sdkmanager命令行工具安装Android SDK

1&#xff0c;下载cmdline-tools&#xff0c;官网地址&#xff1a;https://developer.android.com/studio或者https://dl.google.com/android/repository/文件名 文件名对应版本名。例如文件名为commandlinetools-win-9862592_latest.zip 引用Android cmdline-tools 版本与其…

面向跳转编程JOP问题及挑战

BTI分支目标识别精讲与实践系列 思考 1、什么是代码重用攻击?什么是ROP攻击?区别与联系? 2、什么是JOP攻击?间接分支跳转指令? 3、JOP攻击的缓解技术?控制流完整性保护? 4、BTI下的JOP如何缓解?什么是目标着陆台? 5、BTI的架构细节?硬件原理?间接分支类型?指…

LangChain Agent v0.2.0简明教程 (下)

5. Agent5.1 Tools&#xff08;Function Calling&#xff09;5.2 Agent 6. Memory 5. Agent Agent的核心思想是根据用户输入的prompt&#xff0c;使用LLM来选择要采取的一系列操作(agent调用tools prompt llm tools)。在Chain中&#xff0c;一系列操作被硬编码&#xff08;…

记录一下前端定时器清除失效的问题

目录 一、问题引入 二、错误代码&#xff1a; 三、错误原因 四、修正的代码 附 vue提供的线上运行代码网址以便证实可用性 一、问题引入 按理说&#xff0c;打开定时器 xxx setInterval(()>{ },100)&#xff0c;之后只要 clearInterval(xxx) 就可以顺利关闭定时器…

汇编入门--基础知识(1)

1.汇编语言的概念 汇编语言是一种低级编程语言&#xff0c;它与计算机的机器语言非常接近&#xff0c;但比机器语言更易于人类阅读和理解。汇编语言是用一系列的助记符来表示机器语言的操作码和操作数。每种计算机体系结构&#xff08;如x86、ARM等&#xff09;都有自己的汇编语…

『羊毛教程』免费使用一个月的GPT-4、Claude 3 Opus!

大家好&#xff0c;我是木易&#xff0c;一个持续关注AI领域的互联网技术产品经理&#xff0c;国内Top2本科&#xff0c;美国Top10 CS研究生&#xff0c;MBA。我坚信AI是普通人变强的“外挂”&#xff0c;所以创建了“AI信息Gap”这个公众号&#xff0c;专注于分享AI全维度知识…