uniapp微信小程序实现sse

微信小程序实现sse

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

上代码

//注意：一定要下载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;
 },