uniapp微信小程序实现sse

微信小程序实现sse

注:因为微信小程序不支持sse请求,因为后台给的是分包的流,所以我们就使用接受流的方式,一直接受,然后把接受的数据拿取使用。这里还是使用uniapp的原生请求。

上代码

javascript 复制代码
//注意:一定要下载text-encoding-shim包,后台地址和token和后台约束好,复制代码后替换url和地址,即可使用。
import * as TextEncoding from "text-encoding-shim";
let buffer = ''; //定义在页面的最外面。
let encoder = new TextEncoding.TextDecoder("utf-8");//定义在页面的最外面。

//方法


startSSE() {   
	this.requestTask = uni.request({
		url: "sse后台地址",
		method: 'get', 
		header: {
			'Accept': 'text/event-stream',//必填返回的是文本
			'Cache-Control': 'no-cache',
			'Connection': 'keep-alive', 
			'Authorization': 'token'//后台的token
		},
		responseType: 'arraybuffer',//接受的是流
		enableChunked: true,//开启分包
		success: (res) => {}
	});
	 
	this.requestTask.onChunkReceived((res) => { 
	 try {
		 // 将ArrayBuffer转为字符串并追加到缓冲区
		 
		 let arrayBuffer = new Uint8Array(res.data)
		 let chunkStr = encoder.decode(arrayBuffer);
		 buffer += chunkStr;

		 // 分割完整事件(以\n\n分隔)
		 let eventEndIndex;
		 while ((eventEndIndex = buffer.indexOf('\n\n')) >= 0) {
			 const eventData = buffer.slice(0, eventEndIndex);
			 buffer = buffer.slice(eventEndIndex + 2);

			 // 解析SSE事件内容
			 const message = this.parseSSEEvent(eventData);
			 if (message) {
				 console.log('收到事件:', message);
				 // 触发自定义事件或更新数据 
				 //数据拿到后,做自己的业务处理
			 }
		 }
	 } catch (e) {
		 console.error('数据处理异常:', e);
	 } 
	});
},
// 解析SSE事件格式
 parseSSEEvent(rawData) {
	 const lines = rawData.split('\n');
	 let event = { data: '' };
 
	 lines.forEach(line => {
		 const colonIndex = line.indexOf(':');
		 if (colonIndex > 0) {
			 const field = line.slice(0, colonIndex).trim();
			 const value = line.slice(colonIndex + 1).trim();
			 if (field === 'data') {
				 event.data += value + '\n';
			 } else if (field === 'event') {
				 event.type = value;
			 } else if (field === 'id') {
				 event.id = value;
			 } else if (field === 'retry') {
				 event.retry = parseInt(value, 10);
			 }
		 }
	 });
 
	 event.data = event.data.trimEnd(); // 移除末尾换行
	 return event.data ? event : null;
 },
相关推荐
陈不知代码8 小时前
uniapp创建vue3+ts+pinia+sass项目
前端·uni-app·sass
说私域8 小时前
公域流量向私域流量转化策略研究——基于开源AI智能客服、AI智能名片与S2B2C商城小程序的融合应用
人工智能·小程序
半生过往8 小时前
微信小程序文件下载与预览功能实现详解
微信小程序·小程序·notepad++·压缩包下载解压
源码_V_saaskw8 小时前
JAVA图文短视频交友+自营商城系统源码支持小程序+Android+IOS+H5
java·微信小程序·小程序·uni-app·音视频·交友
weixin_lynhgworld11 小时前
淘宝扭蛋机小程序系统开发:重塑电商互动模式
大数据·小程序
996幸存者13 小时前
uni-app区域选择、支持静态、动态数据
微信小程序·uni-app
ᥬ 小月亮14 小时前
Uniapp编写微信小程序,绘制动态圆环进度条
微信小程序·小程序·uni-app
耶啵奶膘18 小时前
uniapp+vue3——通知栏标题纵向滚动切换
uni-app
The_era_achievs_hero21 小时前
UniappDay03
vue.js·微信小程序·uni-app
说私域1 天前
技术赋能与营销创新:开源链动2+1模式AI智能名片S2B2C商城小程序的流量转化路径研究
人工智能·小程序·开源