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

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

  • 需求:公司项目对接gpt,gpt产生的结果是分段返回,所以要求在产生结果时,有打字机的效果。原本是由定时器调用,后来优化改为服务端使用SSE接口。
  • 小程序使用起来比较方便,但是要求小程序基本库的版本需要在2.20.2以上。文档地址移步这里
  • 微信小程序代码
   // 基础库为2.33.0
   const 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 arr = []
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.length
			let index = len - 2,
				data = arr[len - 1],
				result = null
			while(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: 此文章做个人平常记录
  • 7
    点赞
  • 11
    收藏
    觉得还不错? 一键收藏
  • 打赏
    打赏
  • 4
    评论
### 回答1: Spring Boot 微信小程序对接可以通过以下步骤完成: 1.注册微信公众平台账号并创建小程序,获取小程序的AppID和AppSecret。 2.创建一个Spring Boot项目,添加Spring Boot对WeChat SDK的依赖。 3.在项目中配置小程序的AppID和AppSecret,可以通过在配置文件中设置或者在代码中进行配置。 4.实现微信小程序的登录,可以通过WeChat SDK提供的接口获取用户的OpenID和SessionKey。 5.实现微信小程序的支付功能,可以通过WeChat SDK提供的接口实现支付功能。 6.实现微信小程序的模板消息推送,可以通过WeChat SDK提供的接口实现模板消息的发送功能。 7.实现微信小程序的二维码生成,可以通过WeChat SDK提供的接口生成二维码图片。 8.实现微信小程序的数据统计,可以通过WeChat SDK提供的接口获取小程序的访问数据和用户数据。 以上是基本的对接流程,具体实现还需要根据项目需求进行调整和扩展。 ### 回答2: Spring Boot对接微信小程序的方式主要有以下几个步骤: 1. 获取微信小程序的AppID和AppSecret,可以在微信公众平台上申请得到。 2. 在Spring Boot项目中添加依赖,例如引入Spring Boot的Web模块和微信的SDK等。可以使用Maven或Gradle进行依赖管理。 3. 创建微信小程序登录的接口,用于接收小程序的登录请求,获取小程序的code和encryptedData等参数。 4. 使用微信提供的SDK,使用AppID和AppSecret等参数调用微信的接口,获取访问令牌access_token和用户唯一标识openid等信息。 5. 返回访问令牌和用户信息给小程序。 6. 小程序接收到访问令牌和用户信息后,可以保存用户信息或进行其他业务逻辑处理。 7. 针对其他小程序的业务需求,可以继续对接微信提供的其他接口,如支付、模板消息等。 8. 在开发过程中,可以使用微信提供的工具进行API测试和调试,确保接口的正确性。 总结起来,对接微信小程序需要获取AppID和AppSecret,使用Spring Boot创建接口,调用微信接口获取访问令牌和用户信息,并进行相应的业务处理。

“相关推荐”对你有帮助么?

  • 非常没帮助
  • 没帮助
  • 一般
  • 有帮助
  • 非常有帮助
提交
评论 4
添加红包

请填写红包祝福语或标题

红包个数最小为10个

红包金额最低5元

当前余额3.43前往充值 >
需支付:10.00
成就一亿技术人!
领取后你会自动成为博主和红包主的粉丝 规则
hope_wisdom
发出的红包

打赏作者

淡莣一苆~

你的鼓励将是我创作的最大动力

¥1 ¥2 ¥4 ¥6 ¥10 ¥20
扫码支付:¥1
获取中
扫码支付

您的余额不足,请更换扫码支付或充值

打赏作者

实付
使用余额支付
点击重新获取
扫码支付
钱包余额 0

抵扣说明:

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

余额充值