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

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

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

  • 需求:公司项目对接gpt,gpt产生的结果是分段返回,所以要求在产生结果时,有打字机的效果。原本是由定时器调用,后来优化改为服务端使用SSE接口。
  • 小程序使用起来比较方便,但是要求小程序基本库的版本需要在2.20.2以上。文档地址移步这里
  • 微信小程序代码
   // 基础库为2.33.0const requestTask = wx.request({url: `xxxxxxxx`, // 需要请求的接口地址enableChunked: true // enableChunked必须为true})// 开发工具存在问题,使用真机测试const listener = data => {// data为返回的数据,可以在此对数据进行处理}// 监听服务端返回的数据requestTask.onChunkReceived(listener)// 移除监听 需传入与监听时同一个的函数对象requestTask.offChunkReceived(listener)

注意:

  1. 接收到的结果数据类型固定为arrayBuffer,需要开发者自己进行转换,可以使用下面方法进行转换。
function arrayBufferToString(arr){if(typeof arr === 'string') {  return arr;  }  var dataview = new DataView(arr);var ints = new Uint8Array(arr.byteLength);for(var i=0;i<ints.length;i++){ints[i]=dataview.getUint8(i);}var str = '',  _arr = ints;  for(var i = 0; i < _arr.length; i++) {if (_arr[i]) {var one = _arr[i].toString(2),  v = one.match(/^1+?(?=0)/);  if(v && one.length == 8) {var bytesLength = v[0].length;var store = _arr[i].toString(2).slice(7 - bytesLength);  for(var st = 1; st < bytesLength; st++) {  if ( _arr[st + i]) {store += _arr[st + i].toString(2).slice(2);  }}  str += String.fromCharCode(parseInt(store, 2));  i += bytesLength - 1;  } else {  str += String.fromCharCode(_arr[i]);  }  }}  return str; 
}
  1. 微信开发工具中无法转换数据。可能是由于开发工具问题,在服务端返回的字符串中存在中文时,开发工具是无法正常转换的。但是在真机是正常的。如果需要在开发工具中实现转换,可以与服务端协商将数据进行URL编码返回。
  2. 服务端一次返回的结果,微信小程序有时会将其截开,并分两次返回。由于截开的位置并不固定,所以可能会存在转换ArrayBuffer时,出现结果异常的问题。使用SSE接口一般有两种需求:一种是将所有的结果累加起来、还有一种就是后面的结果覆盖前面的。在使用第一种时,每次的返回量不会太大,所以应该不会出现微信小程序截开两次返回的情况。但是第二种每次返回的接口都在逐渐增大,可能会出现这种情况,我就是第二种。我是使用下面方法解决
// 我的数据是json字符串,如果出现分开返回,在转json时,会出现报错,所以使用try处理
let timer = null
const listener = data => {try {// 上次结果出现报错 这次正常 清除延时器if (timer) {clearTimeout(timer)timer = null}// 小程序存在数据截开的情况  存五次数据if (arr.length > 4) {arr.shift()}// 这里要存储的是arrayBuffer,不能存储string数据arr.push(data.data)// 数据处理 .......} catch (e) {// 最后一次出现报错 三秒后重组数据timer = setTimeout(() => {const len = arr.lengthlet index = len - 2,data = arr[len - 1],result = nullwhile(index > -1) {// 从后往前 合并data = mergeArrayBuffers(arr[index], data)try{// 数据处理 .......index = -1}catch(e){index -= 1}}}, 3000)}}
// 合并arrayBuffer
function mergeArrayBuffers(buffer1, buffer2) {if (!buffer1) {return buffer2;} else if (!buffer2) {return buffer1;}var tmp = new Uint8Array(buffer1.byteLength + buffer2.byteLength);tmp.set(new Uint8Array(buffer1), 0);tmp.set(new Uint8Array(buffer2), buffer1.byteLength);return tmp.buffer;
}
  • 由于是后面的结果覆盖前面的,我只需要处理最后一次结果,如果结果正常则不用处理。不正常再将前面存储的数据一一合并,再做处理。
  • 通常一个中文是两个字节,所以可能会出现一个中文恰好被截开的情况,所以需要存储的是原数据
  1. 由于SSE特性,需要由用户端断开连接,所以在使用完毕时,需要调用requestTask.abort()断开连接
    ps: 此文章做个人平常记录

相关文章:

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

微信小程序对接SSE接口记录 需求&#xff1a;公司项目对接gpt&#xff0c;gpt产生的结果是分段返回&#xff0c;所以要求在产生结果时&#xff0c;有打字机的效果。原本是由定时器调用&#xff0c;后来优化改为服务端使用SSE接口。小程序使用起来比较方便&#xff0c;但是要求…...

Ngrok 的绝佳替代品,内网穿透神器 Serveo

什么是 Serveo Serveo 是一个免费的内网穿透服务&#xff0c;Serveo 可以将本地计算机暴露在互联网上&#xff0c;官方声称其为 Ngrok 的绝佳替代品。 Serveo 其最大优点是使用现有的 SSH 客户端&#xff0c;无需安装任何客户端软件即可完成端口转发。 Serveo 工作原理很简单…...

网络知识点之-路由

路由&#xff08;routing&#xff09;是指分组从源到目的地时&#xff0c;决定端到端路径的网络范围的进程。路由工作在OSI参考模型第三层——网络层的数据包转发设备。路由器通过转发数据包来实现网络互连。虽然路由器可以支持多种协议&#xff08;如TCP/IP、IPX/SPX、AppleTa…...

input 框如何移动光标,设置光标位置?

获取 input 光标位置 const inputDom document.getElementById("input") const selectionStart inputDom.selectionStart设置 input 光标 inputDom.focus() // focus() 异步&#xff0c;所以加了 setTimeout setTimeout(() > {const nextSelection selection…...

linux内核系统调用学习5:SYSCALL_DEFINE<0-6>

系统调用最大参数是6&#xff0c;由下面这个宏定义&#xff0c;位于文件include\linux\syscalls.h #define SYSCALL_DEFINE_MAXARGS 6 SYSCALL_DEFINE0(fork) fork&#xff1a;系统调用名。 SYSCALL_DEFINE1(set_tid_address, int __user *, tidptr) set_tid_address&#x…...

maven镜像仓库配置(多镜像自动切换)

大家在使用IDEA的时候会遇到这样的一个问题&#xff0c;就是在下载源代码和资源文档的时候&#xff0c;有些镜像仓库里面没有源代码和资源文档&#xff0c;然后会导致下载失败。 这时候就需要多个镜像仓库的地址了。 附上我自己的配置文件&#xff1a; <mirrors><!--…...

ChatGPT在智能监控和安防系统中的应用如何?

ChatGPT在智能监控和安防系统中有着广泛的应用潜力。智能监控和安防系统是利用人工智能和计算机视觉技术来实现对环境的实时监控和安全保障的系统。ChatGPT作为一种通用的预训练语言模型&#xff0c;可以在智能监控和安防系统中发挥以下作用&#xff1a; 1. **智能视频监控**&…...

【Spring Boot Admin】介绍以及使用

介绍 概述 Spring Boot Admin是一个监控工具&#xff0c;旨在以一种漂亮且易于访问的方式可视化Spring Boot Actuators提供的信息。 主要功能点 显示应用程序的监控状态应用程序上下线监控查看 JVM&#xff0c;线程信息可视化的查看日志以及下载日志文件动态切换日志级别Http…...

本地私有仓库部署、docker--harbor私有仓库部署和管理

部署本地私有仓库 拉取镜像 修改daemon.json配置文件 重启docker服务 创建容器 为镜像打标签 上传镜像 查看私有仓库 其他主机拉取私有仓库镜像 Docker--harbor私有仓库 &#xff08;1&#xff09;什么是Harbor Harbor 是 VMware 公司开源的企业级 Docker Registry 项目…...

java根据模板导出word

java根据模板导出word 日常开发中&#xff0c;常常会遇到各种各样的表格进行导出&#xff0c;比较好的办法就是提前弄好word模版&#xff0c;再通过遍历的方式进行导出文档 1、制作word模版 模版编写 内容替换 目标下面模版进行多页展示 将word转换成xml 将xml格式化 再将x…...

spring学习笔记十四

注解开发Bean总结 功能 xml配置注解定义Bean bean标签 id属性class属性 Component ControllerServiceRepositorComponentScan 设置依赖注入 setter注入(set方法) 引用类型/简单类型构造器注入 引用类型和简单类型自动装配 Autowired QualifierValue 配置第三方Bean be…...

【springmvc部分功能源码仿写第一步】实现java对目录下所有文件的遍历

废话不多说&#xff0c;直接上源码&#xff01; public class MiniSpring {public static void main(String[] args) {String path "D:\\ideaProject\\thread";File file new File(path);List<String> list new ArrayList<>();System.out.println(fi…...

SpringBoot中接口幂等性实现方案-自定义注解+Redis+拦截器实现防止订单重复提交

场景 SpringBootRedis自定义注解实现接口防刷(限制不同接口单位时间内最大请求次数)&#xff1a; SpringBootRedis自定义注解实现接口防刷(限制不同接口单位时间内最大请求次数)_redis防刷_霸道流氓气质的博客-CSDN博客 以下接口幂等性的实现方式与上面博客类似&#xff0c;…...

论文解读|用于从RGB-D数据进行3D物体检测的Frustum PointNets

原创 | 文 BFT机器人 01 摘要 论文研究了室内和室外场景中基于RGBD数据的3D目标检测。论文的方法不仅仅依赖于3D方案&#xff0c;而是利用成熟的2D对象检测器和先进的3D深度学习进行对象定位&#xff0c;即使是小对象也能实现高效率和高召回。 直接在原始点云中学习&#xff0…...

3ds Max图文教程: 使用动态工具Mass FX 创建风铃动画

推荐&#xff1a; NSDT场景编辑器助你快速搭建可二次开发的3D应用场景 1. 简单的场景设置 步骤 1 打开 3ds Max。 打开 3ds Max 步骤 2 我将向您展示风铃背后的动态 通过简单的场景设置进行模拟。一旦你有了这个想法&#xff0c;你就可以应用这个 技术到复杂的风铃结构。 基…...

抖音矩阵系统源码开发搭建部署分享

一、 功能开发设计 &#xff08;1&#xff09;数据概览&#xff1a;账号&#xff0c;视频top10数据统计 &#xff08;2&#xff09;AI视频创意&#xff1a;原创视频批量剪辑&#xff0c;阶乘算法&#xff0c;去重原理 &#xff08;3&#xff09;同城拓客&#xff1a;线下门店…...

Grafana图形web监控的安装与配置

目录 一、安装并配置 二、Web访问 三、Grafana启用zabbix插件 四、Grafana添加zabbix数据源 五、创建仪表盘 创建监控项完成保存仪表盘 六、查看创建的仪表盘 七、在现有的dashboard&#xff08;仪表盘&#xff09;中添加图形 八、查看最终dashborad&#xff08;仪表盘&#x…...

【机器学习】了解 AUC - ROC 曲线

一、说明 在机器学习中&#xff0c;性能测量是一项基本任务。因此&#xff0c;当涉及到分类问题时&#xff0c;我们可以依靠AUC - ROC曲线。当我们需要检查或可视化多类分类问题的性能时&#xff0c;我们使用AUC&#xff08;曲线下面积&#xff09;ROC&#xff08;接收器工作特…...

Docker 容器生命周期:创建、启动、暂停与停止----从创建到停止多角度分析

&#x1f337;&#x1f341; 博主 libin9iOak带您 Go to New World.✨&#x1f341; &#x1f984; 个人主页——libin9iOak的博客&#x1f390; &#x1f433; 《面试题大全》 文章图文并茂&#x1f995;生动形象&#x1f996;简单易学&#xff01;欢迎大家来踩踩~&#x1f33…...

C++STL库中的vector

文章目录 vector的介绍及使用 vector深度剖析及模拟实现 动态二维数组理解 一、vector的介绍及使用 1.vector的介绍 1. vector是表示可变大小数组的序列容器。 2. 就像数组一样&#xff0c;vector也采用的连续存储空间来存储元素。也就是意味着可以采用下标对vector的元素进…...

在软件开发中正确使用MySQL日期时间类型的深度解析

在日常软件开发场景中&#xff0c;时间信息的存储是底层且核心的需求。从金融交易的精确记账时间、用户操作的行为日志&#xff0c;到供应链系统的物流节点时间戳&#xff0c;时间数据的准确性直接决定业务逻辑的可靠性。MySQL作为主流关系型数据库&#xff0c;其日期时间类型的…...

CVPR 2025 MIMO: 支持视觉指代和像素grounding 的医学视觉语言模型

CVPR 2025 | MIMO&#xff1a;支持视觉指代和像素对齐的医学视觉语言模型 论文信息 标题&#xff1a;MIMO: A medical vision language model with visual referring multimodal input and pixel grounding multimodal output作者&#xff1a;Yanyuan Chen, Dexuan Xu, Yu Hu…...

【位运算】消失的两个数字(hard)

消失的两个数字&#xff08;hard&#xff09; 题⽬描述&#xff1a;解法&#xff08;位运算&#xff09;&#xff1a;Java 算法代码&#xff1a;更简便代码 题⽬链接&#xff1a;⾯试题 17.19. 消失的两个数字 题⽬描述&#xff1a; 给定⼀个数组&#xff0c;包含从 1 到 N 所有…...

基于Flask实现的医疗保险欺诈识别监测模型

基于Flask实现的医疗保险欺诈识别监测模型 项目截图 项目简介 社会医疗保险是国家通过立法形式强制实施&#xff0c;由雇主和个人按一定比例缴纳保险费&#xff0c;建立社会医疗保险基金&#xff0c;支付雇员医疗费用的一种医疗保险制度&#xff0c; 它是促进社会文明和进步的…...

DAY 47

三、通道注意力 3.1 通道注意力的定义 # 新增&#xff1a;通道注意力模块&#xff08;SE模块&#xff09; class ChannelAttention(nn.Module):"""通道注意力模块(Squeeze-and-Excitation)"""def __init__(self, in_channels, reduction_rat…...

鸿蒙中用HarmonyOS SDK应用服务 HarmonyOS5开发一个医院挂号小程序

一、开发准备 ​​环境搭建​​&#xff1a; 安装DevEco Studio 3.0或更高版本配置HarmonyOS SDK申请开发者账号 ​​项目创建​​&#xff1a; File > New > Create Project > Application (选择"Empty Ability") 二、核心功能实现 1. 医院科室展示 /…...

Python实现prophet 理论及参数优化

文章目录 Prophet理论及模型参数介绍Python代码完整实现prophet 添加外部数据进行模型优化 之前初步学习prophet的时候&#xff0c;写过一篇简单实现&#xff0c;后期随着对该模型的深入研究&#xff0c;本次记录涉及到prophet 的公式以及参数调优&#xff0c;从公式可以更直观…...

数据链路层的主要功能是什么

数据链路层&#xff08;OSI模型第2层&#xff09;的核心功能是在相邻网络节点&#xff08;如交换机、主机&#xff09;间提供可靠的数据帧传输服务&#xff0c;主要职责包括&#xff1a; &#x1f511; 核心功能详解&#xff1a; 帧封装与解封装 封装&#xff1a; 将网络层下发…...

深入浅出深度学习基础:从感知机到全连接神经网络的核心原理与应用

文章目录 前言一、感知机 (Perceptron)1.1 基础介绍1.1.1 感知机是什么&#xff1f;1.1.2 感知机的工作原理 1.2 感知机的简单应用&#xff1a;基本逻辑门1.2.1 逻辑与 (Logic AND)1.2.2 逻辑或 (Logic OR)1.2.3 逻辑与非 (Logic NAND) 1.3 感知机的实现1.3.1 简单实现 (基于阈…...

Web中间件--tomcat学习

Web中间件–tomcat Java虚拟机详解 什么是JAVA虚拟机 Java虚拟机是一个抽象的计算机&#xff0c;它可以执行Java字节码。Java虚拟机是Java平台的一部分&#xff0c;Java平台由Java语言、Java API和Java虚拟机组成。Java虚拟机的主要作用是将Java字节码转换为机器代码&#x…...